juxscript 1.0.131 → 1.1.0

package/lib/components/list.ts

@@ -0,0 +1,419 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['itemClick', 'itemDoubleClick', 'selectionChange'] as const;
+
+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; // Arbitrary data attached to item
+}
+
+export interface ListOptions {
+  items?: (ListItem | string)[]; // ✅ Allow string or ListItem
+  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 class List extends BaseComponent<ListState> {
+  private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null = null;
+  private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null = null;
+  private _onSelectionChange: ((selectedItems: ListItem[], selectedIndices: number[]) => void) | null = null;
+  private _listElement: HTMLElement | null = null;
+
+  constructor(id: string, options: ListOptions = {}) {
+    // ✅ Normalize items - convert strings to ListItem objects
+    const normalizedItems = (options.items ?? []).map(item =>
+      typeof item === 'string' ? { title: item } : item
+    );
+
+    super(id, {
+      items: normalizedItems,
+      header: options.header ?? '',
+      gap: options.gap ?? '0.5rem',
+      direction: options.direction ?? 'vertical',
+      selectable: options.selectable ?? false,
+      multiSelect: options.multiSelect ?? false,
+      selectedIndex: options.selectedIndex ?? null,
+      selectedIndices: options.selectedIndices ?? [],
+      ordered: options.ordered ?? false,
+      striped: options.striped ?? false,
+      hoverable: options.hoverable ?? true,
+      bordered: options.bordered ?? false,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+
+    this._onItemClick = options.onItemClick ?? null;
+    this._onItemDoubleClick = options.onItemDoubleClick ?? null;
+    this._onSelectionChange = options.onSelectionChange ?? null;
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  items(value: (ListItem | string)[]): this {
+    // ✅ Normalize items when setting via fluent API
+    this.state.items = value.map(item =>
+      typeof item === 'string' ? { title: item } : item
+    );
+    this._updateList();
+    return this;
+  }
+
+  addItem(value: ListItem | string): this {
+    // ✅ Normalize single item
+    const normalizedItem = typeof value === 'string' ? { title: value } : value;
+    this.state.items = [...this.state.items, normalizedItem];
+    this._updateList();
+    return this;
+  }
+
+  removeItem(index: number): this {
+    this.state.items = this.state.items.filter((_, i) => i !== index);
+    this._updateList();
+    return this;
+  }
+
+  updateItem(index: number, updates: Partial<ListItem>): this {
+    this.state.items = this.state.items.map((item, i) =>
+      i === index ? { ...item, ...updates } : item
+    );
+    this._updateList();
+    return this;
+  }
+
+  clearItems(): this {
+    this.state.items = [];
+    this._updateList();
+    return this;
+  }
+
+  itemClass(className: string): this {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      itemClass: className
+    }));
+    this._updateList();
+    return this;
+  }
+
+  ordered(value: boolean): this {
+    this.state.ordered = value;
+    return this;
+  }
+
+  selectable(value: boolean): this {
+    this.state.selectable = value;
+    return this;
+  }
+
+  multiSelect(value: boolean): this {
+    this.state.multiSelect = value;
+    return this;
+  }
+
+  striped(value: boolean): this {
+    this.state.striped = value;
+    return this;
+  }
+
+  hoverable(value: boolean): this {
+    this.state.hoverable = value;
+    return this;
+  }
+
+  bordered(value: boolean): this {
+    this.state.bordered = value;
+    return this;
+  }
+
+  selectItem(index: number): this {
+    if (!this.state.selectable) return this;
+
+    if (this.state.multiSelect) {
+      if (!this.state.selectedIndices.includes(index)) {
+        this.state.selectedIndices = [...this.state.selectedIndices, index];
+      }
+    } else {
+      this.state.selectedIndex = index;
+      this.state.selectedIndices = [index];
+    }
+
+    this._updateSelection();
+    this._triggerSelectionChange();
+    return this;
+  }
+
+  deselectItem(index: number): this {
+    if (!this.state.selectable) return this;
+
+    if (this.state.multiSelect) {
+      this.state.selectedIndices = this.state.selectedIndices.filter(i => i !== index);
+    } else {
+      this.state.selectedIndex = null;
+      this.state.selectedIndices = [];
+    }
+
+    this._updateSelection();
+    this._triggerSelectionChange();
+    return this;
+  }
+
+  clearSelection(): this {
+    this.state.selectedIndex = null;
+    this.state.selectedIndices = [];
+    this._updateSelection();
+    this._triggerSelectionChange();
+    return this;
+  }
+
+  getSelectedItems(): ListItem[] {
+    return this.state.selectedIndices.map(i => this.state.items[i]).filter(Boolean);
+  }
+
+  getSelectedIndices(): number[] {
+    return this.state.selectedIndices;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * PRIVATE HELPERS
+   * ═════════════════════════════════════════════════════════════════ */
+
+  private _updateList(): void {
+    if (!this._listElement) return;
+    this._listElement.innerHTML = '';
+    this._renderItems(this._listElement);
+  }
+
+  private _updateSelection(): void {
+    if (!this._listElement) return;
+    const items = this._listElement.querySelectorAll('.jux-list-item');
+    items.forEach((el, index) => {
+      const isSelected = this.state.selectedIndices.includes(index);
+      el.classList.toggle('jux-list-item-selected', isSelected);
+    });
+  }
+
+  private _triggerSelectionChange(): void {
+    const selectedItems = this.getSelectedItems();
+    const selectedIndices = this.getSelectedIndices();
+
+    if (this._onSelectionChange) {
+      this._onSelectionChange(selectedItems, selectedIndices);
+    }
+
+    // 🎯 Fire the selectionChange callback event
+    this._triggerCallback('selectionChange', { items: selectedItems, indices: selectedIndices });
+  }
+
+  private _renderItems(list: HTMLElement): void {
+    const { items, selectable, hoverable, striped, bordered } = this.state;
+
+    items.forEach((item, index) => {
+      const li = document.createElement('li');
+      li.className = 'jux-list-item';
+
+      if (item.itemClass) li.className += ` ${item.itemClass}`;
+      if (item.type && item.type !== 'default') li.classList.add(`jux-list-item-${item.type}`);
+      if (item.disabled) li.classList.add('jux-list-item-disabled');
+      if (this.state.selectedIndices.includes(index)) li.classList.add('jux-list-item-selected');
+      if (hoverable && !item.disabled) li.classList.add('jux-list-item-hoverable');
+      if (striped && index % 2 === 1) li.classList.add('jux-list-item-striped');
+      if (bordered) li.classList.add('jux-list-item-bordered');
+
+      // Content container
+      const content = document.createElement('div');
+      content.className = 'jux-list-item-content';
+
+      // Icon
+      if (item.icon) {
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-list-item-icon';
+        iconEl.appendChild(renderIcon(item.icon));
+        content.appendChild(iconEl);
+      }
+
+      // Text content
+      const textContainer = document.createElement('div');
+      textContainer.className = 'jux-list-item-text';
+
+      if (item.title) {
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-list-item-title';
+        titleEl.textContent = item.title;
+        textContainer.appendChild(titleEl);
+      }
+
+      if (item.body) {
+        const bodyEl = document.createElement('div');
+        bodyEl.className = 'jux-list-item-body';
+        bodyEl.textContent = item.body;
+        textContainer.appendChild(bodyEl);
+      }
+
+      content.appendChild(textContainer);
+
+      // Metadata
+      if (item.metadata) {
+        const metaEl = document.createElement('div');
+        metaEl.className = 'jux-list-item-metadata';
+        metaEl.textContent = item.metadata;
+        content.appendChild(metaEl);
+      }
+
+      li.appendChild(content);
+
+      // Click handlers
+      if (!item.disabled) {
+        li.addEventListener('click', (e) => {
+          if (selectable) {
+            if (this.state.selectedIndices.includes(index)) {
+              this.deselectItem(index);
+            } else {
+              if (!this.state.multiSelect) {
+                this.clearSelection();
+              }
+              this.selectItem(index);
+            }
+          }
+
+          if (this._onItemClick) {
+            this._onItemClick(item, index, e);
+          }
+
+          // 🎯 Fire the itemClick callback event
+          this._triggerCallback('itemClick', { item, index, event: e });
+        });
+
+        li.addEventListener('dblclick', (e) => {
+          if (this._onItemDoubleClick) {
+            this._onItemDoubleClick(item, index, e);
+          }
+
+          // 🎯 Fire the itemDoubleClick callback event
+          this._triggerCallback('itemDoubleClick', { item, index, event: e });
+        });
+      }
+
+      list.appendChild(li);
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { header, ordered, style, class: className } = this.state;
+
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-list-wrapper';
+    wrapper.id = `${this._id}-wrapper`;
+
+    // Header
+    if (header) {
+      const headerEl = document.createElement('div');
+      headerEl.className = 'jux-list-header';
+      headerEl.textContent = header;
+      wrapper.appendChild(headerEl);
+    }
+
+    // List
+    const list = document.createElement(ordered ? 'ol' : 'ul') as HTMLOListElement | HTMLUListElement;
+    list.className = `jux-list ${ordered ? 'jux-list-ordered' : 'jux-list-unordered'}`;
+    list.id = this._id;
+    if (className) list.className += ` ${className}`;
+    if (style) list.setAttribute('style', style);
+
+    this._listElement = list;
+    this._renderItems(list);
+
+    wrapper.appendChild(list);
+
+    this._wireStandardEvents(list);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'items') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.items = transformed;
+          this._updateList();
+        });
+      }
+      else if (property === 'selectedIndices') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.selectedIndices = transformed;
+          this._updateSelection();
+        });
+      }
+    });
+
+    container.appendChild(wrapper);
+
+    return this;
+  }
+}
+
+export function list(id: string, options: ListOptions = {}): List {
+  return new List(id, options);
+}

package/lib/components/loading.ts

@@ -0,0 +1,100 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface LoadingOptions {
+    variant?: 'spinner' | 'dots' | 'pulse';
+    size?: 'sm' | 'md' | 'lg';
+    style?: string;
+    class?: string;
+}
+
+type LoadingState = {
+    variant: string;
+    size: string;
+    style: string;
+    class: string;
+};
+
+export class Loading extends BaseComponent<LoadingState> {
+    constructor(id: string, options: LoadingOptions = {}) {
+        super(id, {
+            variant: options.variant ?? 'spinner',
+            size: options.size ?? 'md',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - visible(), show(), hide()
+
+    variant(value: 'spinner' | 'dots' | 'pulse'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { variant, size, style, class: className } = this.state;
+
+        const loading = document.createElement('div');
+        loading.className = `jux-loading jux-loading-${variant} jux-loading-${size}`;
+        loading.id = this._id;
+        if (className) loading.className += ` ${className}`;
+        if (style) loading.setAttribute('style', style);
+
+        // Build variant-specific content
+        if (variant === 'spinner') {
+            const spinner = document.createElement('div');
+            spinner.className = 'jux-loading-spinner';
+            loading.appendChild(spinner);
+        } else if (variant === 'dots') {
+            for (let i = 0; i < 3; i++) {
+                const dot = document.createElement('div');
+                dot.className = 'jux-loading-dot';
+                loading.appendChild(dot);
+            }
+        } else if (variant === 'pulse') {
+            const pulse = document.createElement('div');
+            pulse.className = 'jux-loading-pulse';
+            loading.appendChild(pulse);
+        }
+
+        this._wireStandardEvents(loading);
+
+        container.appendChild(loading);
+
+        return this;
+    }
+}
+
+export function loading(id: string, options: LoadingOptions = {}): Loading {
+    return new Loading(id, options);
+}