200 lines
7.5 KiB
TypeScript
200 lines
7.5 KiB
TypeScript
|
import { html, css } from '@design.estate/dees-element';
|
||
|
|
import '@design.estate/dees-wcctools/demotools';
|
||
|
|
import './dees-panel.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.result-display {
|
||
|
|
margin-top: 16px;
|
||
|
|
padding: 12px;
|
||
|
|
background: rgba(0, 105, 242, 0.1);
|
||
|
|
border-radius: 4px;
|
||
|
|
font-family: monospace;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<dees-panel .title=${'1. Basic Radio Groups'} .subtitle=${'Simple string options for common use cases'}>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Subscription Plan'}
|
||
|
|
.options=${['Basic - $9/month', 'Pro - $29/month', 'Enterprise - $99/month']}
|
||
|
|
.selectedOption=${'Pro - $29/month'}
|
||
|
|
.description=${'Choose your subscription tier'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Priority Level'}
|
||
|
|
.options=${['High', 'Medium', 'Low']}
|
||
|
|
.selectedOption=${'Medium'}
|
||
|
|
.required=${true}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
</div>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Do you agree with the terms?'}
|
||
|
|
.options=${['Yes', 'No', 'Maybe']}
|
||
|
|
.direction=${'horizontal'}
|
||
|
|
.selectedOption=${'Yes'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Experience Level'}
|
||
|
|
.options=${['Beginner', 'Intermediate', 'Expert']}
|
||
|
|
.direction=${'horizontal'}
|
||
|
|
.selectedOption=${'Intermediate'}
|
||
|
|
.description=${'Select your experience level with web development'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
|
||
|
|
<dees-input-radiogroup
|
||
|
|
id="advanced-radio"
|
||
|
|
.label=${'Select Region'}
|
||
|
|
.options=${[
|
||
|
|
{ option: 'United States (US East)', key: 'us-east', payload: { region: 'us-east-1', latency: 20 } },
|
||
|
|
{ option: 'Europe (Frankfurt)', key: 'eu-central', payload: { region: 'eu-central-1', latency: 50 } },
|
||
|
|
{ option: 'Asia Pacific (Singapore)', key: 'ap-southeast', payload: { region: 'ap-southeast-1', latency: 120 } }
|
||
|
|
]}
|
||
|
|
.selectedOption=${'eu-central'}
|
||
|
|
.description=${'Choose the closest region for optimal performance'}
|
||
|
|
@change=${(e: CustomEvent) => {
|
||
|
|
const display = document.querySelector('#region-result');
|
||
|
|
if (display) {
|
||
|
|
display.textContent = 'Selected: ' + JSON.stringify(e.detail.value, null, 2);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
<div id="region-result" class="result-display">Selected: { "region": "eu-central-1", "latency": 50 }</div>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'4. Survey Example'} .subtitle=${'Multiple radio groups for surveys and forms'}>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'How satisfied are you?'}
|
||
|
|
.options=${['Very Satisfied', 'Satisfied', 'Neutral', 'Dissatisfied', 'Very Dissatisfied']}
|
||
|
|
.selectedOption=${'Satisfied'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Would you recommend us?'}
|
||
|
|
.options=${['Definitely', 'Probably', 'Not Sure', 'Probably Not', 'Definitely Not']}
|
||
|
|
.selectedOption=${'Probably'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
</div>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'5. States & Validation'} .subtitle=${'Different states and validation examples'}>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Required Selection'}
|
||
|
|
.options=${['Option A', 'Option B', 'Option C']}
|
||
|
|
.required=${true}
|
||
|
|
.description=${'This field is required'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Disabled State'}
|
||
|
|
.options=${['Disabled Option 1', 'Disabled Option 2', 'Disabled Option 3']}
|
||
|
|
.selectedOption=${'Disabled Option 2'}
|
||
|
|
.disabled=${true}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
</div>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Theme Preference'}
|
||
|
|
.options=${[
|
||
|
|
{ option: 'Light Theme', key: 'light', payload: 'light' },
|
||
|
|
{ option: 'Dark Theme', key: 'dark', payload: 'dark' },
|
||
|
|
{ option: 'System Default', key: 'system', payload: 'auto' }
|
||
|
|
]}
|
||
|
|
.selectedOption=${'dark'}
|
||
|
|
.description=${'Choose how the application should appear'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Notification Frequency'}
|
||
|
|
.options=${['All Notifications', 'Important Only', 'None']}
|
||
|
|
.selectedOption=${'Important Only'}
|
||
|
|
.description=${'Control how often you receive notifications'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Language'}
|
||
|
|
.options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
|
||
|
|
.selectedOption=${'English'}
|
||
|
|
.direction=${'horizontal'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
</dees-panel>
|
||
|
|
|
||
|
|
<dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>
|
||
|
|
<dees-form>
|
||
|
|
<dees-input-text
|
||
|
|
.label=${'Product Name'}
|
||
|
|
.required=${true}
|
||
|
|
.key=${'productName'}
|
||
|
|
></dees-input-text>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Product Category'}
|
||
|
|
.options=${['Electronics', 'Clothing', 'Books', 'Home & Garden', 'Sports']}
|
||
|
|
.required=${true}
|
||
|
|
.key=${'category'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Condition'}
|
||
|
|
.options=${['New', 'Like New', 'Good', 'Fair', 'Poor']}
|
||
|
|
.direction=${'horizontal'}
|
||
|
|
.key=${'condition'}
|
||
|
|
.selectedOption=${'New'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-input-radiogroup
|
||
|
|
.label=${'Shipping Speed'}
|
||
|
|
.options=${[
|
||
|
|
{ option: 'Standard (5-7 days)', key: 'standard', payload: { days: 7, price: 0 } },
|
||
|
|
{ option: 'Express (2-3 days)', key: 'express', payload: { days: 3, price: 10 } },
|
||
|
|
{ option: 'Overnight', key: 'overnight', payload: { days: 1, price: 25 } }
|
||
|
|
]}
|
||
|
|
.selectedOption=${'standard'}
|
||
|
|
.key=${'shipping'}
|
||
|
|
></dees-input-radiogroup>
|
||
|
|
|
||
|
|
<dees-form-submit .text=${'Submit Product'}></dees-form-submit>
|
||
|
|
</dees-form>
|
||
|
|
</dees-panel>
|
||
|
|
</div>
|
||
|
|
</dees-demowrapper>
|
||
|
|
`;
|