juxscript 1.0.19 → 1.0.21

package/lib/components/radio.ts

@@ -1,103 +1,86 @@
-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;
 
-/**
- * Radio option
- */
 export interface RadioOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
 
-/**
- * Radio component options
- */
 export interface RadioOptions {
     options?: RadioOption[];
     value?: string;
+    label?: string;
+    required?: boolean;
+    disabled?: boolean;
     name?: string;
-    onChange?: (value: string) => void;
-    orientation?: 'vertical' | 'horizontal';
+    orientation?: 'vertical' | 'horizontal';  // ✅ Add orientation
     style?: string;
     class?: string;
+    onValidate?: (value: string) => boolean | string;
 }
 
-/**
- * Radio component state
- */
-type RadioState = {
+interface RadioState extends FormInputState {
     options: RadioOption[];
     value: string;
-    name: string;
-    orientation: string;
-    style: string;
-    class: string;
-};
-
-/**
- * Radio component - Radio button group
- * 
- * Usage:
- *   jux.radio('size', {
- *     options: [
- *       { label: 'Small', value: 's' },
- *       { label: 'Medium', value: 'm' },
- *       { label: 'Large', value: 'l' }
- *     ],
- *     value: 'm',
- *     onChange: (val) => console.log(val)
- *   }).render('#form');
- * 
- *   // Two-way binding
- *   const sizeState = state('m');
- *   jux.radio('size').bind(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>;
+    orientation: 'vertical' | 'horizontal';  // ✅ Add to state
+}
 
-    constructor(id: string, options: RadioOptions = {}) {
-        this._id = id;
-        this.id = id;
-        this._onChange = options.onChange;
+export class Radio extends FormInput<RadioState> {
+    private _radioInputs: HTMLInputElement[] = [];
 
-        this.state = {
+    constructor(id: string, options: RadioOptions = {}) {
+        super(id, {
             options: options.options ?? [],
             value: options.value ?? '',
+            label: options.label ?? '',
+            required: options.required ?? false,
+            disabled: options.disabled ?? false,
             name: options.name ?? id,
-            orientation: options.orientation ?? 'vertical',
+            orientation: options.orientation ?? 'vertical',  // ✅ Default to vertical
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-    options(value: RadioOption[]): this {
-        this.state.options = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    addOption(option: RadioOption): this {
-        this.state.options = [...this.state.options, option];
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+
+    options(value: RadioOption[]): this {
+        this.state.options = value;
         return this;
     }
 
     value(value: string): this {
-        this.state.value = value;
-        this._updateElement();
-        return this;
+        return this.setValue(value);
     }
 
-    name(value: string): this {
-        this.state.name = value;
+    addOption(option: RadioOption): this {
+        this.state.options = [...this.state.options, option];
         return this;
     }
 
@@ -106,128 +89,293 @@ export class Radio {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-    onChange(handler: (value: string) => void): this {
-        this._onChange = handler;
-        return this;
+    getValue(): string {
+        return this.state.value;
     }
 
-    /**
-     * Two-way binding to state
-     */
-    bind(stateObj: State<string>): this {
-        this._boundState = stateObj;
+    setValue(value: string): this {
+        this.state.value = value;
 
-        // Update radio when state changes
-        stateObj.subscribe((val) => {
-            this.state.value = val;
-            this._updateElement();
+        // Update all radio inputs
+        this._radioInputs.forEach(input => {
+            input.checked = input.value === value;
         });
 
-        // Update state when radio changes
-        this.onChange((value) => stateObj.set(value));
-
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    protected _validateValue(value: string): boolean | string {
+        const { required, options } = this.state;
 
-    private _updateElement(): void {
-        const inputs = document.querySelectorAll(`input[name="${this.state.name}"]`);
-        inputs.forEach((input) => {
-            const radioInput = input as HTMLInputElement;
-            radioInput.checked = radioInput.value === this.state.value;
-        });
+        if (required && !value) {
+            return 'Please select an option';
+        }
+
+        // Validate that value is one of the options
+        if (value && !options.some(opt => opt.value === value)) {
+            return 'Invalid option selected';
+        }
+
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid value';
+            }
+        }
+
+        return true;
     }
 
-    getValue(): string {
-        return this.state.value;
+    protected _buildInputElement(): HTMLElement {
+        // Radio uses a container, not a single input
+        const container = document.createElement('div');
+        container.className = 'jux-radio-options';
+        return container;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Radio: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
+        const container = this._setupContainer(targetId);
 
-        this.container = container;
-        const { options, value, name, orientation, style, class: className } = this.state;
+        const { options, value, name, disabled, orientation, style, class: className } = this.state;  // ✅ Destructure orientation
 
+        // Build wrapper
         const wrapper = document.createElement('div');
-        wrapper.className = `jux-radio jux-radio-${orientation}`;
+        wrapper.className = 'jux-radio';
         wrapper.id = this._id;
-        wrapper.setAttribute('role', 'radiogroup');
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-        if (className) {
-            wrapper.className += ` ${className}`;
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
         }
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
+        // Radio options container
+        const optionsContainer = document.createElement('div');
+        optionsContainer.className = `jux-radio-options jux-radio-${orientation}`;  // ✅ Add orientation class
+        this._inputElement = optionsContainer;
+
+        this._radioInputs = [];
 
-        options.forEach((opt, index) => {
-            const label = document.createElement('label');
-            label.className = 'jux-radio-label';
+        options.forEach((option, index) => {
+            const radioWrapper = document.createElement('label');
+            radioWrapper.className = 'jux-radio-option';
 
             const input = document.createElement('input');
             input.type = 'radio';
             input.className = 'jux-radio-input';
-            input.id = `${this._id}-${index}`;
+            input.id = `${this._id}-option-${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 = disabled || option.disabled || false;
+
+            this._radioInputs.push(input);
+
+            const radioMark = document.createElement('span');
+            radioMark.className = 'jux-radio-mark';
+
+            const labelText = document.createElement('span');
+            labelText.className = 'jux-radio-label-text';
+            labelText.textContent = option.label;
+
+            radioWrapper.appendChild(input);
+            radioWrapper.appendChild(radioMark);
+            radioWrapper.appendChild(labelText);
+
+            optionsContainer.appendChild(radioWrapper);
+        });
+
+        wrapper.appendChild(optionsContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+
+        // Wire radio-specific sync
+        const valueSync = this._syncBindings.find(b => b.property === 'value');
+
+        if (valueSync) {
+            const { stateObj, toState, toComponent } = valueSync;
+
+            const transformToState = toState || ((v: string) => v);
+            const transformToComponent = toComponent || ((v: any) => String(v));
+
+            let isUpdating = false;
+
+            // State → Component
+            stateObj.subscribe((val: any) => {
+                if (isUpdating) return;
+                const transformed = transformToComponent(val);
+                this.setValue(transformed);
             });
 
-            label.appendChild(input);
+            // Component → State
+            this._radioInputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
 
-            const span = document.createElement('span');
-            span.className = 'jux-radio-text';
-            span.textContent = opt.label;
-            label.appendChild(span);
+                    const selectedValue = input.value;
+                    this.state.value = selectedValue;
+                    this._clearError();
+
+                    const transformed = transformToState(selectedValue);
+                    stateObj.set(transformed);
+
+                    // 🎯 Fire the change callback event
+                    this._triggerCallback('change', selectedValue);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+            });
+        } else {
+            // Default behavior without sync
+            this._radioInputs.forEach(input => {
+                input.addEventListener('change', () => {
+                    this.state.value = input.value;
+                    this._clearError();
+
+                    // 🎯 Fire the change callback event
+                    this._triggerCallback('change', input.value);
+                });
+            });
+        }
 
-            wrapper.appendChild(label);
+        // Always add blur validation
+        this._radioInputs.forEach(input => {
+            input.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));
+            });
+        }
+
         container.appendChild(wrapper);
+        this._injectRadioStyles();
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Radio.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectRadioStyles(): void {
+        const styleId = 'jux-radio-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-radio {
+        margin-bottom: 12px;
+      }
+
+      .jux-radio-options {
+        display: flex;
+        gap: 8px;
+      }
+
+      /* ✅ Vertical orientation (default) */
+      .jux-radio-vertical {
+        flex-direction: column;
+      }
+
+      /* ✅ Horizontal orientation */
+      .jux-radio-horizontal {
+        flex-direction: row;
+        flex-wrap: wrap;
+      }
+
+      .jux-radio-option {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+        user-select: none;
+        position: relative;
+      }
+
+      .jux-radio-input {
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
+      }
+
+      .jux-radio-mark {
+        position: relative;
+        height: 20px;
+        width: 20px;
+        border: 2px solid #d1d5db;
+        border-radius: 50%;
+        background-color: white;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+      }
+
+      .jux-radio-mark::after {
+        content: '';
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: white;
+        opacity: 0;
+        transition: opacity 0.2s;
+      }
+
+      .jux-radio-input:checked ~ .jux-radio-mark {
+        background-color: #3b82f6;
+        border-color: #3b82f6;
+      }
+
+      .jux-radio-input:checked ~ .jux-radio-mark::after {
+        opacity: 1;
+      }
+
+      .jux-radio-input:disabled ~ .jux-radio-mark {
+        background-color: #f3f4f6;
+        border-color: #d1d5db;
+        cursor: not-allowed;
+      }
+
+      .jux-radio-input:disabled ~ .jux-radio-label-text {
+        color: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .jux-radio-input:focus ~ .jux-radio-mark {
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      .jux-radio-input.jux-input-invalid ~ .jux-radio-mark {
+        border-color: #ef4444;
+      }
+
+      .jux-radio-label-text {
+        font-size: 14px;
+        color: #374151;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }
 

package/lib/components/script.ts

@@ -6,106 +6,38 @@ import { ErrorHandler } from './error-handler.js';
  * Auto-renders when created or modified
  */
 export class Script {
-  private _content: string = '';
-  private _type: string = '';
-  private _element: HTMLScriptElement | null = null;
+  private _id: string;
+  private code: string;
 
-  constructor(content: string = '') {
-    this._content = content;
-
-    // Auto-render if content provided
-    if (content) {
-      this.render();
-    }
-  }
-
-  /**
-   * Set inline JavaScript content
-   */
-  content(js: string): this {
-    this._content = js;
-    this.render();
-    return this;
+  constructor(code: string, id?: string) {
+    // ID only for deduplication, auto-generate if not provided
+    this._id = id || `jux-script-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    this.code = code;
   }
 
-  /**
-   * Set script type (e.g., 'module', 'text/javascript')
-   */
-  type(value: string): this {
-    this._type = value;
-    this.render();
-    return this;
-  }
-
-  /**
-   * Set as module script
-   */
-  module(): this {
-    this._type = 'module';
-    this.render();
-    return this;
-  }
-
-  /**
-   * Render the inline script element
-   */
   render(): this {
-    if (typeof document === 'undefined') {
+    // Check if script with this ID already exists
+    if (document.getElementById(this._id)) {
       return this;
     }
 
-    try {
-      // Remove existing element if it exists
-      this.remove();
-
-      const script = document.createElement('script');
-      script.textContent = this._content;
-
-      if (this._type) {
-        script.type = this._type;
-      }
-
-      document.head.appendChild(script);
-      this._element = script;
-
-      console.log('✓ Inline script rendered');
-    } catch (error: any) {
-      ErrorHandler.captureError({
-        component: 'Script',
-        method: 'render',
-        message: error.message,
-        stack: error.stack,
-        timestamp: new Date(),
-        context: {
-          type: this._type || 'inline',
-          error: 'runtime_exception'
-        }
-      });
-    }
+    const script = document.createElement('script');
+    script.id = this._id;
+    script.textContent = this.code;
+    document.head.appendChild(script);
 
     return this;
   }
 
-  /**
-   * Remove the script from the document
-   */
-  remove(): this {
-    if (this._element && this._element.parentNode) {
-      this._element.parentNode.removeChild(this._element);
-      this._element = null;
+  remove(): void {
+    const existing = document.getElementById(this._id);
+    if (existing) {
+      existing.remove();
     }
-    return this;
   }
 }
 
-/**
- * Factory function
- * 
- * Usage:
- *   jux.script('console.log("Hello")');
- *   jux.script().content('alert("Hi")');
- *   jux.script('export const x = 1;').module();
- */
-export function script(content: string = ''): Script {
-  return new Script(content);
+// ✅ ID is optional
+export function script(code: string, id?: string): Script {
+  return new Script(code, id);
 }