juxscript 1.0.20 → 1.0.21

package/lib/components/list.ts

@@ -1,13 +1,21 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.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;
+
 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 {
@@ -16,9 +24,16 @@ export interface ListOptions {
   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;
 }
@@ -29,411 +44,493 @@ type ListState = {
   gap: string;
   direction: string;
   selectable: boolean;
+  multiSelect: boolean;
   selectedIndex: number | null;
-  ordered?: boolean;
+  selectedIndices: number[];
+  ordered: boolean;
+  striped: boolean;
+  hoverable: boolean;
+  bordered: boolean;
   style: string;
   class: string;
 };
 
-export class List {
-  state: ListState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // CRITICAL: Store bind/sync instructions for deferred wiring
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-  private _syncBindings: Array<{
-    property: string,
-    stateObj: State<any>,
-    toState?: Function,
-    toComponent?: Function
-  }> = [];
-  
+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;
   }
 
   addItem(value: ListItem): this {
     this.state.items = [...this.state.items, value];
+    this._updateList();
     return this;
   }
 
-  ordered(value: boolean): this {
-    this.state.ordered = value;
+  removeItem(index: number): this {
+    this.state.items = this.state.items.filter((_, i) => i !== index);
+    this._updateList();
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = 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;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  clearItems(): this {
+    this.state.items = [];
+    this._updateList();
     return this;
   }
 
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
+  itemClass(className: string): this {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      itemClass: className
+    }));
+    this._updateList();
     return this;
   }
 
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`List.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
+  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;
-
-    const existingWrapper = this.container.querySelector(`#${this._id}`);
-    if (existingWrapper) {
-      existingWrapper.remove();
-    }
-
-    this._buildAndAppendList();
+  getSelectedIndices(): number[] {
+    return this.state.selectedIndices;
   }
 
-  private _buildAndAppendList(): 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.style.display = 'flex';
-        iconEl.style.alignItems = 'center';
-        iconEl.style.justifyContent = 'center';
-        const iconElement = renderIcon(item.icon);
-        iconEl.appendChild(iconElement);
-        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);
+      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);
+          }
 
-      // Event binding - click handlers
-      itemEl.addEventListener('click', (e) => {
-        if (selectable) {
-          this.select(index);
-        }
+          // 🎯 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 {
-    // === 1. SETUP: Get or create container ===
-    let container: HTMLElement;
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`List: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    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`;
 
-    // === 2. PREPARE: Destructure state ===
-    const { items, ordered, style, class: className } = this.state;
+    // Header
+    if (header) {
+      const headerEl = document.createElement('div');
+      headerEl.className = 'jux-list-header';
+      headerEl.textContent = header;
+      wrapper.appendChild(headerEl);
+    }
 
-    // === 3. BUILD: Create DOM elements ===
+    // 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);
 
-    items.forEach(item => {
-      const li = document.createElement('li');
-      li.className = 'jux-list-item';
-      
-      // Handle ListItem object
-      if (item.title) {
-        li.textContent = item.title;
-      }
-      if (item.body) {
-        const bodyEl = document.createElement('div');
-        bodyEl.textContent = item.body;
-        li.appendChild(bodyEl);
-      }
-      
-      list.appendChild(li);
-    });
+    this._listElement = list;
+    this._renderItems(list);
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
+    wrapper.appendChild(list);
 
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      list.addEventListener(event, handler as EventListener);
-    });
+    this._wireStandardEvents(list);
 
-    // Wire sync bindings from .sync() calls
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'items') {
-        const transformToComponent = toComponent || ((v: any) => v);
+        const transform = toComponent || ((v: any) => v);
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           this.state.items = transformed;
+          this._updateList();
+        });
+      }
+      else if (property === 'selectedIndices') {
+        const transform = toComponent || ((v: any) => v);
 
-          // Re-render items
-          list.innerHTML = '';
-          transformed.forEach((item: ListItem) => {
-            const li = document.createElement('li');
-            li.className = 'jux-list-item';
-            
-            // Handle ListItem object
-            if (item.title) {
-              li.textContent = item.title;
-            }
-            if (item.body) {
-              const bodyEl = document.createElement('div');
-              bodyEl.textContent = item.body;
-              li.appendChild(bodyEl);
-            }
-            
-            list.appendChild(li);
-          });
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.selectedIndices = transformed;
+          this._updateSelection();
         });
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
-    container.appendChild(list);
+    container.appendChild(wrapper);
+    this._injectListStyles();
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }
 
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('List.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
+  private _injectListStyles(): void {
+    const styleId = 'jux-list-styles';
+    if (document.getElementById(styleId)) return;
+
+    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;
+      }
+
+      .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);
   }
 }