311 lines
9.6 KiB
TypeScript
311 lines
9.6 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import '../../dees-panel/dees-panel.js';
|
|
import type { DeesInputToggle } from './dees-input-toggle.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
|
|
// Example of programmatic interaction
|
|
const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
|
|
const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
|
|
const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
|
|
|
|
if (toggleAllOnBtn && toggleAllOffBtn) {
|
|
toggleAllOnBtn.addEventListener('click', () => {
|
|
featureToggles.forEach((toggle: DeesInputToggle) => {
|
|
if (!toggle.disabled && !toggle.required) {
|
|
toggle.value = true;
|
|
}
|
|
});
|
|
});
|
|
|
|
toggleAllOffBtn.addEventListener('click', () => {
|
|
featureToggles.forEach((toggle: DeesInputToggle) => {
|
|
if (!toggle.disabled && !toggle.required) {
|
|
toggle.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;
|
|
}
|
|
|
|
.toggle-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.horizontal-toggles {
|
|
display: flex;
|
|
gap: 32px;
|
|
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;
|
|
}
|
|
|
|
.settings-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;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.feature-toggles {
|
|
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%)')};
|
|
}
|
|
|
|
.drag-hint {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
|
|
margin-top: 8px;
|
|
font-style: italic;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<div class="demo-container">
|
|
<dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
|
|
<div class="toggle-group">
|
|
<dees-input-toggle
|
|
.label=${'Enable feature'}
|
|
.value=${false}
|
|
.key=${'basic'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Active toggle'}
|
|
.value=${true}
|
|
.key=${'active'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'With description'}
|
|
.value=${false}
|
|
.description=${'This toggle has additional helper text explaining its purpose'}
|
|
.key=${'withDesc'}
|
|
></dees-input-toggle>
|
|
</div>
|
|
<p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
|
|
<div class="toggle-group">
|
|
<dees-input-toggle
|
|
.label=${'Default (off)'}
|
|
.value=${false}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Enabled (on)'}
|
|
.value=${true}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Disabled (off)'}
|
|
.value=${false}
|
|
.disabled=${true}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Disabled (on)'}
|
|
.value=${true}
|
|
.disabled=${true}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Required (always on)'}
|
|
.value=${true}
|
|
.required=${true}
|
|
.description=${'This toggle cannot be turned off'}
|
|
></dees-input-toggle>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
|
|
<div class="horizontal-toggles">
|
|
<dees-input-toggle
|
|
.label=${'WiFi'}
|
|
.value=${true}
|
|
.layoutMode=${'horizontal'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Bluetooth'}
|
|
.value=${false}
|
|
.layoutMode=${'horizontal'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'GPS'}
|
|
.value=${true}
|
|
.layoutMode=${'horizontal'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'NFC'}
|
|
.value=${false}
|
|
.layoutMode=${'horizontal'}
|
|
></dees-input-toggle>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
|
|
<div class="settings-section">
|
|
<h4 class="section-title">Notification Settings</h4>
|
|
|
|
<div class="toggle-group">
|
|
<dees-input-toggle
|
|
.label=${'Push notifications'}
|
|
.value=${true}
|
|
.description=${'Receive push notifications on your device'}
|
|
.key=${'push'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Email notifications'}
|
|
.value=${true}
|
|
.description=${'Get important updates via email'}
|
|
.key=${'email'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Sound'}
|
|
.value=${false}
|
|
.description=${'Play a sound for notifications'}
|
|
.key=${'sound'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Vibration'}
|
|
.value=${true}
|
|
.description=${'Vibrate for notifications'}
|
|
.key=${'vibration'}
|
|
></dees-input-toggle>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
|
|
<div class="button-group">
|
|
<dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
|
|
<dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
|
|
</div>
|
|
|
|
<div class="feature-toggles">
|
|
<div class="toggle-group">
|
|
<dees-input-toggle
|
|
.label=${'Dark Mode'}
|
|
.value=${true}
|
|
.key=${'darkMode'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Auto-save'}
|
|
.value=${true}
|
|
.key=${'autoSave'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Spell check'}
|
|
.value=${false}
|
|
.key=${'spellCheck'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Developer mode'}
|
|
.value=${false}
|
|
.key=${'devMode'}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Beta features'}
|
|
.value=${false}
|
|
.key=${'beta'}
|
|
></dees-input-toggle>
|
|
</div>
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
|
|
<div class="toggle-group">
|
|
<dees-input-toggle
|
|
.label=${'Airplane mode'}
|
|
.value=${false}
|
|
@newValue=${(event: CustomEvent) => {
|
|
const output = document.querySelector('#airplane-output');
|
|
if (output) {
|
|
output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
|
|
}
|
|
}}
|
|
></dees-input-toggle>
|
|
|
|
<dees-input-toggle
|
|
.label=${'Do not disturb'}
|
|
.value=${false}
|
|
@newValue=${(event: CustomEvent) => {
|
|
const output = document.querySelector('#dnd-output');
|
|
if (output) {
|
|
output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
|
|
}
|
|
}}
|
|
></dees-input-toggle>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<div id="airplane-output" class="output-text">Airplane mode: OFF</div>
|
|
<div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
|
|
</div>
|
|
</dees-panel>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|