307 lines
10 KiB
TypeScript
307 lines
10 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import './dees-panel.js';
|
|
import type { DeesInputCheckbox } from './dees-input-checkbox.js';
|
|
import './dees-button.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Get all checkboxes for demo interactions
|
|
const checkboxes = elementArg.querySelectorAll('dees-input-checkbox');
|
|
|
|
// Example of programmatic interaction
|
|
const selectAllBtn = elementArg.querySelector('#select-all-btn');
|
|
const clearAllBtn = elementArg.querySelector('#clear-all-btn');
|
|
|
|
if (selectAllBtn && clearAllBtn) {
|
|
selectAllBtn.addEventListener('click', () => {
|
|
checkboxes.forEach((checkbox: DeesInputCheckbox) => {
|
|
if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
|
|
checkbox.value = true;
|
|
}
|
|
});
|
|
});
|
|
|
|
clearAllBtn.addEventListener('click', () => {
|
|
checkboxes.forEach((checkbox: DeesInputCheckbox) => {
|
|
if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
|
|
checkbox.value = false;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}}>
|
|
<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;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.horizontal-checkboxes {
|
|
display: flex;
|
|
gap: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.interactive-section {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.output-text {
|
|
font-family: monospace;
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
|
|
padding: 8px;
|
|
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
|
|
border-radius: 4px;
|
|
min-height: 24px;
|
|
}
|
|
|
|
.form-section {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.feature-list {
|
|
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
|
border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 16px;
|
|
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
|
|
<div class="checkbox-group">
|
|
<dees-input-checkbox
|
|
.label=${'I agree to the Terms and Conditions'}
|
|
.value=${true}
|
|
.key=${'terms'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Subscribe to newsletter'}
|
|
.value=${false}
|
|
.key=${'newsletter'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Enable notifications'}
|
|
.value=${false}
|
|
.description=${'Receive email updates about your account'}
|
|
.key=${'notifications'}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
|
|
<div class="checkbox-group">
|
|
<dees-input-checkbox
|
|
.label=${'Default state'}
|
|
.value=${false}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Checked state'}
|
|
.value=${true}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Disabled unchecked'}
|
|
.value=${false}
|
|
.disabled=${true}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Disabled checked'}
|
|
.value=${true}
|
|
.disabled=${true}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Required checkbox'}
|
|
.required=${true}
|
|
.key=${'required'}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
|
|
<div class="horizontal-checkboxes">
|
|
<dees-input-checkbox
|
|
.label=${'Option A'}
|
|
.value=${false}
|
|
.layoutMode=${'horizontal'}
|
|
.key=${'optionA'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Option B'}
|
|
.value=${true}
|
|
.layoutMode=${'horizontal'}
|
|
.key=${'optionB'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Option C'}
|
|
.value=${false}
|
|
.layoutMode=${'horizontal'}
|
|
.key=${'optionC'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Option D'}
|
|
.value=${true}
|
|
.layoutMode=${'horizontal'}
|
|
.key=${'optionD'}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
|
|
<div class="button-group">
|
|
<dees-button id="select-all-btn" type="secondary">Select All</dees-button>
|
|
<dees-button id="clear-all-btn" type="secondary">Clear All</dees-button>
|
|
</div>
|
|
|
|
<div class="feature-list">
|
|
<div class="checkbox-group">
|
|
<dees-input-checkbox
|
|
.label=${'Dark Mode Support'}
|
|
.value=${true}
|
|
.key=${'feature1'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Email Notifications'}
|
|
.value=${true}
|
|
.key=${'feature2'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Two-Factor Authentication'}
|
|
.value=${false}
|
|
.key=${'feature3'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'API Access'}
|
|
.value=${true}
|
|
.key=${'feature4'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Advanced Analytics'}
|
|
.value=${false}
|
|
.key=${'feature5'}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
|
|
<div class="form-section">
|
|
<h4 class="section-title">Privacy Preferences</h4>
|
|
|
|
<div class="checkbox-group">
|
|
<dees-input-checkbox
|
|
.label=${'Share analytics data'}
|
|
.value=${true}
|
|
.description=${'Help us improve by sharing anonymous usage data'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Personalized recommendations'}
|
|
.value=${true}
|
|
.description=${'Get suggestions based on your activity'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Marketing communications'}
|
|
.value=${false}
|
|
.description=${'Receive promotional emails and special offers'}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Third-party integrations'}
|
|
.value=${false}
|
|
.description=${'Allow approved partners to access your data'}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
|
|
<div class="checkbox-group">
|
|
<dees-input-checkbox
|
|
.label=${'Feature toggle'}
|
|
.value=${false}
|
|
@changeSubject=${(event: CustomEvent) => {
|
|
const output = document.querySelector('#checkbox-output');
|
|
if (output && event.detail) {
|
|
const isChecked = event.detail.getValue();
|
|
output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
|
|
}
|
|
}}
|
|
></dees-input-checkbox>
|
|
|
|
<dees-input-checkbox
|
|
.label=${'Debug mode'}
|
|
.value=${false}
|
|
@changeSubject=${(event: CustomEvent) => {
|
|
const output = document.querySelector('#debug-output');
|
|
if (output && event.detail) {
|
|
const isChecked = event.detail.getValue();
|
|
output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
|
|
}
|
|
}}
|
|
></dees-input-checkbox>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<div id="checkbox-output" class="output-text">Feature is disabled</div>
|
|
<div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`; |