208 lines
8.3 KiB
TypeScript
208 lines
8.3 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import '../dees-panel.js';
|
|
import './dees-input-profilepicture.js';
|
|
import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
${css`
|
|
.demo-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
padding: 24px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
dees-panel {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.demo-row {
|
|
display: flex;
|
|
gap: 48px;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.demo-output {
|
|
margin-top: 16px;
|
|
padding: 12px;
|
|
background: rgba(0, 105, 242, 0.1);
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: monospace;
|
|
word-break: break-all;
|
|
max-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.feature-list {
|
|
margin-top: 16px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.feature-list li {
|
|
margin-bottom: 8px;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Basic demo with round profile picture
|
|
const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
|
|
|
|
if (roundProfile) {
|
|
roundProfile.addEventListener('change', (event: CustomEvent) => {
|
|
const target = event.target as DeesInputProfilePicture;
|
|
console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
|
|
<div class="demo-row">
|
|
<dees-input-profilepicture
|
|
label="Profile Picture (Round)"
|
|
description="Click to upload or drag & drop an image"
|
|
shape="round"
|
|
size="120"
|
|
></dees-input-profilepicture>
|
|
|
|
<dees-input-profilepicture
|
|
label="Profile Picture (Square)"
|
|
description="Supports JPEG, PNG, and WebP formats"
|
|
shape="square"
|
|
size="120"
|
|
></dees-input-profilepicture>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Different sizes demo
|
|
const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
|
|
profiles.forEach((profile) => {
|
|
profile.addEventListener('change', (event: CustomEvent) => {
|
|
const target = event.target as DeesInputProfilePicture;
|
|
console.log(`Profile (size ${target.size}) changed`);
|
|
});
|
|
});
|
|
}}>
|
|
<dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
|
|
<div class="demo-row">
|
|
<dees-input-profilepicture
|
|
label="Small (80px)"
|
|
shape="round"
|
|
size="80"
|
|
></dees-input-profilepicture>
|
|
|
|
<dees-input-profilepicture
|
|
label="Medium (120px)"
|
|
shape="round"
|
|
size="120"
|
|
></dees-input-profilepicture>
|
|
|
|
<dees-input-profilepicture
|
|
label="Large (160px)"
|
|
shape="round"
|
|
size="160"
|
|
></dees-input-profilepicture>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Pre-filled profile with placeholder
|
|
const sampleImageUrl = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNjY3ZWVhIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NjRiYTIiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkaWVudCkiIC8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGRvbWluYW50LWJhc2VsaW5lPSJtaWRkbGUiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSI4MCIgZmlsbD0id2hpdGUiPkpEPC90ZXh0Pgo8L3N2Zz4=';
|
|
|
|
const prefilledProfile = elementArg.querySelector('#prefilled-profile') as DeesInputProfilePicture;
|
|
if (prefilledProfile) {
|
|
prefilledProfile.value = sampleImageUrl;
|
|
|
|
prefilledProfile.addEventListener('change', (event: CustomEvent) => {
|
|
const target = event.target as DeesInputProfilePicture;
|
|
const output = elementArg.querySelector('#prefilled-output');
|
|
if (output) {
|
|
output.textContent = target.value ?
|
|
`Image data: ${target.value.substring(0, 80)}...` :
|
|
'No image selected';
|
|
}
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>
|
|
<dees-input-profilepicture
|
|
id="prefilled-profile"
|
|
label="Edit Existing Profile"
|
|
description="Click the edit button to change or delete to remove"
|
|
shape="round"
|
|
size="150"
|
|
></dees-input-profilepicture>
|
|
|
|
<div id="prefilled-output" class="demo-output">
|
|
Image data will appear here when changed
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Disabled state demo
|
|
const disabledProfile = elementArg.querySelector('#disabled-profile') as DeesInputProfilePicture;
|
|
if (disabledProfile) {
|
|
disabledProfile.value = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0iI2NjY2NjYyIgLz4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjYwIiBmaWxsPSJ3aGl0ZSI+TkE8L3RleHQ+Cjwvc3ZnPg==';
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'Form States'} .subtitle=${'Different states and configurations'}>
|
|
<div class="demo-row">
|
|
<dees-input-profilepicture
|
|
label="Required Field"
|
|
description="This field is required"
|
|
shape="round"
|
|
.required=${true}
|
|
></dees-input-profilepicture>
|
|
|
|
<dees-input-profilepicture
|
|
id="disabled-profile"
|
|
label="Disabled State"
|
|
description="Cannot be edited"
|
|
shape="square"
|
|
.disabled=${true}
|
|
></dees-input-profilepicture>
|
|
|
|
<dees-input-profilepicture
|
|
label="Upload Only"
|
|
description="Delete not allowed"
|
|
shape="round"
|
|
.allowDelete=${false}
|
|
></dees-input-profilepicture>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper>
|
|
<dees-panel .title=${'Features'} .subtitle=${'Complete feature set of the profile picture input'}>
|
|
<ul class="feature-list">
|
|
<li><strong>Image Upload:</strong> Click to upload or drag & drop images</li>
|
|
<li><strong>Image Cropping:</strong> Interactive crop tool with resize handles</li>
|
|
<li><strong>Shape Support:</strong> Round or square profile pictures</li>
|
|
<li><strong>Size Customization:</strong> Adjustable dimensions</li>
|
|
<li><strong>Preview & Edit:</strong> Hover overlay with edit and delete options</li>
|
|
<li><strong>File Validation:</strong> Format and size restrictions</li>
|
|
<li><strong>Responsive Design:</strong> Works on desktop and mobile devices</li>
|
|
<li><strong>Form Integration:</strong> Standard form value binding and validation</li>
|
|
<li><strong>Accessibility:</strong> Keyboard navigation and screen reader support</li>
|
|
<li><strong>Z-Index Management:</strong> Proper modal stacking with registry</li>
|
|
</ul>
|
|
|
|
<div style="margin-top: 24px;">
|
|
<strong>Supported Formats:</strong> JPEG, PNG, WebP<br>
|
|
<strong>Max File Size:</strong> 5MB (configurable)<br>
|
|
<strong>Output Format:</strong> Base64 encoded JPEG
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
</div>
|
|
`; |