juxscript 1.1.2 → 1.1.4

package/lib/components/list.ts

@@ -1,419 +0,0 @@
-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

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