juxscript 1.0.18 → 1.0.20

package/lib/components/radio.ts

@@ -17,7 +17,6 @@ export interface RadioOptions {
     options?: RadioOption[];
     value?: string;
     name?: string;
-    onChange?: (value: string) => void;
     orientation?: 'vertical' | 'horizontal';
     style?: string;
     class?: string;
@@ -45,26 +44,35 @@ type RadioState = {
  *       { label: 'Medium', value: 'm' },
  *       { label: 'Large', value: 'l' }
  *     ],
- *     value: 'm',
- *     onChange: (val) => console.log(val)
- *   }).render('#form');
+ *     value: 'm'
+ *   })
+ *   .bind('change', (e) => console.log(e.target.value))
+ *   .render('#form');
  * 
- *   // Two-way binding
+ *   // Two-way binding with state
  *   const sizeState = state('m');
- *   jux.radio('size').bind(sizeState).render('#form');
+ *   jux.radio('size')
+ *     .sync('value', sizeState)
+ *     .render('#form');
  */
 export class Radio {
     state: RadioState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _onChange?: (value: string) => void;
-    private _boundState?: State<string>;
+
+    // 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: RadioOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
 
         this.state = {
             options: options.options ?? [],
@@ -116,26 +124,28 @@ export class Radio {
         return this;
     }
 
-    onChange(handler: (value: string) => void): this {
-        this._onChange = handler;
+    /**
+     * Bind event handler (stores for wiring in render)
+     * DOM events only: change, click, focus, blur, 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 ('value', 'options')
+     * @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<string>): this {
-        this._boundState = stateObj;
-
-        // Update radio when state changes
-        stateObj.subscribe((val) => {
-            this.state.value = val;
-            this._updateElement();
-        });
-
-        // Update state when radio changes
-        this.onChange((value) => stateObj.set(value));
-
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Radio.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
@@ -160,65 +170,154 @@ export class Radio {
      * ------------------------- */
 
     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(`Radio: Target element "${targetId}" not found`);
+                throw new Error(`Radio: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
+
+        // === 2. PREPARE: Destructure state and check sync flags ===
         const { options, value, name, orientation, style, class: className } = this.state;
+        const hasValueSync = this._syncBindings.some(b => b.property === 'value');
 
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = `jux-radio jux-radio-${orientation}`;
         wrapper.id = this._id;
-        wrapper.setAttribute('role', 'radiogroup');
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        if (className) {
-            wrapper.className += ` ${className}`;
-        }
+        const inputs: HTMLInputElement[] = [];
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
+        options.forEach((option) => {
+            const radioItem = document.createElement('div');
+            radioItem.className = 'jux-radio-item';
 
-        options.forEach((opt, index) => {
             const label = document.createElement('label');
             label.className = 'jux-radio-label';
 
             const input = document.createElement('input');
             input.type = 'radio';
             input.className = 'jux-radio-input';
-            input.id = `${this._id}-${index}`;
             input.name = name;
-            input.value = opt.value;
-            input.checked = opt.value === value;
-            input.disabled = opt.disabled ?? false;
-
-            input.addEventListener('change', (e) => {
-                const target = e.target as HTMLInputElement;
-                this.state.value = target.value;
-                if (this._onChange) {
-                    this._onChange(target.value);
-                }
-            });
+            input.value = option.value;
+            input.checked = option.value === value;
+            input.disabled = option.disabled || false;
+            inputs.push(input);
+
+            const checkmark = document.createElement('span');
+            checkmark.className = 'jux-radio-checkmark';
+
+            const text = document.createElement('span');
+            text.className = 'jux-radio-text';
+            text.textContent = option.label;
 
             label.appendChild(input);
+            label.appendChild(checkmark);
+            label.appendChild(text);
+            radioItem.appendChild(label);
+            wrapper.appendChild(radioItem);
+        });
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-            const span = document.createElement('span');
-            span.className = 'jux-radio-text';
-            span.textContent = opt.label;
-            label.appendChild(span);
+        // Default behavior (only if NOT using sync)
+        if (!hasValueSync) {
+            inputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    if (input.checked) {
+                        this.state.value = input.value;
+                    }
+                });
+            });
+        }
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
 
-            wrapper.appendChild(label);
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transformToState = toState || ((v: any) => v);
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transformToComponent(val);
+                    inputs.forEach(input => {
+                        input.checked = input.value === transformed;
+                    });
+                    this.state.value = transformed;
+                });
+
+                // Component → State
+                inputs.forEach(input => {
+                    input.addEventListener('change', () => {
+                        if (isUpdating || !input.checked) return;
+                        isUpdating = true;
+
+                        const transformed = transformToState(input.value);
+                        this.state.value = input.value;
+                        stateObj.set(transformed);
+
+                        setTimeout(() => { isUpdating = false; }, 0);
+                    });
+                });
+            }
+            else if (property === 'options') {
+                const transformToComponent = toComponent || ((v: any) => v);
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    this.state.options = transformed;
+
+                    // Re-render options
+                    wrapper.innerHTML = '';
+                    transformed.forEach((option: any) => {
+                        const radioItem = document.createElement('div');
+                        radioItem.className = 'jux-radio-item';
+
+                        const label = document.createElement('label');
+                        label.className = 'jux-radio-label';
+
+                        const input = document.createElement('input');
+                        input.type = 'radio';
+                        input.className = 'jux-radio-input';
+                        input.name = this.state.name;
+                        input.value = option.value;
+                        input.checked = option.value === this.state.value;
+                        input.disabled = option.disabled || false;
+
+                        const checkmark = document.createElement('span');
+                        checkmark.className = 'jux-radio-checkmark';
+
+                        const text = document.createElement('span');
+                        text.className = 'jux-radio-text';
+                        text.textContent = option.label;
+
+                        label.appendChild(input);
+                        label.appendChild(checkmark);
+                        label.appendChild(text);
+                        radioItem.appendChild(label);
+                        wrapper.appendChild(radioItem);
+                    });
+                });
+            }
         });
 
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }

package/lib/components/select.ts

@@ -14,7 +14,6 @@ export interface SelectOptions {
     label?: string;
     disabled?: boolean;
     name?: string;
-    onChange?: (value: string) => void;
     style?: string;
     class?: string;
 }
@@ -35,13 +34,19 @@ export class Select {
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _onChange?: (value: string) => void;
-    private _boundState?: State<string>;
+
+    // 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: SelectOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
 
         this.state = {
             options: options.options ?? [],
@@ -55,6 +60,10 @@ export class Select {
         };
     }
 
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
     options(value: SelectOption[]): this {
         this.state.options = value;
         return this;
@@ -102,35 +111,35 @@ export class Select {
         return this;
     }
 
-    onChange(handler: (value: string) => void): this {
-        this._onChange = handler;
+    /**
+     * Bind event handler (stores for wiring in render)
+     * DOM events only: change, focus, blur, 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 ('value', 'label', 'disabled', 'options')
+     * @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<string>): this {
-        this._boundState = stateObj;
-
-        // Update select when state changes
-        stateObj.subscribe((val) => {
-            this.state.value = val;
-            this._updateElement();
-        });
-
-        // Update state when select changes
-        const originalOnChange = this._onChange;
-        this._onChange = (value) => {
-            stateObj.set(value);
-            if (originalOnChange) {
-                originalOnChange(value);
-            }
-        };
-
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Select.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
     private _updateElement(): void {
         const select = document.getElementById(`${this._id}-select`) as HTMLSelectElement;
         if (select) {
@@ -143,35 +152,35 @@ export class Select {
         return this.state.value;
     }
 
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
     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(`Select: Target element "${targetId}" not found`);
+                throw new Error(`Select: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { options, value, placeholder, label, disabled, name, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { value, options, label, disabled, name, style, class: className } = this.state;
+        const hasValueSync = this._syncBindings.some(b => b.property === 'value');
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-select';
         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);
-        }
-
-        // Label
         if (label) {
             const labelEl = document.createElement('label');
             labelEl.className = 'jux-select-label';
@@ -184,87 +193,86 @@ export class Select {
         select.className = 'jux-select-element';
         select.id = `${this._id}-select`;
         select.name = name;
+        select.value = value;
         select.disabled = disabled;
 
-        // Placeholder option
-        if (placeholder) {
-            const placeholderOpt = document.createElement('option');
-            placeholderOpt.value = '';
-            placeholderOpt.textContent = placeholder;
-            placeholderOpt.disabled = true;
-            placeholderOpt.selected = value === '';
-            select.appendChild(placeholderOpt);
-        }
-
-        // Options
         options.forEach(opt => {
             const option = document.createElement('option');
             option.value = opt.value;
             option.textContent = opt.label;
-            option.disabled = opt.disabled ?? false;
-            option.selected = opt.value === value;
+            if (opt.value === value) option.selected = true;
             select.appendChild(option);
         });
 
-        select.addEventListener('change', (e) => {
-            const target = e.target as HTMLSelectElement;
-            this.state.value = target.value;
-            if (this._onChange) {
-                this._onChange(target.value);
-            }
-        });
-
         wrapper.appendChild(select);
-        container.appendChild(wrapper);
-
-        // Add default styles if not already present
-        this._injectDefaultStyles();
-
-        return this;
-    }
 
-    private _injectDefaultStyles(): void {
-        const styleId = 'jux-select-styles';
-        if (document.getElementById(styleId)) return;
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-            .jux-select {
-                margin-bottom: 16px;
-            }
+        // Default behavior (only if NOT using sync)
+        if (!hasValueSync) {
+            select.addEventListener('change', () => {
+                this.state.value = select.value;
+            });
+        }
 
-            .jux-select-label {
-                display: block;
-                margin-bottom: 6px;
-                font-weight: 500;
-                color: #374151;
-            }
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
 
-            .jux-select-element {
-                width: 100%;
-                padding: 8px 12px;
-                border: 1px solid #d1d5db;
-                border-radius: 6px;
-                font-size: 14px;
-                background: white;
-                cursor: pointer;
-                transition: border-color 0.2s;
-                box-sizing: border-box;
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transformToState = toState || ((v: any) => v);
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transformToComponent(val);
+                    if (select.value !== transformed) {
+                        select.value = transformed;
+                        this.state.value = transformed;
+                    }
+                });
+
+                // Component → State
+                select.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    const transformed = transformToState(select.value);
+                    this.state.value = select.value;
+                    stateObj.set(transformed);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
             }
-
-            .jux-select-element:focus {
-                outline: none;
-                border-color: #3b82f6;
-                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+            else if (property === 'options') {
+                const transformToComponent = toComponent || ((v: any) => v);
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    this.state.options = transformed;
+
+                    // Re-render options
+                    select.innerHTML = '';
+                    transformed.forEach((opt: any) => {
+                        const option = document.createElement('option');
+                        option.value = opt.value;
+                        option.textContent = opt.label;
+                        if (opt.value === this.state.value) option.selected = true;
+                        select.appendChild(option);
+                    });
+                });
             }
+        });
 
-            .jux-select-element:disabled {
-                background-color: #f3f4f6;
-                cursor: not-allowed;
-            }
-        `;
-        document.head.appendChild(style);
+        // === 5. RENDER: Append to DOM and finalize ===
+        container.appendChild(wrapper);
+        return this;
     }
 
     renderTo(juxComponent: any): this {