juxscript 1.1.3 → 1.1.5

package/lib/components/input.ts

@@ -1,457 +0,0 @@
-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;
-
-export interface InputOptions {
-  type?: string;
-  value?: string;
-  placeholder?: string;
-  label?: string;
-  icon?: string;
-  required?: boolean;
-  disabled?: boolean;
-  name?: string;
-  rows?: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string;
-  onValidate?: (value: string) => boolean | string;
-  style?: string;
-  class?: string;
-}
-
-interface InputState extends FormInputState {
-  type: string;
-  value: string;
-  placeholder: string;
-  icon: string;
-  rows: number;
-  min?: number;
-  max?: number;
-  step?: number;
-  minLength?: number;
-  maxLength?: number;
-  pattern?: string;
-}
-
-export class Input extends FormInput<InputState> {
-  constructor(id: string, options: InputOptions = {}) {
-    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,
-      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 ?? '',
-      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
-   * ═════════════════════════════════════════════════════════════════ */
-
-  // ✅ 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;
-    return this;
-  }
-
-  value(value: string | number): this {
-    return this.setValue(String(value));
-  }
-
-  placeholder(value: string): this {
-    this.state.placeholder = value;
-    return this;
-  }
-
-  icon(value: string): this {
-    this.state.icon = value;
-    return this;
-  }
-
-  rows(value: number): this {
-    this.state.rows = value;
-    return this;
-  }
-
-  min(value: number): this {
-    this.state.min = value;
-    return this;
-  }
-
-  max(value: number): this {
-    this.state.max = value;
-    return this;
-  }
-
-  step(value: number): this {
-    this.state.step = value;
-    return this;
-  }
-
-  minLength(value: number): this {
-    this.state.minLength = value;
-    return this;
-  }
-
-  maxLength(value: number): this {
-    this.state.maxLength = value;
-    return this;
-  }
-
-  pattern(value: string): this {
-    this.state.pattern = value;
-    return this;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FORM INPUT IMPLEMENTATION
-   * ═════════════════════════════════════════════════════════════════ */
-
-  getValue(): string {
-    return this.state.value;
-  }
-
-  setValue(value: string): this {
-    this.state.value = value;
-    if (this._inputElement) {
-      (this._inputElement as HTMLInputElement | HTMLTextAreaElement).value = value;
-    }
-    return this;
-  }
-
-  getNumericValue(): number | null {
-    const num = Number(this.state.value);
-    return isNaN(num) ? null : num;
-  }
-
-  protected _validateValue(value: string): boolean | string {
-    const { required, type, min, max, minLength, maxLength, pattern } = this.state;
-
-    if (required && !value.trim()) {
-      return 'This field is required';
-    }
-
-    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}`;
-      }
-    }
-
-    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`;
-      }
-    }
-
-    if (pattern && value) {
-      const regex = new RegExp(pattern);
-      if (!regex.test(value)) {
-        return 'Invalid format';
-      }
-    }
-
-    if (this._onValidate) {
-      const result = this._onValidate(value);
-      if (result !== true) {
-        return result || 'Invalid value';
-      }
-    }
-
-    return true;
-  }
-
-  protected _buildInputElement(): HTMLElement {
-    const { type, value, placeholder, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern } = this.state;
-
-    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;
-
-    return inputEl;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string): this {
-    const container = this._setupContainer(targetId);
-
-    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);
-
-    // Label
-    if (this.state.label) {
-      wrapper.appendChild(this._renderLabel());
-    }
-
-    // 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);
-    }
-
-    // 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 = `${this.state.value.length}/${maxLength}`;
-      wrapper.appendChild(counterEl);
-
-      inputEl.addEventListener('input', () => {
-        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;
-
-        // 🎯 Fire the input callback event
-        this._triggerCallback('input', input.value);
-      });
-    }
-
-    // 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 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);
-
-
-    requestAnimationFrame(() => {
-      if ((window as any).lucide) {
-        (window as any).lucide.createIcons();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function input(id: string, options: InputOptions = {}): Input {
-  return new Input(id, options);
-}
-
-// Shorter, consistent naming
-export function text(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'text' });
-}
-
-export function textRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'text', required: true });
-}
-
-
-export function number(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'number' });
-}
-
-
-export function numberRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'number', required: true });
-}
-
-
-export function email(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'email' });
-}
-
-export function emailRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'email', required: true });
-}
-
-export function password(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'password' });
-}
-
-export function passwordRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'password', required: true });
-}
-
-export function tel(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel' });
-}
-
-export function telRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel', required: true });
-}
-
-export function phone(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel' });
-}
-export function phoneRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'tel', required: true });
-}
-
-export function url(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'url' });
-}
-
-export function urlRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'url', required: true });
-}
-export function textarea(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'textarea' });
-}
-export function textareaRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'textarea', required: true });
-}
-
-export function range(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'range' });
-}
-
-export function rangeRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'range', required: true });
-}
-
-
-export function date(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'date' });
-}
-
-
-export function dateRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'date', required: true });
-}
-
-export function time(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'time' });
-}
-
-export function timeRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'time', required: true });
-}
-
-export function color(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'color' });
-}
-
-export function colorRequired(id: string, options?: Omit<InputOptions, 'type'>): Input {
-  return new Input(id, { ...options, type: 'color', required: true });
-}