juxscript 1.0.19 → 1.0.21

package/lib/components/switch.ts

@@ -1,261 +1,331 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
 
-/**
- * Switch component options
- */
 export interface SwitchOptions {
-    label?: string;
     checked?: boolean;
+    label?: string;
+    required?: boolean;
     disabled?: boolean;
     name?: string;
-    onChange?: (checked: boolean) => void;
+    value?: string;
     style?: string;
     class?: string;
+    onValidate?: (checked: boolean) => boolean | string;
 }
 
-/**
- * Switch component state
- */
-type SwitchState = {
-    label: string;
+interface SwitchState extends FormInputState {
     checked: boolean;
-    disabled: boolean;
-    name: string;
-    style: string;
-    class: string;
-};
-
-/**
- * Switch component - Toggle switch for boolean values
- * 
- * Usage:
- *   jux.switch('notifications', {
- *     label: 'Enable notifications',
- *     checked: true,
- *     onChange: (checked) => console.log(checked)
- *   }).render('#settings');
- * 
- *   // Two-way binding
- *   const notificationsState = state(true);
- *   jux.switch('notifications').label('Notifications').bind(notificationsState).render('#settings');
- */
-export class Switch {
-    state: SwitchState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _onChange?: (checked: boolean) => void;
-    private _boundState?: State<boolean>;
+    value: string;
+}
 
+export class Switch extends FormInput<SwitchState> {
     constructor(id: string, options: SwitchOptions = {}) {
-        this._id = id;
-        this.id = id;
-        this._onChange = options.onChange;
-
-        this.state = {
-            label: options.label ?? '',
+        super(id, {
             checked: options.checked ?? false,
+            value: options.value ?? 'on',
+            label: options.label ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
             name: options.name ?? id,
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
-    }
-
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
 
-    label(value: string): this {
-        this.state.label = value;
-        return this;
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
     }
 
-    checked(value: boolean): this {
-        this.state.checked = value;
-        this._updateElement();
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        this._updateElement();
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    name(value: string): this {
-        this.state.name = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+    checked(value: boolean): this {
+        return this.setValue(value);
     }
 
-    onChange(handler: (checked: boolean) => void): this {
-        this._onChange = handler;
+    value(value: string): this {
+        this.state.value = value;
         return this;
     }
 
-    /**
-     * Two-way binding to state
-     */
-    bind(stateObj: State<boolean>): this {
-        this._boundState = stateObj;
+    toggle(): this {
+        return this.setValue(!this.state.checked);
+    }
 
-        // Update switch when state changes
-        stateObj.subscribe((val) => {
-            this.state.checked = val;
-            this._updateElement();
-        });
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-        // Update state when switch changes
-        this.onChange((checked) => stateObj.set(checked));
+    getValue(): boolean {
+        return this.state.checked;
+    }
 
+    setValue(value: boolean): this {
+        this.state.checked = value;
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).checked = value;
+        }
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    protected _validateValue(checked: boolean): boolean | string {
+        const { required } = this.state;
 
-    private _updateElement(): void {
-        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
-        const track = document.getElementById(`${this._id}-track`);
-
-        if (input) {
-            input.checked = this.state.checked;
-            input.disabled = this.state.disabled;
+        if (required && !checked) {
+            return 'This field must be enabled';
         }
 
-        if (track) {
-            if (this.state.checked) {
-                track.classList.add('jux-switch-track-checked');
-            } else {
-                track.classList.remove('jux-switch-track-checked');
+        if (this._onValidate) {
+            const result = this._onValidate(checked);
+            if (result !== true) {
+                return result || 'Invalid value';
             }
         }
-    }
 
-    /**
-     * Toggle the switch
-     */
-    toggle(): this {
-        this.state.checked = !this.state.checked;
-        this._updateElement();
-        if (this._onChange) {
-            this._onChange(this.state.checked);
-        }
-        return this;
+        return true;
     }
 
-    isChecked(): boolean {
-        return this.state.checked;
+    protected _buildInputElement(): HTMLElement {
+        const { checked, value, required, disabled, name } = this.state;
+
+        const input = document.createElement('input');
+        input.type = 'checkbox';
+        input.className = 'jux-switch-input';
+        input.id = `${this._id}-input`;
+        input.name = name;
+        input.value = value;
+        input.checked = checked;
+        input.required = required;
+        input.disabled = disabled;
+
+        return input;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Switch: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { label, checked, disabled, name, style, class: className } = this.state;
+        const { style, class: className } = this.state;
 
+        // Build wrapper
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-switch';
         wrapper.id = this._id;
-
-        if (className) {
-            wrapper.className += ` ${className}`;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Switch container
+        const switchContainer = document.createElement('label');
+        switchContainer.className = 'jux-switch-container';
+        switchContainer.htmlFor = `${this._id}-input`;
+
+        // Input element
+        const inputEl = this._buildInputElement() as HTMLInputElement;
+        this._inputElement = inputEl;
+        switchContainer.appendChild(inputEl);
+
+        // Toggle slider
+        const slider = document.createElement('span');
+        slider.className = 'jux-switch-slider';
+        switchContainer.appendChild(slider);
+
+        // Label text
+        if (this.state.label) {
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-switch-label-text';
+            labelText.textContent = this.state.label;
+            if (this.state.required) {
+                const requiredSpan = document.createElement('span');
+                requiredSpan.className = 'jux-input-required';
+                requiredSpan.textContent = ' *';
+                labelText.appendChild(requiredSpan);
+            }
+            switchContainer.appendChild(labelText);
         }
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
+        wrapper.appendChild(switchContainer);
 
-        const labelEl = document.createElement('label');
-        labelEl.className = 'jux-switch-label';
+        // Error element
+        wrapper.appendChild(this._renderError());
 
-        const input = document.createElement('input');
-        input.type = 'checkbox';
-        input.className = 'jux-switch-input';
-        input.id = `${this._id}-input`;
-        input.name = name;
-        input.checked = checked;
-        input.disabled = disabled;
-        input.setAttribute('role', 'switch');
-
-        input.addEventListener('change', (e) => {
-            const target = e.target as HTMLInputElement;
-            this.state.checked = target.checked;
-
-            const track = document.getElementById(`${this._id}-track`);
-            if (track) {
-                if (target.checked) {
-                    track.classList.add('jux-switch-track-checked');
-                } else {
-                    track.classList.remove('jux-switch-track-checked');
-                }
-            }
+        // Wire events
+        this._wireStandardEvents(wrapper);
 
-            if (this._onChange) {
-                this._onChange(target.checked);
-            }
-        });
+        // Wire switch-specific sync (maps 'checked' to 'value' property for consistency)
+        const valueSync = this._syncBindings.find(b => b.property === 'value' || b.property === 'checked');
 
-        const track = document.createElement('span');
-        track.className = 'jux-switch-track';
-        track.id = `${this._id}-track`;
-        if (checked) {
-            track.classList.add('jux-switch-track-checked');
-        }
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            const transformToState = toState || ((v: boolean) => v);
+            const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
+            });
+
+            // Component → State
+            inputEl.addEventListener('change', () => {
+                if (isUpdating) return;
+                isUpdating = true;
+
+                const checked = inputEl.checked;
+                this.state.checked = checked;
+                this._clearError();
 
-        const thumb = document.createElement('span');
-        thumb.className = 'jux-switch-thumb';
+                const transformed = transformToState(checked);
+                stateObj.set(transformed);
 
-        track.appendChild(thumb);
-        labelEl.appendChild(input);
-        labelEl.appendChild(track);
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', checked);
 
-        if (label) {
-            const span = document.createElement('span');
-            span.className = 'jux-switch-text';
-            span.textContent = label;
-            labelEl.appendChild(span);
+                setTimeout(() => { isUpdating = false; }, 0);
+            });
+        } else {
+            // Default behavior without sync
+            inputEl.addEventListener('change', () => {
+                this.state.checked = inputEl.checked;
+                this._clearError();
+
+                // 🎯 Fire the change callback event
+                this._triggerCallback('change', inputEl.checked);
+            });
+        }
+
+        // Always add blur validation
+        inputEl.addEventListener('blur', () => {
+            this.validate();
+        });
+
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v: any) => String(v));
+            labelSync.stateObj.subscribe((val: any) => {
+                this.label(transform(val));
+            });
         }
 
-        wrapper.appendChild(labelEl);
         container.appendChild(wrapper);
+        this._injectSwitchStyles();
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Switch.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectSwitchStyles(): void {
+        const styleId = 'jux-switch-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-switch {
+        margin-bottom: 12px;
+      }
+
+      .jux-switch-container {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+      }
+
+      .jux-switch-input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+      }
+
+      .jux-switch-slider {
+        position: relative;
+        width: 48px;
+        height: 24px;
+        background-color: #d1d5db;
+        border-radius: 24px;
+        transition: background-color 0.3s;
+        margin-right: 8px;
+      }
+
+      .jux-switch-slider::before {
+        content: '';
+        position: absolute;
+        height: 18px;
+        width: 18px;
+        left: 3px;
+        top: 3px;
+        background-color: white;
+        border-radius: 50%;
+        transition: transform 0.3s;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .jux-switch-input:checked ~ .jux-switch-slider {
+        background-color: #3b82f6;
+      }
+
+      .jux-switch-input:checked ~ .jux-switch-slider::before {
+        transform: translateX(24px);
+      }
+
+      .jux-switch-input:disabled ~ .jux-switch-slider {
+        background-color: #f3f4f6;
+        cursor: not-allowed;
+      }
+
+      .jux-switch-input:disabled ~ .jux-switch-label-text {
+        color: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .jux-switch-input:focus ~ .jux-switch-slider {
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      .jux-switch-input.jux-input-invalid ~ .jux-switch-slider {
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+      }
+
+      .jux-switch-label-text {
+        font-size: 14px;
+        color: #374151;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 
 export function switchComponent(id: string, options: SwitchOptions = {}): Switch {
     return new Switch(id, options);
-}
+}
+