juxscript 1.0.18 → 1.0.20

package/lib/components/input.ts

@@ -1,5 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Input component options
@@ -9,6 +10,7 @@ export interface InputOptions {
   value?: string;
   placeholder?: string;
   label?: string;
+  icon?: string;
   required?: boolean;
   disabled?: boolean;
   name?: string;
@@ -19,7 +21,6 @@ export interface InputOptions {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  onChange?: (value: string) => void;
   onValidate?: (value: string) => boolean | string;
   style?: string;
   class?: string;
@@ -33,6 +34,7 @@ type InputState = {
   value: string;
   placeholder: string;
   label: string;
+  icon: string;
   required: boolean;
   disabled: boolean;
   name: string;
@@ -48,44 +50,22 @@ type InputState = {
   errorMessage?: string;
 };
 
-/**
- * Input component - text input and textarea with validation
- * 
- * Usage:
- *   jux.input('username')
- *     .label('Username')
- *     .placeholder('Enter username')
- *     .required(true)
- *     .minLength(3)
- *     .maxLength(20)
- *     .render('#form');
- * 
- *   jux.input('age')
- *     .type('number')
- *     .min(0)
- *     .max(120)
- *     .step(1)
- *     .render('#form');
- * 
- *   jux.input('bio')
- *     .type('textarea')
- *     .rows(5)
- *     .maxLength(500)
- *     .render('#form');
- */
 export class Input {
   state: InputState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
-  private _onChange?: (value: string) => void;
   private _onValidate?: (value: string) => boolean | string;
-  private _boundState?: State<string>;
+
+  // Store bind() instructions (DOM events only)
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+
+  // Store sync() instructions (state synchronization)
+  private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
 
   constructor(id: string, options: InputOptions = {}) {
     this._id = id;
     this.id = id;
-    this._onChange = options.onChange;
     this._onValidate = options.onValidate;
 
     this.state = {
@@ -93,6 +73,7 @@ export class Input {
       value: options.value ?? '',
       placeholder: options.placeholder ?? '',
       label: options.label ?? '',
+      icon: options.icon ?? '',
       required: options.required ?? false,
       disabled: options.disabled ?? false,
       name: options.name ?? id,
@@ -133,6 +114,11 @@ export class Input {
     return this;
   }
 
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+
   required(value: boolean): this {
     this.state.required = value;
     return this;
@@ -154,54 +140,36 @@ export class Input {
     return this;
   }
 
-  /**
-   * Minimum value for number inputs
-   */
   min(value: number): this {
     this.state.min = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Maximum value for number inputs
-   */
   max(value: number): this {
     this.state.max = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Step value for number inputs
-   */
   step(value: number): this {
     this.state.step = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Minimum length for text inputs
-   */
   minLength(value: number): this {
     this.state.minLength = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Maximum length for text inputs
-   */
   maxLength(value: number): this {
     this.state.maxLength = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Pattern validation for text inputs (regex)
-   */
   pattern(value: string): this {
     this.state.pattern = value;
     this._updateElement();
@@ -218,35 +186,33 @@ export class Input {
     return this;
   }
 
-  onChange(handler: (value: string) => void): this {
-    this._onChange = handler;
+  onValidate(handler: (value: string) => boolean | string): this {
+    this._onValidate = handler;
     return this;
   }
 
   /**
-   * Custom validation function
-   * Should return true if valid, or an error message string if invalid
+   * Bind event handler (stores for wiring in render)
+   * DOM events only: input, change, blur, focus, etc.
    */
-  onValidate(handler: (value: string) => boolean | string): this {
-    this._onValidate = handler;
+  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', etc)
+   * @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;
-
-    // Subscribe to state changes
-    stateObj.subscribe((val) => {
-      this.state.value = val;
-      this._updateElement();
-    });
-
-    // Update state on input change
-    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(`Input.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
@@ -257,12 +223,10 @@ export class Input {
   private _validate(value: string): boolean | string {
     const { required, type, min, max, minLength, maxLength, pattern } = this.state;
 
-    // Required check
     if (required && !value.trim()) {
       return 'This field is required';
     }
 
-    // Number validation
     if (type === 'number' && value) {
       const numValue = Number(value);
 
@@ -279,7 +243,6 @@ export class Input {
       }
     }
 
-    // Text length validation
     if ((type === 'text' || type === 'textarea') && value) {
       if (minLength !== undefined && value.length < minLength) {
         return `Must be at least ${minLength} characters`;
@@ -290,7 +253,6 @@ export class Input {
       }
     }
 
-    // Pattern validation
     if (pattern && value) {
       const regex = new RegExp(pattern);
       if (!regex.test(value)) {
@@ -298,7 +260,6 @@ export class Input {
       }
     }
 
-    // Custom validation
     if (this._onValidate) {
       const result = this._onValidate(value);
       if (result !== true) {
@@ -341,9 +302,6 @@ export class Input {
     this.state.errorMessage = undefined;
   }
 
-  /**
-   * Manually validate the current value
-   */
   validate(): boolean {
     const result = this._validate(this.state.value);
 
@@ -400,8 +358,8 @@ export class Input {
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -411,40 +369,52 @@ export class Input {
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { type, value, placeholder, label, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state and check bindings ===
+    const {
+      type, value, placeholder, label, icon, required, disabled, name, rows,
+      min, max, step, minLength, maxLength, pattern, style, class: className
+    } = this.state;
+
+    const hasValueSync = this._syncBindings.some(binding => binding.property === 'value');
+
+    // === 3. BUILD: Create all DOM elements ===
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-input';
     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-input-label';
-      labelEl.htmlFor = `${this._id}-input`;
-      labelEl.textContent = label;
-      if (required) {
-        const requiredSpan = document.createElement('span');
-        requiredSpan.className = 'jux-input-required';
-        requiredSpan.textContent = ' *';
-        labelEl.appendChild(requiredSpan);
-      }
-      wrapper.appendChild(labelEl);
+    const labelEl = document.createElement('label');
+    labelEl.className = 'jux-input-label';
+    labelEl.htmlFor = `${this._id}-input`;
+    labelEl.textContent = label;
+    if (required) {
+      const requiredSpan = document.createElement('span');
+      requiredSpan.className = 'jux-input-required';
+      requiredSpan.textContent = ' *';
+      labelEl.appendChild(requiredSpan);
+    }
+    if (label) wrapper.appendChild(labelEl);
+
+    // Input container
+    const inputContainer = document.createElement('div');
+    inputContainer.className = 'jux-input-container';
+    if (icon) inputContainer.classList.add('jux-input-with-icon');
+
+    // Icon
+    if (icon) {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-input-icon';
+      const iconElement = renderIcon(icon);
+      iconEl.appendChild(iconElement);
+      inputContainer.appendChild(iconEl);
     }
 
-    // Input/Textarea
+    // Input/Textarea element
     let inputEl: HTMLInputElement | HTMLTextAreaElement;
-
     if (type === 'textarea') {
       inputEl = document.createElement('textarea');
       inputEl.rows = rows;
@@ -454,14 +424,12 @@ export class Input {
       inputEl = document.createElement('input');
       inputEl.type = type;
 
-      // Number-specific attributes
       if (type === 'number') {
         if (min !== undefined) inputEl.min = String(min);
         if (max !== undefined) inputEl.max = String(max);
         if (step !== undefined) inputEl.step = String(step);
       }
 
-      // Text-specific attributes
       if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
         if (minLength !== undefined) inputEl.minLength = minLength;
         if (maxLength !== undefined) inputEl.maxLength = maxLength;
@@ -477,52 +445,108 @@ export class Input {
     inputEl.required = required;
     inputEl.disabled = disabled;
 
-    // Input event handler
-    inputEl.addEventListener('input', (e) => {
-      const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-      this.state.value = target.value;
-
-      // Clear error on input
-      this._clearError();
-
-      if (this._onChange) {
-        this._onChange(target.value);
-      }
-    });
-
-    // Blur event for validation
-    inputEl.addEventListener('blur', () => {
-      this.validate();
-    });
-
-    wrapper.appendChild(inputEl);
+    inputContainer.appendChild(inputEl);
+    wrapper.appendChild(inputContainer);
 
-    // Error message element
+    // Error element
     const errorEl = document.createElement('div');
     errorEl.className = 'jux-input-error';
     errorEl.id = `${this._id}-error`;
     errorEl.style.display = 'none';
     wrapper.appendChild(errorEl);
 
-    // Character counter for maxLength
+    // Character counter
     if (maxLength && (type === 'text' || type === 'textarea')) {
       const counterEl = document.createElement('div');
       counterEl.className = 'jux-input-counter';
       counterEl.id = `${this._id}-counter`;
       counterEl.textContent = `${value.length}/${maxLength}`;
+      wrapper.appendChild(counterEl);
 
+      // Wire counter immediately
       inputEl.addEventListener('input', () => {
         counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
       });
+    }
 
-      wrapper.appendChild(counterEl);
+    // === 4. WIRE: Add event listeners ===
+
+    // Default input handler (only if NOT using sync)
+    if (!hasValueSync) {
+      inputEl.addEventListener('input', () => {
+        this.state.value = inputEl.value;
+        this._clearError();
+      });
     }
 
-    container.appendChild(wrapper);
+    // Always add blur validation
+    inputEl.addEventListener('blur', () => {
+      this.validate();
+    });
+
+    // Wire up custom event bindings (from .bind() calls)
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire up sync bindings (from .sync() calls)
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'value') {
+        // Default transforms
+        const transformToState = toState || ((v: string) => {
+          return type === 'number' ? (parseInt(v) || 0) : v;
+        });
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        let isUpdating = false;
+
+        // State → Input (when state changes, update input)
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          if (inputEl.value !== transformed) {
+            inputEl.value = transformed;
+            this.state.value = transformed;
+          }
+        });
+
+        // Input → State (when input changes, update state)
+        inputEl.addEventListener('input', () => {
+          if (isUpdating) return;
+          isUpdating = true;
+
+          const transformed = transformToState(inputEl.value);
+          this.state.value = inputEl.value;
+          this._clearError();
+
+          stateObj.set(transformed);
+
+          setTimeout(() => { isUpdating = false; }, 0);
+        });
+      }
+      else if (property === 'label') {
+        // Sync label (one-way: state → component)
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          labelEl.textContent = transformed;
+          this.state.label = transformed;
+        });
+      }
+    });
 
-    // Add default styles if not already present
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
     this._injectDefaultStyles();
 
+    // Trigger Lucide icon rendering
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }
 
@@ -537,6 +561,31 @@ export class Input {
         margin-bottom: 16px;
       }
 
+      .jux-input-container {
+        position: relative;
+      }
+
+      .jux-input-with-icon .jux-input-element {
+        padding-left: 40px;
+      }
+
+      .jux-input-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6b7280;
+        pointer-events: none;
+      }
+
+      .jux-input-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
       .jux-input-label {
         display: block;
         margin-bottom: 6px;