juxscript 1.0.20 → 1.0.21

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);
 }

package/lib/components/select.ts

@@ -1,5 +1,8 @@
-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;
 
 export interface SelectOption {
     label: string;
@@ -10,74 +13,68 @@ export interface SelectOption {
 export interface SelectOptions {
     options?: SelectOption[];
     value?: string;
-    placeholder?: string;
     label?: string;
+    placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     name?: string;
     style?: string;
     class?: string;
+    onValidate?: (value: string) => boolean | string;
 }
 
-type SelectState = {
+interface SelectState extends FormInputState {
     options: SelectOption[];
     value: string;
     placeholder: string;
-    label: string;
-    disabled: boolean;
-    name: string;
-    style: string;
-    class: string;
-};
-
-export class Select {
-    state: SelectState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: 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
-    }> = [];
+}
 
+export class Select extends FormInput<SelectState> {
     constructor(id: string, options: SelectOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             options: options.options ?? [],
             value: options.value ?? '',
-            placeholder: options.placeholder ?? 'Select...',
+            placeholder: options.placeholder ?? 'Select an option',
             label: options.label ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
             name: options.name ?? id,
             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: SelectOption[]): this {
-        this.state.options = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    addOption(option: SelectOption): 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: SelectOption[]): this {
+        this.state.options = value;
         return this;
     }
 
     value(value: string): this {
-        this.state.value = value;
-        this._updateElement();
-        return this;
+        return this.setValue(value);
     }
 
     placeholder(value: string): this {
@@ -85,201 +82,194 @@ export class Select {
         return this;
     }
 
-    label(value: string): this {
-        this.state.label = value;
-        return this;
-    }
-
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        this._updateElement();
+    addOption(option: SelectOption): this {
+        this.state.options = [...this.state.options, option];
         return this;
     }
 
-    name(value: string): this {
-        this.state.name = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+    getValue(): string {
+        return this.state.value;
     }
 
-    /**
-     * 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;
-    }
+    setValue(value: string): this {
+        this.state.value = value;
 
-    /**
-     * 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
-     */
-    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}"`);
+        if (this._inputElement) {
+            (this._inputElement as HTMLSelectElement).value = value;
         }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
+
         return this;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    protected _validateValue(value: string): boolean | string {
+        const { required, options } = this.state;
 
-    private _updateElement(): void {
-        const select = document.getElementById(`${this._id}-select`) as HTMLSelectElement;
-        if (select) {
-            select.value = this.state.value;
-            select.disabled = this.state.disabled;
+        if (required && !value) {
+            return 'Please select an option';
         }
-    }
-
-    getValue(): string {
-        return this.state.value;
-    }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+        // Validate that value is one of the options
+        if (value && !options.some(opt => opt.value === value)) {
+            return 'Invalid option selected';
+        }
 
-    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 "${targetId}" not found`);
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid value';
             }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
         }
-        this.container = container;
-
-        // === 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);
+        return true;
+    }
 
-        if (label) {
-            const labelEl = document.createElement('label');
-            labelEl.className = 'jux-select-label';
-            labelEl.htmlFor = `${this._id}-select`;
-            labelEl.textContent = label;
-            wrapper.appendChild(labelEl);
-        }
+    protected _buildInputElement(): HTMLElement {
+        const { options, value, placeholder, required, disabled, name } = this.state;
 
         const select = document.createElement('select');
-        select.className = 'jux-select-element';
-        select.id = `${this._id}-select`;
+        select.className = 'jux-input-element jux-select-element';
+        select.id = `${this._id}-input`;
         select.name = name;
-        select.value = value;
+        select.required = required;
         select.disabled = disabled;
 
-        options.forEach(opt => {
-            const option = document.createElement('option');
-            option.value = opt.value;
-            option.textContent = opt.label;
-            if (opt.value === value) option.selected = true;
-            select.appendChild(option);
+        // Placeholder option
+        if (placeholder) {
+            const placeholderOption = document.createElement('option');
+            placeholderOption.value = '';
+            placeholderOption.textContent = placeholder;
+            placeholderOption.disabled = true;
+            placeholderOption.selected = !value;
+            select.appendChild(placeholderOption);
+        }
+
+        // Options
+        options.forEach(option => {
+            const optionEl = document.createElement('option');
+            optionEl.value = option.value;
+            optionEl.textContent = option.label;
+            optionEl.disabled = option.disabled || false;
+            optionEl.selected = option.value === value;
+            select.appendChild(optionEl);
         });
 
-        wrapper.appendChild(select);
+        return select;
+    }
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
-        // Default behavior (only if NOT using sync)
-        if (!hasValueSync) {
-            select.addEventListener('change', () => {
-                this.state.value = select.value;
-            });
-        }
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            wrapper.addEventListener(event, handler as EventListener);
-        });
+        const { style, class: className } = this.state;
 
-        // 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;
-                    }
-                });
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input jux-select';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
 
-                // Component → State
-                select.addEventListener('change', () => {
-                    if (isUpdating) return;
-                    isUpdating = true;
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
 
-                    const transformed = transformToState(select.value);
-                    this.state.value = select.value;
-                    stateObj.set(transformed);
+        // Select container
+        const selectContainer = document.createElement('div');
+        selectContainer.className = 'jux-input-container jux-select-container';
+
+        // Select element
+        const selectEl = this._buildInputElement() as HTMLSelectElement;
+        this._inputElement = selectEl;
+        selectContainer.appendChild(selectEl);
+        wrapper.appendChild(selectContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        this._wireFormSync(selectEl, 'change');
+
+        // 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));
+            });
+        }
 
-                    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
-                    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);
-                    });
+        // Sync options changes
+        const optionsSync = this._syncBindings.find(b => b.property === 'options');
+        if (optionsSync) {
+            const transform = optionsSync.toComponent || ((v: any) => v);
+            optionsSync.stateObj.subscribe((val: any) => {
+                const transformed = transform(val);
+                this.state.options = transformed;
+
+                // Rebuild select options
+                selectEl.innerHTML = '';
+
+                if (this.state.placeholder) {
+                    const placeholderOption = document.createElement('option');
+                    placeholderOption.value = '';
+                    placeholderOption.textContent = this.state.placeholder;
+                    placeholderOption.disabled = true;
+                    placeholderOption.selected = !this.state.value;
+                    selectEl.appendChild(placeholderOption);
+                }
+
+                transformed.forEach((option: SelectOption) => {
+                    const optionEl = document.createElement('option');
+                    optionEl.value = option.value;
+                    optionEl.textContent = option.label;
+                    optionEl.disabled = option.disabled || false;
+                    optionEl.selected = option.value === this.state.value;
+                    selectEl.appendChild(optionEl);
                 });
-            }
-        });
+            });
+        }
 
-        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
+        this._injectSelectStyles();
+        this._injectFormStyles();
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Select.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectSelectStyles(): void {
+        const styleId = 'jux-select-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-select-container {
+        position: relative;
+      }
+
+      .jux-select-element {
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 12px center;
+        padding-right: 36px;
+        cursor: pointer;
+      }
+
+      .jux-select-element:disabled {
+        cursor: not-allowed;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }