juxscript 1.0.3 → 1.0.5

package/lib/components/input.ts

@@ -1,16 +1,28 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Input component options
  */
 export interface InputOptions {
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
-  label?: string;
-  placeholder?: string;
+  type?: string;
   value?: string;
+  placeholder?: string;
+  label?: string;
   required?: boolean;
   disabled?: boolean;
+  name?: string;
+  rows?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
   onChange?: (value: string) => void;
+  onValidate?: (value: string) => boolean | string;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -18,43 +30,82 @@ export interface InputOptions {
  */
 type InputState = {
   type: string;
-  label: string;
-  placeholder: string;
   value: string;
+  placeholder: string;
+  label: string;
   required: boolean;
   disabled: boolean;
-  onChange: ((value: string) => void) | null;
+  name: string;
+  rows: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  style: string;
+  class: string;
+  errorMessage?: string;
 };
 
 /**
- * Input component
+ * Input component - text input and textarea with validation
  * 
  * Usage:
- *   const input = jux.input('myInput', {
- *     label: 'Email',
- *     type: 'email',
- *     placeholder: 'Enter your email',
- *     onChange: (value) => console.log(value)
- *   });
- *   input.render();
+ *   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 extends Reactive {
-  state!: InputState;
+export class Input {
+  state: InputState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: InputOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  _id: string;
+  id: string;
+  private _onChange?: (value: string) => void;
+  private _onValidate?: (value: string) => boolean | string;
+  private _boundState?: State<string>;
+
+  constructor(id: string, options: InputOptions = {}) {
+    this._id = id;
+    this.id = id;
+    this._onChange = options.onChange;
+    this._onValidate = options.onValidate;
+
+    this.state = {
       type: options.type ?? 'text',
-      label: options.label ?? '',
-      placeholder: options.placeholder ?? '',
       value: options.value ?? '',
+      placeholder: options.placeholder ?? '',
+      label: options.label ?? '',
       required: options.required ?? false,
       disabled: options.disabled ?? false,
-      onChange: options.onChange ?? null
-    }) as InputState;
+      name: options.name ?? id,
+      rows: options.rows ?? 3,
+      min: options.min,
+      max: options.max,
+      step: options.step,
+      minLength: options.minLength,
+      maxLength: options.maxLength,
+      pattern: options.pattern,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -66,8 +117,9 @@ export class Input extends Reactive {
     return this;
   }
 
-  label(value: string): this {
-    this.state.label = value;
+  value(value: string | number): this {
+    this.state.value = String(value);
+    this._updateElement();
     return this;
   }
 
@@ -76,8 +128,8 @@ export class Input extends Reactive {
     return this;
   }
 
-  value(value: string): this {
-    this.state.value = value;
+  label(value: string): this {
+    this.state.label = value;
     return this;
   }
 
@@ -88,21 +140,268 @@ export class Input extends Reactive {
 
   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;
+  }
+
+  /**
+   * 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;
   }
 
-  onChange(callback: (value: string) => void): this {
-    this.state.onChange = callback;
+  /**
+   * Pattern validation for text inputs (regex)
+   */
+  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;
+  }
+
+  /**
+   * Custom validation function
+   * Should return true if valid, or an error message string if invalid
+   */
+  onValidate(handler: (value: string) => boolean | string): this {
+    this._onValidate = handler;
+    return this;
+  }
+
+  /**
+   * Two-way binding to state
+   */
+  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));
+
     return this;
   }
 
+  /* -------------------------
+   * Validation
+   * ------------------------- */
+
+  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);
+
+      if (isNaN(numValue)) {
+        return 'Must be a valid number';
+      }
+
+      if (min !== undefined && numValue < min) {
+        return `Must be at least ${min}`;
+      }
+
+      if (max !== undefined && numValue > max) {
+        return `Must be at most ${max}`;
+      }
+    }
+
+    // Text length validation
+    if ((type === 'text' || type === 'textarea') && value) {
+      if (minLength !== undefined && value.length < minLength) {
+        return `Must be at least ${minLength} characters`;
+      }
+
+      if (maxLength !== undefined && value.length > maxLength) {
+        return `Must be at most ${maxLength} characters`;
+      }
+    }
+
+    // Pattern validation
+    if (pattern && value) {
+      const regex = new RegExp(pattern);
+      if (!regex.test(value)) {
+        return 'Invalid format';
+      }
+    }
+
+    // Custom validation
+    if (this._onValidate) {
+      const result = this._onValidate(value);
+      if (result !== true) {
+        return result || 'Invalid value';
+      }
+    }
+
+    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;
+  }
+
+  /**
+   * Manually validate the current value
+   */
+  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;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -110,66 +409,198 @@ export class Input extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { type, label, placeholder, value, required, disabled, onChange } = this.state;
-    
+    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';
-    wrapper.id = this._componentId;
-    
+    wrapper.className = 'jux-input';
+    wrapper.id = this._id;
+
+    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;
-      labelEl.setAttribute('for', `${this._componentId}-input`);
+      if (required) {
+        const requiredSpan = document.createElement('span');
+        requiredSpan.className = 'jux-input-required';
+        requiredSpan.textContent = ' *';
+        labelEl.appendChild(requiredSpan);
+      }
       wrapper.appendChild(labelEl);
     }
-    
-    const input = document.createElement('input');
-    input.id = `${this._componentId}-input`;
-    input.className = 'jux-input';
-    input.type = type;
-    input.placeholder = placeholder;
-    input.value = value;
-    input.required = required;
-    input.disabled = disabled;
-    
-    wrapper.appendChild(input);
-    container.appendChild(wrapper);
-    
-    // Event binding - onChange
-    if (onChange) {
-      input.addEventListener('input', (e) => {
-        const target = e.target as HTMLInputElement;
-        onChange(target.value);
+
+    // Input/Textarea
+    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;
+
+      // 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;
+        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 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);
+
+    // 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);
+
+    // Character counter for maxLength
+    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}`;
+
+      inputEl.addEventListener('input', () => {
+        counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
       });
+
+      wrapper.appendChild(counterEl);
     }
-    
+
+    container.appendChild(wrapper);
+
+    // Add default styles if not already present
+    this._injectDefaultStyles();
+
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
+  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-label {
+        display: block;
+        margin-bottom: 6px;
+        font-weight: 500;
+        color: #374151;
+      }
+
+      .jux-input-required {
+        color: #ef4444;
+      }
+
+      .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;
+      }
+
+      .jux-input-element:focus {
+        outline: none;
+        border-color: #3b82f6;
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+      }
+
+      .jux-input-element:disabled {
+        background-color: #f3f4f6;
+        cursor: not-allowed;
+      }
+
+      .jux-input-element.jux-input-invalid {
+        border-color: #ef4444;
+      }
+
+      .jux-input-element.jux-input-invalid:focus {
+        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+      }
+
+      .jux-input-error {
+        color: #ef4444;
+        font-size: 12px;
+        margin-top: 4px;
+      }
+
+      .jux-input-counter {
+        text-align: right;
+        font-size: 12px;
+        color: #6b7280;
+        margin-top: 4px;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Input.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Input.renderTo: Invalid component');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Input.renderTo: Invalid component - missing _componentId (not a Jux component)');
-    }
-    
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
-export function input(componentId: string, options: InputOptions = {}): Input {
-  return new Input(componentId, options);
+export function input(id: string, options: InputOptions = {}): Input {
+  return new Input(id, options);
 }