juxscript 1.0.18 → 1.0.20

package/lib/components/switch.ts

@@ -1,63 +1,48 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
 
-/**
- * Switch component options
- */
 export interface SwitchOptions {
-    label?: string;
     checked?: boolean;
-    disabled?: boolean;
+    label?: string;
     name?: string;
-    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
     style?: string;
     class?: string;
 }
 
-/**
- * Switch component state
- */
 type SwitchState = {
-    label: string;
     checked: boolean;
-    disabled: boolean;
+    label: string;
     name: string;
+    disabled: boolean;
     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>;
+
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
 
     constructor(id: string, options: SwitchOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
 
         this.state = {
-            label: options.label ?? '',
             checked: options.checked ?? false,
-            disabled: options.disabled ?? false,
+            label: options.label ?? '',
             name: options.name ?? id,
+            disabled: options.disabled ?? false,
             style: options.style ?? '',
             class: options.class ?? ''
         };
@@ -67,20 +52,14 @@ export class Switch {
      * Fluent API
      * ------------------------- */
 
-    label(value: string): this {
-        this.state.label = value;
-        return this;
-    }
-
     checked(value: boolean): this {
         this.state.checked = value;
         this._updateElement();
         return this;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        this._updateElement();
+    label(value: string): this {
+        this.state.label = value;
         return this;
     }
 
@@ -89,6 +68,12 @@ export class Switch {
         return this;
     }
 
+    disabled(value: boolean): this {
+        this.state.disabled = value;
+        this._updateElement();
+        return this;
+    }
+
     style(value: string): this {
         this.state.style = value;
         return this;
@@ -99,26 +84,28 @@ export class Switch {
         return this;
     }
 
-    onChange(handler: (checked: boolean) => void): this {
-        this._onChange = handler;
+    /**
+     * Bind event handler (stores for wiring in render)
+     * DOM events only: change, click, etc.
+     */
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
     /**
-     * Two-way binding to state
+     * Two-way sync with state (stores for wiring in render)
+     * 
+     * @param property - Component property to sync ('checked', 'label', 'disabled')
+     * @param stateObj - State object to sync with
+     * @param toState - Optional transform function when going from component to state
+     * @param toComponent - Optional transform function when going from state to component
      */
-    bind(stateObj: State<boolean>): this {
-        this._boundState = stateObj;
-
-        // Update switch when state changes
-        stateObj.subscribe((val) => {
-            this.state.checked = val;
-            this._updateElement();
-        });
-
-        // Update state when switch changes
-        this.onChange((checked) => stateObj.set(checked));
-
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Switch.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
@@ -128,69 +115,44 @@ export class Switch {
 
     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 (track) {
-            if (this.state.checked) {
-                track.classList.add('jux-switch-track-checked');
-            } else {
-                track.classList.remove('jux-switch-track-checked');
-            }
-        }
-    }
-
-    /**
-     * Toggle the switch
-     */
-    toggle(): this {
-        this.state.checked = !this.state.checked;
-        this._updateElement();
-        if (this._onChange) {
-            this._onChange(this.state.checked);
-        }
-        return this;
     }
 
-    isChecked(): boolean {
+    getValue(): boolean {
         return this.state.checked;
     }
 
     /* -------------------------
-     * Render
+     * Render (5-Step Pattern)
      * ------------------------- */
 
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Switch: Target element "${targetId}" not found`);
+                throw new Error(`Switch: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { label, checked, disabled, name, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { checked, label, disabled, name, style, class: className } = this.state;
+        const hasCheckedSync = this._syncBindings.some(b => b.property === 'checked');
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-switch';
         wrapper.id = this._id;
-
-        if (className) {
-            wrapper.className += ` ${className}`;
-        }
-
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
         const labelEl = document.createElement('label');
         labelEl.className = 'jux-switch-label';
@@ -202,48 +164,84 @@ export class Switch {
         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');
-                }
-            }
 
-            if (this._onChange) {
-                this._onChange(target.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');
-        }
+        const slider = document.createElement('span');
+        slider.className = 'jux-switch-slider';
 
-        const thumb = document.createElement('span');
-        thumb.className = 'jux-switch-thumb';
+        const text = document.createElement('span');
+        text.className = 'jux-switch-text';
+        text.textContent = label;
 
-        track.appendChild(thumb);
         labelEl.appendChild(input);
-        labelEl.appendChild(track);
+        labelEl.appendChild(slider);
+        if (label) labelEl.appendChild(text);
+        wrapper.appendChild(labelEl);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-        if (label) {
-            const span = document.createElement('span');
-            span.className = 'jux-switch-text';
-            span.textContent = label;
-            labelEl.appendChild(span);
+        // Default behavior (only if NOT using sync)
+        if (!hasCheckedSync) {
+            input.addEventListener('change', () => {
+                this.state.checked = input.checked;
+            });
         }
 
-        wrapper.appendChild(labelEl);
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'checked') {
+                const transformToState = toState || ((v: any) => 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);
+                    if (input.checked !== transformed) {
+                        input.checked = transformed;
+                        this.state.checked = transformed;
+                    }
+                });
+
+                // Component → State
+                input.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    const transformed = transformToState(input.checked);
+                    this.state.checked = input.checked;
+                    stateObj.set(transformed);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+            }
+            else if (property === 'label') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    text.textContent = transformed;
+                    this.state.label = transformed;
+                });
+            }
+            else if (property === 'disabled') {
+                const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    input.disabled = transformed;
+                    this.state.disabled = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }
@@ -258,4 +256,5 @@ export class Switch {
 
 export function switchComponent(id: string, options: SwitchOptions = {}): Switch {
     return new Switch(id, options);
-}
+}
+