juxscript 1.0.19 → 1.0.21

package/lib/components/list.ts

@@ -1,401 +1,539 @@
-import { getOrCreateContainer } from './helpers.js';
+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;
 
-/**
- * List item interface
- */
 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
 }
 
-/**
- * List component options
- */
 export interface ListOptions {
   items?: 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;
 }
 
-/**
- * List component state
- */
 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;
 };
 
-/**
- * List component - renders a list of items with optional header
- * 
- * Usage:
- *   const myList = jux.list('myList', { 
- *     header: '✓ Accomplishments',
- *     items: [
- *       { icon: '✓', title: 'Task 1', body: 'Description', type: 'success' },
- *       { icon: '⚠️', title: 'Task 2', body: 'Description', type: 'warning' }
- *     ],
- *     gap: '0.75rem',
- *     selectable: true,
- *     onItemClick: (item, index) => console.log('Clicked:', item, index)
- *   });
- *   myList.render();
- *   
- *   // Add item
- *   myList.add({ icon: '🎉', title: 'New Task', body: 'Done!', type: 'success' });
- *   
- *   // Remove item by index
- *   myList.remove(1);
- *   
- *   // Move item from index 0 to index 2
- *   myList.move(0, 2);
- */
-export class List {
-  state: ListState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-  private _onItemClick: ((item: ListItem, index: number, e: Event) => void) | null;
-  private _onItemDoubleClick: ((item: ListItem, index: number, e: Event) => void) | null;
+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 = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       items: options.items ?? [],
       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;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   items(value: ListItem[]): this {
     this.state.items = value;
+    this._updateList();
     return this;
   }
 
-  header(value: string): this {
-    this.state.header = value;
+  addItem(value: ListItem): this {
+    this.state.items = [...this.state.items, value];
+    this._updateList();
     return this;
   }
 
-  gap(value: string): this {
-    this.state.gap = value;
+  removeItem(index: number): this {
+    this.state.items = this.state.items.filter((_, i) => i !== index);
+    this._updateList();
     return this;
   }
 
-  direction(value: 'vertical' | 'horizontal'): this {
-    this.state.direction = value;
+  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;
   }
 
-  selectable(value: boolean): this {
-    this.state.selectable = value;
+  clearItems(): this {
+    this.state.items = [];
+    this._updateList();
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  itemClass(className: string): this {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      itemClass: className
+    }));
+    this._updateList();
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  ordered(value: boolean): this {
+    this.state.ordered = value;
     return this;
   }
 
-  /* -------------------------
-   * List operations
-   * ------------------------- */
-
-  add(item: ListItem, index?: number): this {
-    const items = [...this.state.items];
-
-    if (typeof index === 'number' && index >= 0 && index <= items.length) {
-      items.splice(index, 0, item);
-    } else {
-      index = items.length;
-      items.push(item);
-    }
-
-    this.state.items = items;
-    this._updateDOM();
+  selectable(value: boolean): this {
+    this.state.selectable = value;
     return this;
   }
 
-  remove(index: number): this {
-    if (typeof index !== 'number' || index < 0 || index >= this.state.items.length) {
-      console.error(`List: Invalid index ${index} for remove`);
-      return this;
-    }
-
-    const items = [...this.state.items];
-    items.splice(index, 1);
-
-    // Adjust selected index
-    if (this.state.selectedIndex !== null) {
-      if (this.state.selectedIndex === index) {
-        this.state.selectedIndex = null;
-      } else if (this.state.selectedIndex > index) {
-        this.state.selectedIndex--;
-      }
-    }
-
-    this.state.items = items;
-    this._updateDOM();
+  multiSelect(value: boolean): this {
+    this.state.multiSelect = value;
     return this;
   }
 
-  move(fromIndex: number, toIndex: number): this {
-    const items = [...this.state.items];
+  striped(value: boolean): this {
+    this.state.striped = value;
+    return this;
+  }
 
-    if (fromIndex < 0 || fromIndex >= items.length) {
-      console.error(`List: Invalid fromIndex ${fromIndex}`);
-      return this;
-    }
+  hoverable(value: boolean): this {
+    this.state.hoverable = value;
+    return this;
+  }
 
-    if (toIndex < 0 || toIndex >= items.length) {
-      console.error(`List: Invalid toIndex ${toIndex}`);
-      return this;
-    }
+  bordered(value: boolean): this {
+    this.state.bordered = value;
+    return this;
+  }
 
-    if (fromIndex === toIndex) {
-      return this;
-    }
+  selectItem(index: number): this {
+    if (!this.state.selectable) return this;
 
-    const [movedItem] = items.splice(fromIndex, 1);
-    items.splice(toIndex, 0, movedItem);
-
-    // Adjust selected index
-    if (this.state.selectedIndex !== null) {
-      if (this.state.selectedIndex === fromIndex) {
-        this.state.selectedIndex = toIndex;
-      } else if (fromIndex < this.state.selectedIndex && toIndex >= this.state.selectedIndex) {
-        this.state.selectedIndex--;
-      } else if (fromIndex > this.state.selectedIndex && toIndex <= this.state.selectedIndex) {
-        this.state.selectedIndex++;
+    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.state.items = items;
-    this._updateDOM();
+    this._updateSelection();
+    this._triggerSelectionChange();
     return this;
   }
 
-  select(index: number): this {
-    if (index < 0 || index >= this.state.items.length) {
-      console.error(`List: Invalid index ${index} for select`);
-      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.state.selectedIndex = index;
-    this._updateDOM();
+    this._updateSelection();
+    this._triggerSelectionChange();
     return this;
   }
 
-  deselect(): this {
-    if (this.state.selectedIndex === null) {
-      return this;
-    }
-
+  clearSelection(): this {
     this.state.selectedIndex = null;
-    this._updateDOM();
+    this.state.selectedIndices = [];
+    this._updateSelection();
+    this._triggerSelectionChange();
     return this;
   }
 
-  getSelected(): { item: ListItem; index: number } | null {
-    if (this.state.selectedIndex === null) {
-      return null;
-    }
-    return {
-      item: this.state.items[this.state.selectedIndex],
-      index: this.state.selectedIndex
-    };
+  getSelectedItems(): ListItem[] {
+    return this.state.selectedIndices.map(i => this.state.items[i]).filter(Boolean);
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _updateDOM(): void {
-    if (!this.container) return;
-
-    // Clear and re-render
-    this.container.innerHTML = '';
-    this._renderContent();
+  getSelectedIndices(): number[] {
+    return this.state.selectedIndices;
   }
 
-  private _renderContent(): void {
-    if (!this.container) return;
+  /* ═════════════════════════════════════════════════════════════════
+   * PRIVATE HELPERS
+   * ═════════════════════════════════════════════════════════════════ */
 
-    const { items, header, gap, direction, selectable, selectedIndex, style, class: className } = this.state;
+  private _updateList(): void {
+    if (!this._listElement) return;
+    this._listElement.innerHTML = '';
+    this._renderItems(this._listElement);
+  }
 
-    const wrapper = document.createElement('div');
-    wrapper.className = 'jux-list-wrapper';
-    wrapper.id = this._id;
+  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);
+    });
+  }
 
-    if (className) {
-      wrapper.className += ` ${className}`;
-    }
+  private _triggerSelectionChange(): void {
+    const selectedItems = this.getSelectedItems();
+    const selectedIndices = this.getSelectedIndices();
 
-    if (style) {
-      wrapper.setAttribute('style', style);
+    if (this._onSelectionChange) {
+      this._onSelectionChange(selectedItems, selectedIndices);
     }
 
-    // Header
-    if (header) {
-      const headerEl = document.createElement('div');
-      headerEl.className = 'jux-list-header';
-      headerEl.textContent = header;
-      wrapper.appendChild(headerEl);
-    }
+    // 🎯 Fire the selectionChange callback event
+    this._triggerCallback('selectionChange', { items: selectedItems, indices: selectedIndices });
+  }
 
-    // List container
-    const listContainer = document.createElement('div');
-    listContainer.className = `jux-list jux-list-${direction}`;
-    listContainer.style.gap = gap;
+  private _renderItems(list: HTMLElement): void {
+    const { items, selectable, hoverable, striped, bordered } = this.state;
 
-    // Render items
     items.forEach((item, index) => {
-      const itemEl = document.createElement('div');
-      itemEl.className = `jux-list-item jux-list-item-${item.type || 'default'}`;
+      const li = document.createElement('li');
+      li.className = 'jux-list-item';
 
-      if (selectable && selectedIndex === index) {
-        itemEl.classList.add('jux-list-item-selected');
-      }
+      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.textContent = item.icon;
-        itemEl.appendChild(iconEl);
+        iconEl.appendChild(renderIcon(item.icon));
+        content.appendChild(iconEl);
       }
 
-      // Content
-      const contentEl = document.createElement('div');
-      contentEl.className = 'jux-list-item-content';
+      // 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;
-        contentEl.appendChild(titleEl);
+        textContainer.appendChild(titleEl);
       }
 
       if (item.body) {
         const bodyEl = document.createElement('div');
         bodyEl.className = 'jux-list-item-body';
         bodyEl.textContent = item.body;
-        contentEl.appendChild(bodyEl);
+        textContainer.appendChild(bodyEl);
       }
 
-      itemEl.appendChild(contentEl);
+      content.appendChild(textContainer);
 
       // Metadata
       if (item.metadata) {
-        const metadataEl = document.createElement('span');
-        metadataEl.className = 'jux-list-item-metadata';
-        metadataEl.textContent = item.metadata;
-        itemEl.appendChild(metadataEl);
+        const metaEl = document.createElement('div');
+        metaEl.className = 'jux-list-item-metadata';
+        metaEl.textContent = item.metadata;
+        content.appendChild(metaEl);
       }
 
-      listContainer.appendChild(itemEl);
-
-      // Event binding - click handlers
-      itemEl.addEventListener('click', (e) => {
-        if (selectable) {
-          this.select(index);
-        }
+      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 });
+        });
 
-        if (this._onItemClick) {
-          this._onItemClick(item, index, e);
-        }
-      });
+        li.addEventListener('dblclick', (e) => {
+          if (this._onItemDoubleClick) {
+            this._onItemDoubleClick(item, index, e);
+          }
 
-      if (this._onItemDoubleClick) {
-        itemEl.addEventListener('dblclick', (e) => {
-          this._onItemDoubleClick!(item, index, e);
+          // 🎯 Fire the itemDoubleClick callback event
+          this._triggerCallback('itemDoubleClick', { item, index, event: e });
         });
       }
-    });
 
-    wrapper.appendChild(listContainer);
-    this.container.appendChild(wrapper);
+      list.appendChild(li);
+    });
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
+    const container = this._setupContainer(targetId);
 
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`List: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
+    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);
     }
 
-    this.container = container;
-    this.container.innerHTML = '';
+    // 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._renderContent();
+    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);
+    this._injectListStyles();
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
 
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('List.renderTo: Invalid component - not an object');
-    }
+  private _injectListStyles(): void {
+    const styleId = 'jux-list-styles';
+    if (document.getElementById(styleId)) return;
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('List.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .jux-list-wrapper {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      }
+
+      .jux-list-header {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 12px;
+        color: #1f2937;
+      }
+
+      .jux-list {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .jux-list-ordered {
+        list-style: decimal;
+        padding-left: 20px;
+      }
+
+      .jux-list-item {
+        position: relative;
+        padding: 12px 16px;
+        transition: all 0.2s;
+        cursor: default;
+      }
 
-    return this.render(`#${juxComponent._id}`);
+      .jux-list-item-hoverable:not(.jux-list-item-disabled) {
+        cursor: pointer;
+      }
+
+      .jux-list-item-hoverable:not(.jux-list-item-disabled):hover {
+        background: #f3f4f6;
+      }
+
+      .jux-list-item-content {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+
+      .jux-list-item-icon {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .jux-list-item-icon svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .jux-list-item-text {
+        flex: 1;
+      }
+
+      .jux-list-item-title {
+        font-size: 14px;
+        font-weight: 500;
+        color: #1f2937;
+        margin-bottom: 2px;
+      }
+
+      .jux-list-item-body {
+        font-size: 13px;
+        color: #6b7280;
+        line-height: 1.4;
+      }
+
+      .jux-list-item-metadata {
+        flex-shrink: 0;
+        font-size: 12px;
+        color: #9ca3af;
+      }
+
+      .jux-list-item-selected {
+        background: #dbeafe !important;
+        border-left: 3px solid #3b82f6;
+      }
+
+      .jux-list-item-striped {
+        background: #f9fafb;
+      }
+
+      .jux-list-item-bordered {
+        border: 1px solid #e5e7eb;
+        border-radius: 6px;
+        margin-bottom: 4px;
+      }
+
+      .jux-list-item-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .jux-list-item-success {
+        border-left: 3px solid #10b981;
+      }
+
+      .jux-list-item-warning {
+        border-left: 3px solid #f59e0b;
+      }
+
+      .jux-list-item-error {
+        border-left: 3px solid #ef4444;
+      }
+
+      .jux-list-item-info {
+        border-left: 3px solid #3b82f6;
+      }
+    `;
+    document.head.appendChild(style);
   }
 }
 
-/**
- * Factory helper
- */
 export function list(id: string, options: ListOptions = {}): List {
   return new List(id, options);
 }