juxscript 1.1.4 → 1.1.6

package/lib/components/input.ts

@@ -0,0 +1,457 @@
+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 });
+}

package/lib/components/list.d.ts

@@ -0,0 +1,82 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface ListItem {
+    id?: string;
+    icon?: string;
+    title?: string;
+    body?: string;
+    type?: 'success' | 'warning' | 'error' | 'info' | 'default' | string;
+    metadata?: string;
+    itemClass?: string;
+    disabled?: boolean;
+    selected?: boolean;
+    data?: any;
+}
+export interface ListOptions {
+    items?: (ListItem | string)[];
+    header?: string;
+    gap?: string;
+    direction?: 'vertical' | 'horizontal';
+    selectable?: boolean;
+    multiSelect?: boolean;
+    selectedIndex?: number | null;
+    selectedIndices?: number[];
+    onItemClick?: (item: ListItem, index: number, e: Event) => void;
+    onItemDoubleClick?: (item: ListItem, index: number, e: Event) => void;
+    onSelectionChange?: (selectedItems: ListItem[], selectedIndices: number[]) => void;
+    ordered?: boolean;
+    striped?: boolean;
+    hoverable?: boolean;
+    bordered?: boolean;
+    style?: string;
+    class?: string;
+}
+type ListState = {
+    items: ListItem[];
+    header: string;
+    gap: string;
+    direction: string;
+    selectable: boolean;
+    multiSelect: boolean;
+    selectedIndex: number | null;
+    selectedIndices: number[];
+    ordered: boolean;
+    striped: boolean;
+    hoverable: boolean;
+    bordered: boolean;
+    style: string;
+    class: string;
+};
+export declare class List extends BaseComponent<ListState> {
+    private _onItemClick;
+    private _onItemDoubleClick;
+    private _onSelectionChange;
+    private _listElement;
+    constructor(id: string, options?: ListOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    items(value: (ListItem | string)[]): this;
+    addItem(value: ListItem | string): this;
+    removeItem(index: number): this;
+    updateItem(index: number, updates: Partial<ListItem>): this;
+    clearItems(): this;
+    itemClass(className: string): this;
+    ordered(value: boolean): this;
+    selectable(value: boolean): this;
+    multiSelect(value: boolean): this;
+    striped(value: boolean): this;
+    hoverable(value: boolean): this;
+    bordered(value: boolean): this;
+    selectItem(index: number): this;
+    deselectItem(index: number): this;
+    clearSelection(): this;
+    getSelectedItems(): ListItem[];
+    getSelectedIndices(): number[];
+    private _updateList;
+    private _updateSelection;
+    private _triggerSelectionChange;
+    private _renderItems;
+    render(targetId?: string): this;
+}
+export declare function list(id: string, options?: ListOptions): List;
+export {};
+//# sourceMappingURL=list.d.ts.map

package/lib/components/list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["list.ts"],"names":[],"mappings":"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"}