juxscript 1.0.20 → 1.0.21

package/lib/components/input.ts

@@ -1,10 +1,10 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
 import { renderIcon } from './icons.js';
 
-/**
- * Input component options
- */
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change', 'input'] as const;
+
 export interface InputOptions {
   type?: string;
   value?: string;
@@ -26,18 +26,11 @@ export interface InputOptions {
   class?: string;
 }
 
-/**
- * Input component state
- */
-type InputState = {
+interface InputState extends FormInputState {
   type: string;
   value: string;
   placeholder: string;
-  label: string;
   icon: string;
-  required: boolean;
-  disabled: boolean;
-  name: string;
   rows: number;
   min?: number;
   max?: number;
@@ -45,30 +38,11 @@ type InputState = {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  style: string;
-  class: string;
-  errorMessage?: string;
-};
-
-export class Input {
-  state: InputState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-  private _onValidate?: (value: string) => boolean | 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 }> = [];
+}
 
+export class Input extends FormInput<InputState> {
   constructor(id: string, options: InputOptions = {}) {
-    this._id = id;
-    this.id = id;
-    this._onValidate = options.onValidate;
-
-    this.state = {
+    super(id, {
       type: options.type ?? 'text',
       value: options.value ?? '',
       placeholder: options.placeholder ?? '',
@@ -85,13 +59,33 @@ export class Input {
       maxLength: options.maxLength,
       pattern: options.pattern,
       style: options.style ?? '',
-      class: options.class ?? ''
-    };
+      class: options.class ?? '',
+      errorMessage: undefined
+    });
+
+    if (options.onValidate) {
+      this._onValidate = options.onValidate;
+    }
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from FormInput/BaseComponent:
+  // - label(), required(), name(), onValidate()
+  // - validate(), isValid()
+  // - style(), class()
+  // - bind(), sync(), renderTo()
+  // - disabled(), enable(), disable()
 
   type(value: string): this {
     this.state.type = value;
@@ -99,9 +93,7 @@ export class Input {
   }
 
   value(value: string | number): this {
-    this.state.value = String(value);
-    this._updateElement();
-    return this;
+    return this.setValue(String(value));
   }
 
   placeholder(value: string): this {
@@ -109,32 +101,11 @@ export class Input {
     return this;
   }
 
-  label(value: string): this {
-    this.state.label = value;
-    return this;
-  }
-
   icon(value: string): this {
     this.state.icon = value;
     return this;
   }
 
-  required(value: boolean): this {
-    this.state.required = value;
-    return this;
-  }
-
-  disabled(value: boolean): this {
-    this.state.disabled = value;
-    this._updateElement();
-    return this;
-  }
-
-  name(value: string): this {
-    this.state.name = value;
-    return this;
-  }
-
   rows(value: number): this {
     this.state.rows = value;
     return this;
@@ -142,85 +113,56 @@ export class Input {
 
   min(value: number): this {
     this.state.min = value;
-    this._updateElement();
     return this;
   }
 
   max(value: number): this {
     this.state.max = value;
-    this._updateElement();
     return this;
   }
 
   step(value: number): this {
     this.state.step = value;
-    this._updateElement();
     return this;
   }
 
   minLength(value: number): this {
     this.state.minLength = value;
-    this._updateElement();
     return this;
   }
 
   maxLength(value: number): this {
     this.state.maxLength = value;
-    this._updateElement();
     return this;
   }
 
   pattern(value: string): this {
     this.state.pattern = value;
-    this._updateElement();
-    return this;
-  }
-
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
     return this;
   }
 
-  onValidate(handler: (value: string) => boolean | string): this {
-    this._onValidate = handler;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FORM INPUT IMPLEMENTATION
+   * ═════════════════════════════════════════════════════════════════ */
 
-  /**
-   * Bind event handler (stores for wiring in render)
-   * DOM events only: input, change, blur, focus, etc.
-   */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
+  getValue(): string {
+    return this.state.value;
   }
 
-  /**
-   * 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
-   */
-  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}"`);
+  setValue(value: string): this {
+    this.state.value = value;
+    if (this._inputElement) {
+      (this._inputElement as HTMLInputElement | HTMLTextAreaElement).value = value;
     }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
-  /* -------------------------
-   * Validation
-   * ------------------------- */
+  getNumericValue(): number | null {
+    const num = Number(this.state.value);
+    return isNaN(num) ? null : num;
+  }
 
-  private _validate(value: string): boolean | string {
+  protected _validateValue(value: string): boolean | string {
     const { required, type, min, max, minLength, maxLength, pattern } = this.state;
 
     if (required && !value.trim()) {
@@ -270,116 +212,54 @@ export class Input {
     return true;
   }
 
-  private _showError(message: string): void {
-    const errorEl = document.getElementById(`${this._id}-error`);
-    const inputEl = document.getElementById(`${this._id}-input`);
-
-    if (errorEl) {
-      errorEl.textContent = message;
-      errorEl.style.display = 'block';
-    }
+  protected _buildInputElement(): HTMLElement {
+    const { type, value, placeholder, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern } = this.state;
 
-    if (inputEl) {
-      inputEl.classList.add('jux-input-invalid');
-    }
-
-    this.state.errorMessage = message;
-  }
-
-  private _clearError(): void {
-    const errorEl = document.getElementById(`${this._id}-error`);
-    const inputEl = document.getElementById(`${this._id}-input`);
-
-    if (errorEl) {
-      errorEl.textContent = '';
-      errorEl.style.display = 'none';
-    }
-
-    if (inputEl) {
-      inputEl.classList.remove('jux-input-invalid');
-    }
-
-    this.state.errorMessage = undefined;
-  }
-
-  validate(): boolean {
-    const result = this._validate(this.state.value);
+    let inputEl: HTMLInputElement | HTMLTextAreaElement;
 
-    if (result === true) {
-      this._clearError();
-      return true;
+    if (type === 'textarea') {
+      inputEl = document.createElement('textarea');
+      inputEl.rows = rows;
+      if (minLength !== undefined) inputEl.minLength = minLength;
+      if (maxLength !== undefined) inputEl.maxLength = maxLength;
     } else {
-      this._showError(result as string);
-      return false;
-    }
-  }
+      inputEl = document.createElement('input');
+      inputEl.type = type;
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _updateElement(): void {
-    const input = document.getElementById(`${this._id}-input`) as HTMLInputElement | HTMLTextAreaElement;
-    if (input) {
-      input.value = this.state.value;
-      input.disabled = this.state.disabled;
-
-      if (input instanceof HTMLInputElement) {
-        if (this.state.min !== undefined) input.min = String(this.state.min);
-        if (this.state.max !== undefined) input.max = String(this.state.max);
-        if (this.state.step !== undefined) input.step = String(this.state.step);
-        if (this.state.minLength !== undefined) input.minLength = this.state.minLength;
-        if (this.state.maxLength !== undefined) input.maxLength = this.state.maxLength;
-        if (this.state.pattern) input.pattern = this.state.pattern;
+      if (type === 'number') {
+        if (min !== undefined) inputEl.min = String(min);
+        if (max !== undefined) inputEl.max = String(max);
+        if (step !== undefined) inputEl.step = String(step);
       }
 
-      if (input instanceof HTMLTextAreaElement) {
-        if (this.state.minLength !== undefined) input.minLength = this.state.minLength;
-        if (this.state.maxLength !== undefined) input.maxLength = this.state.maxLength;
+      if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
+        if (minLength !== undefined) inputEl.minLength = minLength;
+        if (maxLength !== undefined) inputEl.maxLength = maxLength;
+        if (pattern) inputEl.pattern = pattern;
       }
     }
-  }
 
-  getValue(): string {
-    return this.state.value;
-  }
-
-  getNumericValue(): number | null {
-    const num = Number(this.state.value);
-    return isNaN(num) ? null : num;
-  }
+    inputEl.className = 'jux-input-element';
+    inputEl.id = `${this._id}-input`;
+    inputEl.name = name;
+    inputEl.value = value;
+    inputEl.placeholder = placeholder;
+    inputEl.required = required;
+    inputEl.disabled = disabled;
 
-  isValid(): boolean {
-    return this._validate(this.state.value) === true;
+    return inputEl;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    // === 1. SETUP: Get container ===
-    let container: HTMLElement;
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Input: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
-
-    // === 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 container = this._setupContainer(targetId);
 
-    const hasValueSync = this._syncBindings.some(binding => binding.property === 'value');
+    const { icon, maxLength, type, style, class: className } = this.state;
 
-    // === 3. BUILD: Create all DOM elements ===
+    // Build wrapper
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-input';
     wrapper.id = this._id;
@@ -387,17 +267,9 @@ export class Input {
     if (style) wrapper.setAttribute('style', style);
 
     // 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);
+    if (this.state.label) {
+      wrapper.appendChild(this._renderLabel());
     }
-    if (label) wrapper.appendChild(labelEl);
 
     // Input container
     const inputContainer = document.createElement('div');
@@ -408,139 +280,69 @@ export class Input {
     if (icon) {
       const iconEl = document.createElement('span');
       iconEl.className = 'jux-input-icon';
-      const iconElement = renderIcon(icon);
-      iconEl.appendChild(iconElement);
+      iconEl.appendChild(renderIcon(icon));
       inputContainer.appendChild(iconEl);
     }
 
-    // Input/Textarea element
-    let inputEl: HTMLInputElement | HTMLTextAreaElement;
-    if (type === 'textarea') {
-      inputEl = document.createElement('textarea');
-      inputEl.rows = rows;
-      if (minLength !== undefined) inputEl.minLength = minLength;
-      if (maxLength !== undefined) inputEl.maxLength = maxLength;
-    } else {
-      inputEl = document.createElement('input');
-      inputEl.type = type;
-
-      if (type === 'number') {
-        if (min !== undefined) inputEl.min = String(min);
-        if (max !== undefined) inputEl.max = String(max);
-        if (step !== undefined) inputEl.step = String(step);
-      }
-
-      if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
-        if (minLength !== undefined) inputEl.minLength = minLength;
-        if (maxLength !== undefined) inputEl.maxLength = maxLength;
-        if (pattern) inputEl.pattern = pattern;
-      }
-    }
-
-    inputEl.className = 'jux-input-element';
-    inputEl.id = `${this._id}-input`;
-    inputEl.name = name;
-    inputEl.value = value;
-    inputEl.placeholder = placeholder;
-    inputEl.required = required;
-    inputEl.disabled = disabled;
-
+    // Input element
+    const inputEl = this._buildInputElement();
+    this._inputElement = inputEl;
     inputContainer.appendChild(inputEl);
     wrapper.appendChild(inputContainer);
 
     // Error element
-    const errorEl = document.createElement('div');
-    errorEl.className = 'jux-input-error';
-    errorEl.id = `${this._id}-error`;
-    errorEl.style.display = 'none';
-    wrapper.appendChild(errorEl);
+    wrapper.appendChild(this._renderError());
 
     // 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}`;
+      counterEl.textContent = `${this.state.value.length}/${maxLength}`;
       wrapper.appendChild(counterEl);
 
-      // Wire counter immediately
       inputEl.addEventListener('input', () => {
-        counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
-      });
-    }
-
-    // === 4. WIRE: Add event listeners ===
+        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
+        counterEl.textContent = `${input.value.length}/${maxLength}`;
+        this.state.value = input.value;
 
-    // Default input handler (only if NOT using sync)
-    if (!hasValueSync) {
+        // 🎯 Fire the input callback event
+        this._triggerCallback('input', input.value);
+      });
+    } else {
+      // Fire input event even without counter
       inputEl.addEventListener('input', () => {
-        this.state.value = inputEl.value;
-        this._clearError();
+        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
+        this.state.value = input.value;
+
+        // 🎯 Fire the input callback event
+        this._triggerCallback('input', input.value);
       });
     }
 
-    // Always add blur validation
-    inputEl.addEventListener('blur', () => {
-      this.validate();
+    // Fire change event on blur
+    inputEl.addEventListener('change', () => {
+      const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
+      // 🎯 Fire the change callback event
+      this._triggerCallback('change', input.value);
     });
 
-    // Wire up custom event bindings (from .bind() calls)
-    this._bindings.forEach(({ event, handler }) => {
-      wrapper.addEventListener(event, handler as EventListener);
-    });
+    // Wire events
+    this._wireStandardEvents(wrapper);
+    this._wireFormSync(inputEl, 'input');
 
-    // 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;
-        });
-      }
-    });
+    // 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));
+      });
+    }
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(wrapper);
-    this._injectDefaultStyles();
+    this._injectFormStyles();
 
-    // Trigger Lucide icon rendering
     requestAnimationFrame(() => {
       if ((window as any).lucide) {
         (window as any).lucide.createIcons();
@@ -549,107 +351,53 @@ export class Input {
 
     return this;
   }
+}
 
-  private _injectDefaultStyles(): void {
-    const styleId = 'jux-input-styles';
-    if (document.getElementById(styleId)) return;
-
-    const style = document.createElement('style');
-    style.id = styleId;
-    style.textContent = `
-      .jux-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;
-      }
+export function input(id: string, options: InputOptions = {}): Input {
+  return new Input(id, options);
+}
 
-      .jux-input-label {
-        display: block;
-        margin-bottom: 6px;
-        font-weight: 500;
-        color: #374151;
-      }
+// Shorter, consistent naming
+export function text(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'text' });
+}
 
-      .jux-input-required {
-        color: #ef4444;
-      }
+export function number(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'number' });
+}
 
-      .jux-input-element {
-        width: 100%;
-        padding: 8px 12px;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-        font-size: 14px;
-        transition: border-color 0.2s;
-        box-sizing: border-box;
-      }
+export function email(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'email' });
+}
 
-      .jux-input-element:focus {
-        outline: none;
-        border-color: #3b82f6;
-        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-      }
+export function password(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'password' });
+}
 
-      .jux-input-element:disabled {
-        background-color: #f3f4f6;
-        cursor: not-allowed;
-      }
+export function tel(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'tel' });
+}
 
-      .jux-input-element.jux-input-invalid {
-        border-color: #ef4444;
-      }
+export function url(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'url' });
+}
 
-      .jux-input-element.jux-input-invalid:focus {
-        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
-      }
+export function textarea(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'textarea' });
+}
 
-      .jux-input-error {
-        color: #ef4444;
-        font-size: 12px;
-        margin-top: 4px;
-      }
+export function range(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'range' });
+}
 
-      .jux-input-counter {
-        text-align: right;
-        font-size: 12px;
-        color: #6b7280;
-        margin-top: 4px;
-      }
-    `;
-    document.head.appendChild(style);
-  }
+export function date(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'date' });
+}
 
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Input.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
+export function time(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'time' });
 }
 
-export function input(id: string, options: InputOptions = {}): Input {
-  return new Input(id, options);
+export function color(id: string, options?: Omit<InputOptions, 'type'>): Input {
+  return new Input(id, { ...options, type: 'color' });
 }