323 lines
12 KiB
TypeScript
323 lines
12 KiB
TypeScript
import { html, css } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './dees-panel.js';
|
|
import './dees-form.js';
|
|
import './dees-form-submit.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;
|
|
}
|
|
|
|
dees-panel:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.horizontal-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.spacer {
|
|
height: 200px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #999;
|
|
font-size: 14px;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate programmatic interaction with basic dropdowns
|
|
const countryDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Country"]');
|
|
const roleDropdown = elementArg.querySelector('dees-input-dropdown[label="Select Role"]');
|
|
|
|
// Log when country changes
|
|
if (countryDropdown) {
|
|
countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
console.log('Country selected:', event.detail);
|
|
});
|
|
}
|
|
|
|
// Log when role changes
|
|
if (roleDropdown) {
|
|
roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
console.log('Role selected:', event.detail);
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
|
|
<dees-input-dropdown
|
|
.label=${'Select Country'}
|
|
.options=${[
|
|
{ option: 'United States', key: 'us' },
|
|
{ option: 'Canada', key: 'ca' },
|
|
{ option: 'Germany', key: 'de' },
|
|
{ option: 'France', key: 'fr' },
|
|
{ option: 'United Kingdom', key: 'uk' },
|
|
{ option: 'Australia', key: 'au' },
|
|
{ option: 'Japan', key: 'jp' },
|
|
{ option: 'Brazil', key: 'br' }
|
|
]}
|
|
.selectedOption=${{ option: 'United States', key: 'us' }}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Select Role'}
|
|
.options=${[
|
|
{ option: 'Administrator', key: 'admin' },
|
|
{ option: 'Editor', key: 'editor' },
|
|
{ option: 'Viewer', key: 'viewer' },
|
|
{ option: 'Guest', key: 'guest' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate simpler dropdown without search
|
|
const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
|
|
|
|
if (priorityDropdown) {
|
|
priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
console.log(`Priority changed to: ${event.detail.option}`);
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
|
|
<dees-input-dropdown
|
|
.label=${'Priority Level'}
|
|
.enableSearch=${false}
|
|
.options=${[
|
|
{ option: 'High', key: 'high' },
|
|
{ option: 'Medium', key: 'medium' },
|
|
{ option: 'Low', key: 'low' }
|
|
]}
|
|
.selectedOption=${{ option: 'Medium', key: 'medium' }}
|
|
></dees-input-dropdown>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate horizontal layout with multiple dropdowns
|
|
const dropdowns = elementArg.querySelectorAll('dees-input-dropdown');
|
|
|
|
// Log all changes from horizontal dropdowns
|
|
dropdowns.forEach((dropdown) => {
|
|
dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
const label = dropdown.getAttribute('label');
|
|
console.log(`${label}: ${event.detail.option}`);
|
|
});
|
|
});
|
|
}}>
|
|
<dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
|
|
<div class="horizontal-group">
|
|
<dees-input-dropdown
|
|
.label=${'Department'}
|
|
.layoutMode=${'horizontal'}
|
|
.options=${[
|
|
{ option: 'Engineering', key: 'eng' },
|
|
{ option: 'Design', key: 'design' },
|
|
{ option: 'Marketing', key: 'marketing' },
|
|
{ option: 'Sales', key: 'sales' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Team Size'}
|
|
.layoutMode=${'horizontal'}
|
|
.enableSearch=${false}
|
|
.options=${[
|
|
{ option: '1-5', key: 'small' },
|
|
{ option: '6-20', key: 'medium' },
|
|
{ option: '21-50', key: 'large' },
|
|
{ option: '50+', key: 'xlarge' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Location'}
|
|
.layoutMode=${'horizontal'}
|
|
.options=${[
|
|
{ option: 'Remote', key: 'remote' },
|
|
{ option: 'On-site', key: 'onsite' },
|
|
{ option: 'Hybrid', key: 'hybrid' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
</div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate state handling
|
|
const requiredDropdown = elementArg.querySelector('dees-input-dropdown[required]');
|
|
|
|
if (requiredDropdown) {
|
|
// Show validation state changes
|
|
requiredDropdown.addEventListener('blur', () => {
|
|
console.log('Required dropdown lost focus');
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
|
|
<dees-input-dropdown
|
|
.label=${'Required Field'}
|
|
.required=${true}
|
|
.options=${[
|
|
{ option: 'Option A', key: 'a' },
|
|
{ option: 'Option B', key: 'b' },
|
|
{ option: 'Option C', key: 'c' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Disabled Dropdown'}
|
|
.disabled=${true}
|
|
.options=${[
|
|
{ option: 'Cannot Select', key: 'disabled' }
|
|
]}
|
|
.selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
|
|
></dees-input-dropdown>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<div class="spacer">
|
|
(Spacer to test dropdown positioning)
|
|
</div>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// This dropdown demonstrates automatic positioning
|
|
const dropdown = elementArg.querySelector('dees-input-dropdown');
|
|
|
|
if (dropdown) {
|
|
dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
console.log('Bottom dropdown selected:', event.detail);
|
|
});
|
|
|
|
// Note: The dropdown automatically detects available space
|
|
// and opens upward when near the bottom of the viewport
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'5. Bottom Positioning'} .subtitle=${'Dropdown that opens upward when near bottom of viewport'}>
|
|
<dees-input-dropdown
|
|
.label=${'Opens Upward'}
|
|
.options=${[
|
|
{ option: 'First Option', key: 'first' },
|
|
{ option: 'Second Option', key: 'second' },
|
|
{ option: 'Third Option', key: 'third' },
|
|
{ option: 'Fourth Option', key: 'fourth' },
|
|
{ option: 'Fifth Option', key: 'fifth' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Setup the interactive payload display
|
|
const dropdown = elementArg.querySelector('dees-input-dropdown');
|
|
const output = elementArg.querySelector('#selection-output');
|
|
|
|
if (dropdown && output) {
|
|
// Initialize output
|
|
output.innerHTML = '<em>Select a product to see details...</em>';
|
|
|
|
// Handle dropdown changes
|
|
dropdown.addEventListener('change', (event: CustomEvent) => {
|
|
if (event.detail.value) {
|
|
output.innerHTML = `
|
|
<strong>Selected:</strong> ${event.detail.value.option}<br>
|
|
<strong>Key:</strong> ${event.detail.value.key}<br>
|
|
<strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
|
|
<strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
|
|
`;
|
|
}
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
|
|
<dees-input-dropdown
|
|
.label=${'Select Product'}
|
|
.options=${[
|
|
{ option: 'Basic Plan', key: 'basic', payload: { price: 9.99, features: ['Feature A'] } },
|
|
{ option: 'Pro Plan', key: 'pro', payload: { price: 19.99, features: ['Feature A', 'Feature B'] } },
|
|
{ option: 'Enterprise Plan', key: 'enterprise', payload: { price: 49.99, features: ['Feature A', 'Feature B', 'Feature C'] } }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<div id="selection-output" style="margin-top: 16px; padding: 12px; background: rgba(0, 105, 242, 0.1); border-radius: 4px; font-size: 14px;"></div>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Demonstrate form integration and validation
|
|
const form = elementArg.querySelector('dees-form');
|
|
const projectTypeDropdown = elementArg.querySelector('dees-input-dropdown[key="projectType"]');
|
|
const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
|
|
|
|
if (form) {
|
|
form.addEventListener('formData', (event: CustomEvent) => {
|
|
console.log('Form submitted with data:', event.detail.data);
|
|
});
|
|
}
|
|
|
|
if (projectTypeDropdown && frameworkDropdown) {
|
|
// Filter frameworks based on project type
|
|
projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
|
|
const selectedType = event.detail.key;
|
|
console.log(`Project type changed to: ${selectedType}`);
|
|
|
|
// In a real app, you could filter the framework options based on project type
|
|
// For demo purposes, we just log the change
|
|
});
|
|
}
|
|
}}>
|
|
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
|
|
<dees-form>
|
|
<dees-input-dropdown
|
|
.label=${'Project Type'}
|
|
.key=${'projectType'}
|
|
.required=${true}
|
|
.options=${[
|
|
{ option: 'Web Application', key: 'web' },
|
|
{ option: 'Mobile Application', key: 'mobile' },
|
|
{ option: 'Desktop Application', key: 'desktop' },
|
|
{ option: 'API Service', key: 'api' }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-input-dropdown
|
|
.label=${'Development Framework'}
|
|
.key=${'framework'}
|
|
.required=${true}
|
|
.options=${[
|
|
{ option: 'React', key: 'react', payload: { type: 'web' } },
|
|
{ option: 'Vue.js', key: 'vue', payload: { type: 'web' } },
|
|
{ option: 'Angular', key: 'angular', payload: { type: 'web' } },
|
|
{ option: 'React Native', key: 'react-native', payload: { type: 'mobile' } },
|
|
{ option: 'Flutter', key: 'flutter', payload: { type: 'mobile' } },
|
|
{ option: 'Electron', key: 'electron', payload: { type: 'desktop' } }
|
|
]}
|
|
></dees-input-dropdown>
|
|
|
|
<dees-form-submit .text=${'Create Project'}></dees-form-submit>
|
|
</dees-form>
|
|
</dees-panel>
|
|
</dees-demowrapper>
|
|
</div>
|
|
` |