feat(structure): adjust
This commit is contained in:
@@ -0,0 +1,200 @@
|
||||
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>
|
||||
`;
|
||||
357
ts_web/elements/dees-input-radiogroup/dees-input-radiogroup.ts
Normal file
357
ts_web/elements/dees-input-radiogroup/dees-input-radiogroup.ts
Normal file
@@ -0,0 +1,357 @@
|
||||
import {
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
property,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
import { DeesInputBase } from './dees-input-base.js';
|
||||
import { demoFunc } from './dees-input-radiogroup.demo.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'dees-input-radiogroup': DeesInputRadiogroup;
|
||||
}
|
||||
}
|
||||
|
||||
type RadioOption = string | { option: string; key: string; payload?: any };
|
||||
|
||||
@customElement('dees-input-radiogroup')
|
||||
export class DeesInputRadiogroup extends DeesInputBase<string | object> {
|
||||
public static demo = demoFunc;
|
||||
|
||||
// INSTANCE
|
||||
|
||||
@property({ type: Array })
|
||||
accessor options: RadioOption[] = [];
|
||||
|
||||
@property()
|
||||
accessor selectedOption: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
accessor direction: 'vertical' | 'horizontal' = 'vertical';
|
||||
|
||||
@property({ type: String, reflect: true })
|
||||
accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
|
||||
|
||||
// Form compatibility
|
||||
public get value() {
|
||||
const option = this.getOptionByKey(this.selectedOption);
|
||||
if (typeof option === 'object' && option.payload !== undefined) {
|
||||
return option.payload;
|
||||
}
|
||||
return this.selectedOption;
|
||||
}
|
||||
|
||||
public set value(val: string | any) {
|
||||
if (typeof val === 'string') {
|
||||
this.selectedOption = val;
|
||||
} else {
|
||||
// Try to find option by payload
|
||||
const option = this.options.find(opt =>
|
||||
typeof opt === 'object' && opt.payload === val
|
||||
);
|
||||
if (option && typeof option === 'object') {
|
||||
this.selectedOption = option.key;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
...DeesInputBase.baseStyles,
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.maincontainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.maincontainer.horizontal {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.maincontainer.horizontal .radio-option {
|
||||
padding: 6px 20px 6px 0;
|
||||
}
|
||||
|
||||
.radio-option:hover .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
|
||||
background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
|
||||
}
|
||||
|
||||
.radio-option:hover .radio-label {
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
}
|
||||
|
||||
.radio-circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 30% 6.8%)')};
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.radio-option.selected .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
}
|
||||
|
||||
.radio-option.selected .radio-circle::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 30% 6.8%)')};
|
||||
transform: scale(0);
|
||||
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.radio-option.selected .radio-circle::after {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.radio-circle:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 30% 3.9%)')},
|
||||
0 0 0 4px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
|
||||
transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
letter-spacing: -0.006em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.radio-option.selected .radio-label {
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
}
|
||||
|
||||
:host([disabled]) .radio-option {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
:host([disabled]) .radio-option:hover .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 30% 6.8%)')};
|
||||
}
|
||||
|
||||
:host([disabled]) .radio-option:hover .radio-label {
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(217.9 10.6% 74.9%)')};
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: -0.006em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.description-text {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
|
||||
margin-top: 10px;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.003em;
|
||||
}
|
||||
|
||||
/* Validation styles */
|
||||
:host([validationState="invalid"]) .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
|
||||
}
|
||||
|
||||
:host([validationState="invalid"]) .radio-option.selected .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
|
||||
background: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
|
||||
}
|
||||
|
||||
:host([validationState="valid"]) .radio-option.selected .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
|
||||
background: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
|
||||
}
|
||||
|
||||
:host([validationState="warn"]) .radio-option.selected .radio-circle {
|
||||
border-color: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
|
||||
background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
|
||||
}
|
||||
|
||||
/* Override base grid layout for radiogroup to prevent large gaps */
|
||||
:host([label-position="left"]) .input-wrapper {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
|
||||
:host([label-position="right"]) .input-wrapper {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="input-wrapper">
|
||||
${this.label ? html`<div class="label-text">${this.label}</div>` : ''}
|
||||
<div class="maincontainer ${this.direction}">
|
||||
${this.options.map((option) => {
|
||||
const optionKey = this.getOptionKey(option);
|
||||
const optionLabel = this.getOptionLabel(option);
|
||||
const isSelected = this.selectedOption === optionKey;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="radio-option ${isSelected ? 'selected' : ''}"
|
||||
@click="${() => this.selectOption(optionKey)}"
|
||||
@keydown="${(e: KeyboardEvent) => this.handleKeydown(e, optionKey)}"
|
||||
>
|
||||
<div
|
||||
class="radio-circle"
|
||||
tabindex="${this.disabled ? '-1' : '0'}"
|
||||
role="radio"
|
||||
aria-checked="${isSelected}"
|
||||
aria-label="${optionLabel}"
|
||||
></div>
|
||||
<div class="radio-label">${optionLabel}</div>
|
||||
</div>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private getOptionKey(option: RadioOption): string {
|
||||
if (typeof option === 'string') {
|
||||
return option;
|
||||
}
|
||||
return option.key;
|
||||
}
|
||||
|
||||
private getOptionLabel(option: RadioOption): string {
|
||||
if (typeof option === 'string') {
|
||||
return option;
|
||||
}
|
||||
return option.option;
|
||||
}
|
||||
|
||||
private getOptionByKey(key: string): RadioOption | undefined {
|
||||
return this.options.find(opt => this.getOptionKey(opt) === key);
|
||||
}
|
||||
|
||||
private selectOption(key: string): void {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const oldValue = this.selectedOption;
|
||||
this.selectedOption = key;
|
||||
|
||||
if (oldValue !== key) {
|
||||
this.dispatchEvent(new CustomEvent('change', {
|
||||
detail: { value: this.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
|
||||
this.dispatchEvent(new CustomEvent('input', {
|
||||
detail: { value: this.value },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
|
||||
this.changeSubject.next(this);
|
||||
}
|
||||
}
|
||||
|
||||
public getValue(): string | any {
|
||||
return this.value;
|
||||
}
|
||||
|
||||
public setValue(val: string | any): void {
|
||||
this.value = val;
|
||||
}
|
||||
|
||||
public async validate(): Promise<boolean> {
|
||||
if (this.required && !this.selectedOption) {
|
||||
this.validationState = 'invalid';
|
||||
return false;
|
||||
}
|
||||
|
||||
this.validationState = 'valid';
|
||||
return true;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
// Auto-select first option if none selected and not required
|
||||
if (!this.selectedOption && this.options.length > 0 && !this.required) {
|
||||
const firstOption = this.options[0];
|
||||
this.selectedOption = this.getOptionKey(firstOption);
|
||||
}
|
||||
}
|
||||
|
||||
private handleKeydown(event: KeyboardEvent, optionKey: string) {
|
||||
if (this.disabled) return;
|
||||
|
||||
if (event.key === ' ' || event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
this.selectOption(optionKey);
|
||||
} else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
|
||||
event.preventDefault();
|
||||
this.focusNextOption();
|
||||
} else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
|
||||
event.preventDefault();
|
||||
this.focusPreviousOption();
|
||||
}
|
||||
}
|
||||
|
||||
private focusNextOption() {
|
||||
const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
|
||||
const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
|
||||
const nextIndex = (currentIndex + 1) % radioCircles.length;
|
||||
(radioCircles[nextIndex] as HTMLElement).focus();
|
||||
}
|
||||
|
||||
private focusPreviousOption() {
|
||||
const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
|
||||
const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
|
||||
const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
|
||||
(radioCircles[prevIndex] as HTMLElement).focus();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user