221 lines
8.0 KiB
TypeScript
221 lines
8.0 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`
|
|
<dees-demowrapper>
|
|
<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-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-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-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-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>
|
|
|
|
<div class="spacer">
|
|
(Spacer to test dropdown positioning)
|
|
</div>
|
|
|
|
<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-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'] } }
|
|
]}
|
|
@change=${(e: CustomEvent) => {
|
|
const output = document.querySelector('#selection-output');
|
|
if (output && e.detail.value) {
|
|
output.innerHTML = `
|
|
<strong>Selected:</strong> ${e.detail.value.option}<br>
|
|
<strong>Key:</strong> ${e.detail.value.key}<br>
|
|
<strong>Price:</strong> $${e.detail.value.payload?.price || 'N/A'}<br>
|
|
<strong>Features:</strong> ${e.detail.value.payload?.features?.join(', ') || 'N/A'}
|
|
`;
|
|
}
|
|
}}
|
|
></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;">
|
|
<em>Select a product to see details...</em>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<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>
|
|
</div>
|
|
</dees-demowrapper>
|
|
` |