juxscript 1.0.2 → 1.0.4

package/lib/components/list.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * List item interface
@@ -23,6 +23,8 @@ export interface ListOptions {
   selectedIndex?: number | null;
   onItemClick?: (item: ListItem, index: number, e: Event) => void;
   onItemDoubleClick?: (item: ListItem, index: number, e: Event) => void;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -35,6 +37,8 @@ type ListState = {
   direction: string;
   selectable: boolean;
   selectedIndex: number | null;
+  style: string;
+  class: string;
 };
 
 /**
@@ -62,25 +66,29 @@ type ListState = {
  *   // Move item from index 0 to index 2
  *   myList.move(0, 2);
  */
-export class List extends Reactive {
-  state!: ListState;
+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;
 
-  constructor(componentId: string, options: ListOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
-    this.state = this._createReactiveState({
+  constructor(id: string, options: ListOptions = {}) {
+    this._id = id;
+    this.id = id;
+
+    this.state = {
       items: options.items ?? [],
       header: options.header ?? '',
       gap: options.gap ?? '0.5rem',
       direction: options.direction ?? 'vertical',
       selectable: options.selectable ?? false,
-      selectedIndex: options.selectedIndex ?? null
-    }) as ListState;
-    
+      selectedIndex: options.selectedIndex ?? null,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+
     this._onItemClick = options.onItemClick ?? null;
     this._onItemDoubleClick = options.onItemDoubleClick ?? null;
   }
@@ -114,22 +122,31 @@ export class List extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = 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.emit('itemAdded', { item, index });
     this._updateDOM();
     return this;
   }
@@ -139,10 +156,10 @@ export class List extends Reactive {
       console.error(`List: Invalid index ${index} for remove`);
       return this;
     }
-    
+
     const items = [...this.state.items];
-    const removed = items.splice(index, 1)[0];
-    
+    items.splice(index, 1);
+
     // Adjust selected index
     if (this.state.selectedIndex !== null) {
       if (this.state.selectedIndex === index) {
@@ -151,33 +168,32 @@ export class List extends Reactive {
         this.state.selectedIndex--;
       }
     }
-    
+
     this.state.items = items;
-    this.emit('itemRemoved', { item: removed, index });
     this._updateDOM();
     return this;
   }
 
   move(fromIndex: number, toIndex: number): this {
     const items = [...this.state.items];
-    
+
     if (fromIndex < 0 || fromIndex >= items.length) {
       console.error(`List: Invalid fromIndex ${fromIndex}`);
       return this;
     }
-    
+
     if (toIndex < 0 || toIndex >= items.length) {
       console.error(`List: Invalid toIndex ${toIndex}`);
       return this;
     }
-    
+
     if (fromIndex === toIndex) {
       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) {
@@ -188,9 +204,8 @@ export class List extends Reactive {
         this.state.selectedIndex++;
       }
     }
-    
+
     this.state.items = items;
-    this.emit('itemMoved', { item: movedItem, fromIndex, toIndex });
     this._updateDOM();
     return this;
   }
@@ -200,16 +215,8 @@ export class List extends Reactive {
       console.error(`List: Invalid index ${index} for select`);
       return this;
     }
-    
-    const previousIndex = this.state.selectedIndex;
+
     this.state.selectedIndex = index;
-    
-    this.emit('itemSelect', { 
-      item: this.state.items[index], 
-      index,
-      previousIndex 
-    });
-    
     this._updateDOM();
     return this;
   }
@@ -218,11 +225,8 @@ export class List extends Reactive {
     if (this.state.selectedIndex === null) {
       return this;
     }
-    
-    const previousIndex = this.state.selectedIndex;
+
     this.state.selectedIndex = null;
-    
-    this.emit('itemDeselect', { previousIndex });
     this._updateDOM();
     return this;
   }
@@ -243,7 +247,7 @@ export class List extends Reactive {
 
   private _updateDOM(): void {
     if (!this.container) return;
-    
+
     // Clear and re-render
     this.container.innerHTML = '';
     this._renderContent();
@@ -251,13 +255,21 @@ export class List extends Reactive {
 
   private _renderContent(): void {
     if (!this.container) return;
-    
-    const { items, header, gap, direction, selectable, selectedIndex } = this.state;
-    
+
+    const { items, header, gap, direction, selectable, selectedIndex, style, class: className } = this.state;
+
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-list-wrapper';
-    wrapper.id = this._componentId;
-    
+    wrapper.id = this._id;
+
+    if (className) {
+      wrapper.className += ` ${className}`;
+    }
+
+    if (style) {
+      wrapper.setAttribute('style', style);
+    }
+
     // Header
     if (header) {
       const headerEl = document.createElement('div');
@@ -265,21 +277,21 @@ export class List extends Reactive {
       headerEl.textContent = header;
       wrapper.appendChild(headerEl);
     }
-    
+
     // List container
     const listContainer = document.createElement('div');
     listContainer.className = `jux-list jux-list-${direction}`;
     listContainer.style.gap = gap;
-    
+
     // Render items
     items.forEach((item, index) => {
       const itemEl = document.createElement('div');
       itemEl.className = `jux-list-item jux-list-item-${item.type || 'default'}`;
-      
+
       if (selectable && selectedIndex === index) {
         itemEl.classList.add('jux-list-item-selected');
       }
-      
+
       // Icon
       if (item.icon) {
         const iconEl = document.createElement('span');
@@ -287,27 +299,27 @@ export class List extends Reactive {
         iconEl.textContent = item.icon;
         itemEl.appendChild(iconEl);
       }
-      
+
       // Content
       const contentEl = document.createElement('div');
       contentEl.className = 'jux-list-item-content';
-      
+
       if (item.title) {
         const titleEl = document.createElement('div');
         titleEl.className = 'jux-list-item-title';
         titleEl.textContent = item.title;
         contentEl.appendChild(titleEl);
       }
-      
+
       if (item.body) {
         const bodyEl = document.createElement('div');
         bodyEl.className = 'jux-list-item-body';
         bodyEl.textContent = item.body;
         contentEl.appendChild(bodyEl);
       }
-      
+
       itemEl.appendChild(contentEl);
-      
+
       // Metadata
       if (item.metadata) {
         const metadataEl = document.createElement('span');
@@ -315,30 +327,27 @@ export class List extends Reactive {
         metadataEl.textContent = item.metadata;
         itemEl.appendChild(metadataEl);
       }
-      
+
       listContainer.appendChild(itemEl);
-      
+
       // Event binding - click handlers
       itemEl.addEventListener('click', (e) => {
         if (selectable) {
           this.select(index);
         }
-        
-        this.emit('itemClick', { item, index, event: e });
-        
+
         if (this._onItemClick) {
           this._onItemClick(item, index, e);
         }
       });
-      
+
       if (this._onItemDoubleClick) {
         itemEl.addEventListener('dblclick', (e) => {
-          this.emit('itemDoubleClick', { item, index, event: e });
           this._onItemDoubleClick!(item, index, e);
         });
       }
     });
-    
+
     wrapper.appendChild(listContainer);
     this.container.appendChild(wrapper);
   }
@@ -349,7 +358,7 @@ export class List extends Reactive {
 
   render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -357,14 +366,14 @@ export class List extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
     this.container.innerHTML = '';
-    
+
     this._renderContent();
-    
+
     return this;
   }
 
@@ -375,18 +384,18 @@ export class List extends Reactive {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('List.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('List.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('List.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function list(componentId: string, options: ListOptions = {}): List {
-  return new List(componentId, options);
+export function list(id: string, options: ListOptions = {}): List {
+  return new List(id, options);
 }

package/lib/components/loading.ts

@@ -0,0 +1,263 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Loading component options
+ */
+export interface LoadingOptions {
+    variant?: 'spinner' | 'dots' | 'pulse' | 'skeleton';
+    size?: 'sm' | 'md' | 'lg';
+    text?: string;
+    fullscreen?: boolean;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Loading component state
+ */
+type LoadingState = {
+    variant: string;
+    size: string;
+    text: string;
+    fullscreen: boolean;
+    style: string;
+    class: string;
+};
+
+/**
+ * Loading component - Spinners, skeletons, loading indicators
+ * 
+ * Usage:
+ *   jux.loading('my-spinner', {
+ *     variant: 'spinner',
+ *     size: 'lg',
+ *     text: 'Loading...'
+ *   }).render('#app');
+ * 
+ *   // Fullscreen overlay
+ *   jux.loading('loading-overlay', {
+ *     variant: 'spinner',
+ *     fullscreen: true,
+ *     text: 'Please wait...'
+ *   }).render();
+ * 
+ * Variants: spinner, dots, pulse, skeleton
+ */
+export class Loading {
+    state: LoadingState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: LoadingOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            variant: options.variant ?? 'spinner',
+            size: options.size ?? 'md',
+            text: options.text ?? '',
+            fullscreen: options.fullscreen ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    variant(value: 'spinner' | 'dots' | 'pulse' | 'skeleton'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    fullscreen(value: boolean): this {
+        this.state.fullscreen = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Methods
+     * ------------------------- */
+
+    /**
+     * Show the loading indicator
+     */
+    show(): void {
+        const element = document.getElementById(this._id);
+        if (element) {
+            element.style.display = 'flex';
+        }
+    }
+
+    /**
+     * Hide the loading indicator
+     */
+    hide(): void {
+        const element = document.getElementById(this._id);
+        if (element) {
+            element.style.display = 'none';
+        }
+    }
+
+    /**
+     * Remove the loading indicator
+     */
+    remove(): void {
+        const element = document.getElementById(this._id);
+        if (element) {
+            element.remove();
+        }
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _renderSpinner(): HTMLElement {
+        const spinner = document.createElement('div');
+        spinner.className = 'jux-loading-spinner';
+        return spinner;
+    }
+
+    private _renderDots(): HTMLElement {
+        const dots = document.createElement('div');
+        dots.className = 'jux-loading-dots';
+        for (let i = 0; i < 3; i++) {
+            const dot = document.createElement('div');
+            dot.className = 'jux-loading-dot';
+            dots.appendChild(dot);
+        }
+        return dots;
+    }
+
+    private _renderPulse(): HTMLElement {
+        const pulse = document.createElement('div');
+        pulse.className = 'jux-loading-pulse';
+        return pulse;
+    }
+
+    private _renderSkeleton(): HTMLElement {
+        const skeleton = document.createElement('div');
+        skeleton.className = 'jux-loading-skeleton';
+
+        // Create 3 skeleton lines
+        for (let i = 0; i < 3; i++) {
+            const line = document.createElement('div');
+            line.className = 'jux-loading-skeleton-line';
+            if (i === 2) line.style.width = '60%'; // Last line shorter
+            skeleton.appendChild(line);
+        }
+        return skeleton;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Loading: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { variant, size, text, fullscreen, style, class: className } = this.state;
+
+        const loading = document.createElement('div');
+        loading.className = `jux-loading jux-loading-${size}`;
+        loading.id = this._id;
+
+        if (fullscreen) {
+            loading.className += ' jux-loading-fullscreen';
+        }
+
+        if (className) {
+            loading.className += ` ${className}`;
+        }
+
+        if (style) {
+            loading.setAttribute('style', style);
+        }
+
+        // Render appropriate variant
+        let indicator: HTMLElement;
+        switch (variant) {
+            case 'dots':
+                indicator = this._renderDots();
+                break;
+            case 'pulse':
+                indicator = this._renderPulse();
+                break;
+            case 'skeleton':
+                indicator = this._renderSkeleton();
+                break;
+            case 'spinner':
+            default:
+                indicator = this._renderSpinner();
+        }
+
+        loading.appendChild(indicator);
+
+        // Optional text
+        if (text) {
+            const textEl = document.createElement('div');
+            textEl.className = 'jux-loading-text';
+            textEl.textContent = text;
+            loading.appendChild(textEl);
+        }
+
+        container.appendChild(loading);
+        return this;
+    }
+
+    /**
+     * Render to another Jux component's container
+     */
+    renderTo(juxComponent: any): this {
+        if (!juxComponent || typeof juxComponent !== 'object') {
+            throw new Error('Loading.renderTo: Invalid component - not an object');
+        }
+
+        if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+            throw new Error('Loading.renderTo: Invalid component - missing _id (not a Jux component)');
+        }
+
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function loading(id: string, options: LoadingOptions = {}): Loading {
+    return new Loading(id, options);
+}