juxscript 1.0.19 → 1.0.21

package/lib/components/input.ts

@@ -1,14 +1,16 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change', 'input'] as const;
 
-/**
- * Input component options
- */
 export interface InputOptions {
   type?: string;
   value?: string;
   placeholder?: string;
   label?: string;
+  icon?: string;
   required?: boolean;
   disabled?: boolean;
   name?: string;
@@ -19,23 +21,16 @@ export interface InputOptions {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  onChange?: (value: string) => void;
   onValidate?: (value: string) => boolean | string;
   style?: string;
   class?: string;
 }
 
-/**
- * Input component state
- */
-type InputState = {
+interface InputState extends FormInputState {
   type: string;
   value: string;
   placeholder: string;
-  label: string;
-  required: boolean;
-  disabled: boolean;
-  name: string;
+  icon: string;
   rows: number;
   min?: number;
   max?: number;
@@ -43,39 +38,16 @@ type InputState = {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  style: string;
-  class: string;
-  errorMessage?: string;
-};
-
-/**
- * Input component
- */
-export class Input {
-  state: InputState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-  private _onChange?: (value: string) => void;
-  private _onValidate?: (value: string) => boolean | string;
-
-  // Store bind() instructions
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-
-  // Store sync() instructions
-  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._onChange = options.onChange;
-    this._onValidate = options.onValidate;
-
-    this.state = {
+    super(id, {
       type: options.type ?? 'text',
       value: options.value ?? '',
       placeholder: options.placeholder ?? '',
       label: options.label ?? '',
+      icon: options.icon ?? '',
       required: options.required ?? false,
       disabled: options.disabled ?? false,
       name: options.name ?? id,
@@ -87,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;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * 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;
@@ -101,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 {
@@ -111,24 +101,8 @@ export class Input {
     return this;
   }
 
-  label(value: string): this {
-    this.state.label = 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;
+  icon(value: string): this {
+    this.state.icon = value;
     return this;
   }
 
@@ -139,86 +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;
-  }
-
-  onChange(handler: (value: string) => void): this {
-    this._onChange = handler;
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FORM INPUT IMPLEMENTATION
+   * ═════════════════════════════════════════════════════════════════ */
 
-  onValidate(handler: (value: string) => boolean | string): this {
-    this._onValidate = handler;
-    return this;
+  getValue(): string {
+    return this.state.value;
   }
 
-  /**
-   * Bind event handler (stores for wiring in render)
-   */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
+  setValue(value: string): this {
+    this.state.value = value;
+    if (this._inputElement) {
+      (this._inputElement as HTMLInputElement | HTMLTextAreaElement).value = value;
+    }
     return this;
   }
 
-  /**
-   * 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 {
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    return this;
+  getNumericValue(): number | null {
+    const num = Number(this.state.value);
+    return isNaN(num) ? null : num;
   }
 
-  /* -------------------------
-   * Validation
-   * ------------------------- */
-
-  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()) {
@@ -268,137 +212,9 @@ 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';
-    }
-
-    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);
-
-    if (result === true) {
-      this._clearError();
-      return true;
-    } else {
-      this._showError(result as string);
-      return false;
-    }
-  }
-
-  /* -------------------------
-   * 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 (input instanceof HTMLTextAreaElement) {
-        if (this.state.minLength !== undefined) input.minLength = this.state.minLength;
-        if (this.state.maxLength !== undefined) input.maxLength = this.state.maxLength;
-      }
-    }
-  }
-
-  getValue(): string {
-    return this.state.value;
-  }
-
-  getNumericValue(): number | null {
-    const num = Number(this.state.value);
-    return isNaN(num) ? null : num;
-  }
-
-  isValid(): boolean {
-    return this._validate(this.state.value) === true;
-  }
-
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  render(targetId?: string): this {
-    let container: HTMLElement;
+  protected _buildInputElement(): HTMLElement {
+    const { type, value, placeholder, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern } = this.state;
 
-    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;
-    const { type, value, placeholder, label, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern, style, class: className } = this.state;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-input';
-    wrapper.id = this._id;
-
-    if (className) {
-      wrapper.className += ` ${className}`;
-    }
-
-    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 (label) {
-      wrapper.appendChild(labelEl);
-    }
-
-    // Input/Textarea
     let inputEl: HTMLInputElement | HTMLTextAreaElement;
 
     if (type === 'textarea') {
@@ -431,173 +247,157 @@ export class Input {
     inputEl.required = required;
     inputEl.disabled = disabled;
 
-    // Input event handler - from onChange option
-    inputEl.addEventListener('input', (e) => {
-      const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-      this.state.value = target.value;
+    return inputEl;
+  }
 
-      this._clearError();
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
-      if (this._onChange) {
-        this._onChange(target.value);
-      }
-    });
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
 
-    inputEl.addEventListener('blur', () => {
-      this.validate();
-    });
+    const { icon, maxLength, type, style, class: className } = this.state;
+
+    // Build wrapper
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-input';
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
-    wrapper.appendChild(inputEl);
+    // Label
+    if (this.state.label) {
+      wrapper.appendChild(this._renderLabel());
+    }
 
-    // Error message element
-    const errorEl = document.createElement('div');
-    errorEl.className = 'jux-input-error';
-    errorEl.id = `${this._id}-error`;
-    errorEl.style.display = 'none';
-    wrapper.appendChild(errorEl);
+    // 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';
+      iconEl.appendChild(renderIcon(icon));
+      inputContainer.appendChild(iconEl);
+    }
 
-    // Character counter for maxLength
+    // Input element
+    const inputEl = this._buildInputElement();
+    this._inputElement = inputEl;
+    inputContainer.appendChild(inputEl);
+    wrapper.appendChild(inputContainer);
+
+    // Error element
+    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);
 
       inputEl.addEventListener('input', () => {
-        counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
+        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
+        counterEl.textContent = `${input.value.length}/${maxLength}`;
+        this.state.value = input.value;
+
+        // 🎯 Fire the input callback event
+        this._triggerCallback('input', input.value);
       });
+    } else {
+      // Fire input event even without counter
+      inputEl.addEventListener('input', () => {
+        const input = inputEl as HTMLInputElement | HTMLTextAreaElement;
+        this.state.value = input.value;
 
-      wrapper.appendChild(counterEl);
+        // 🎯 Fire the input callback event
+        this._triggerCallback('input', input.value);
+      });
     }
 
-    container.appendChild(wrapper);
-    this._injectDefaultStyles();
-
-    // === Wire up event bindings ===
-    this._bindings.forEach(({ event, handler }) => {
-      wrapper.addEventListener(event, handler as EventListener);
+    // 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 sync bindings (TWO-WAY) ===
-    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);
-          stateObj.set(transformed);
-          setTimeout(() => { isUpdating = false; }, 0);
-        });
-      }
-      else if (property === 'label') {
-        // Sync label
-        const transformToComponent = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
-          labelEl.textContent = transformed;
-          this.state.label = transformed;
-        });
+    // Wire events
+    this._wireStandardEvents(wrapper);
+    this._wireFormSync(inputEl, 'input');
+
+    // 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._injectFormStyles();
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
       }
     });
 
     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;
-      }
+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' });
 }