277 lines
9.2 KiB
TypeScript
277 lines
9.2 KiB
TypeScript
|
import { html, css } from '@design.estate/dees-element';
|
||
|
|
import '@design.estate/dees-wcctools/demotools';
|
||
|
|
import type { DeesInputRadio } from './dees-input-radio.js';
|
||
|
|
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
||
|
|
// Implement radio group behavior
|
||
|
|
const radioGroups = new Map<string, DeesInputRadio[]>();
|
||
|
|
|
||
|
|
// Group radios by their container
|
||
|
|
const radioContainers = elementArg.querySelectorAll('.radio-group');
|
||
|
|
radioContainers.forEach((container) => {
|
||
|
|
const radios = Array.from(container.querySelectorAll('dees-input-radio')) as DeesInputRadio[];
|
||
|
|
const groupName = container.getAttribute('data-group') || 'default';
|
||
|
|
radioGroups.set(groupName, radios);
|
||
|
|
|
||
|
|
// Add click handlers for radio group behavior
|
||
|
|
radios.forEach((radio) => {
|
||
|
|
radio.addEventListener('click', () => {
|
||
|
|
if (!radio.disabled && !radio.value) {
|
||
|
|
// Uncheck all other radios in the group
|
||
|
|
radios.forEach((r) => {
|
||
|
|
if (r !== radio) {
|
||
|
|
r.value = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
radio.value = true;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}}>
|
||
|
|
<style>
|
||
|
|
${css`
|
||
|
|
.demo-container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 24px;
|
||
|
|
padding: 24px;
|
||
|
|
max-width: 1200px;
|
||
|
|
margin: 0 auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section {
|
||
|
|
background: #f8f9fa;
|
||
|
|
border-radius: 8px;
|
||
|
|
padding: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.demo-section {
|
||
|
|
background: #1a1a1a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section h3 {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: #0069f2;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.demo-section p {
|
||
|
|
margin-top: 0;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: #666;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.demo-section p {
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.horizontal-group {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 16px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-group {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 16px;
|
||
|
|
background: #f0f0f0;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.radio-group {
|
||
|
|
background: #0a0a0a;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio-group-title {
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.radio-group-title {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-layout {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
|
|
gap: 24px;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Basic Radio Groups</h3>
|
||
|
|
<p>Radio buttons for single-choice selections</p>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="plan">
|
||
|
|
<div class="radio-group-title">Select your subscription plan:</div>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Basic Plan - $9/month'}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'plan-basic'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Pro Plan - $29/month'}
|
||
|
|
.key=${'plan-pro'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Enterprise Plan - $99/month'}
|
||
|
|
.key=${'plan-enterprise'}
|
||
|
|
></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="priority">
|
||
|
|
<div class="radio-group-title">Task Priority:</div>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'High Priority'}
|
||
|
|
.key=${'priority-high'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Medium Priority'}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'priority-medium'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Low Priority'}
|
||
|
|
.key=${'priority-low'}
|
||
|
|
></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Horizontal Layout</h3>
|
||
|
|
<p>Radio buttons arranged horizontally for yes/no questions</p>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="agreement" style="flex-direction: row;">
|
||
|
|
<div style="margin-right: 16px;">Do you agree?</div>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Yes'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'agree-yes'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'No'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.key=${'agree-no'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Maybe'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.key=${'agree-maybe'}
|
||
|
|
></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="experience" style="flex-direction: row;">
|
||
|
|
<div style="margin-right: 16px;">Experience Level:</div>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Beginner'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.key=${'exp-beginner'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Intermediate'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'exp-intermediate'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Expert'}
|
||
|
|
.layoutMode=${'horizontal'}
|
||
|
|
.key=${'exp-expert'}
|
||
|
|
></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Survey Example</h3>
|
||
|
|
<p>Multiple radio groups in a survey format</p>
|
||
|
|
|
||
|
|
<div class="grid-layout">
|
||
|
|
<div class="radio-group" data-group="satisfaction">
|
||
|
|
<div class="radio-group-title">How satisfied are you?</div>
|
||
|
|
<dees-input-radio .label=${'Very Satisfied'} .key=${'sat-very'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Satisfied'} .value=${true} .key=${'sat-normal'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Neutral'} .key=${'sat-neutral'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Dissatisfied'} .key=${'sat-dis'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Very Dissatisfied'} .key=${'sat-verydis'}></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="recommend">
|
||
|
|
<div class="radio-group-title">Would you recommend us?</div>
|
||
|
|
<dees-input-radio .label=${'Definitely'} .key=${'rec-def'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Probably'} .value=${true} .key=${'rec-prob'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Not Sure'} .key=${'rec-unsure'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Probably Not'} .key=${'rec-probnot'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Definitely Not'} .key=${'rec-defnot'}></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>States</h3>
|
||
|
|
<p>Different radio button states</p>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="states">
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Normal Radio'}
|
||
|
|
.key=${'state-normal'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Selected Radio'}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'state-selected'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Disabled Unchecked'}
|
||
|
|
.disabled=${true}
|
||
|
|
.key=${'state-disabled1'}
|
||
|
|
></dees-input-radio>
|
||
|
|
<dees-input-radio
|
||
|
|
.label=${'Disabled Checked'}
|
||
|
|
.disabled=${true}
|
||
|
|
.value=${true}
|
||
|
|
.key=${'state-disabled2'}
|
||
|
|
></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Settings Example</h3>
|
||
|
|
<p>Common radio button patterns in settings</p>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="theme">
|
||
|
|
<div class="radio-group-title">Theme Preference:</div>
|
||
|
|
<dees-input-radio .label=${'Light Theme'} .key=${'theme-light'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Dark Theme'} .value=${true} .key=${'theme-dark'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'System Default'} .key=${'theme-system'}></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="radio-group" data-group="notifications">
|
||
|
|
<div class="radio-group-title">Notification Frequency:</div>
|
||
|
|
<dees-input-radio .label=${'All Notifications'} .key=${'notif-all'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'Important Only'} .value=${true} .key=${'notif-important'}></dees-input-radio>
|
||
|
|
<dees-input-radio .label=${'None'} .key=${'notif-none'}></dees-input-radio>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</dees-demowrapper>
|
||
|
|
`;
|