juxscript 1.0.3 → 1.0.5

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);
+}

package/lib/components/main.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Main component options
@@ -6,6 +6,8 @@ import { Reactive, getOrCreateContainer } from './reactivity.js';
 export interface MainOptions {
   content?: string;
   padding?: string;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -14,6 +16,8 @@ export interface MainOptions {
 type MainState = {
   content: string;
   padding: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -26,18 +30,22 @@ type MainState = {
  *   });
  *   main.render('#appmain');
  */
-export class Main extends Reactive {
-  state!: MainState;
+export class Main {
+  state: MainState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: MainOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: MainOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       content: options.content ?? '',
-      padding: options.padding ?? 'var(--space-xl)'
-    }) as MainState;
+      padding: options.padding ?? 'var(--space-xl)',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -54,6 +62,16 @@ export class Main extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -68,17 +86,25 @@ export class Main extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { content, padding } = this.state;
+    const { content, padding, style, class: className } = this.state;
 
     const main = document.createElement('main');
     main.className = 'jux-main';
-    main.id = this._componentId;
+    main.id = this._id;
     main.style.padding = padding;
 
+    if (style) {
+      main.setAttribute('style', style);
+    }
+
+    if (className) {
+      main.className += ` ${className}`;
+    }
+
     if (content) {
       main.innerHTML = content;
     }
@@ -95,17 +121,17 @@ export class Main extends Reactive {
       throw new Error('Main.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Main.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Main.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function main(componentId: string, options: MainOptions = {}): Main {
-  return new Main(componentId, options);
+export function main(id: string, options: MainOptions = {}): Main {
+  return new Main(id, options);
 }

package/lib/components/menu.ts

@@ -1,4 +1,5 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
+import { req } from './req.js';
 
 /**
  * Menu item configuration
@@ -6,9 +7,10 @@ import { Reactive, getOrCreateContainer } from './reactivity.js';
 export interface MenuItem {
   label: string;
   href?: string;
-  onClick?: () => void;
+  click?: () => void;
   icon?: string;
   items?: MenuItem[];
+  active?: boolean;
 }
 
 /**
@@ -17,6 +19,8 @@ export interface MenuItem {
 export interface MenuOptions {
   items?: MenuItem[];
   orientation?: 'vertical' | 'horizontal';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -25,6 +29,8 @@ export interface MenuOptions {
 type MenuState = {
   items: MenuItem[];
   orientation: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -39,19 +45,43 @@ type MenuState = {
  *     ]
  *   });
  *   menu.render();
+ * 
+ * Active states are automatically set based on current URL
  */
-export class Menu extends Reactive {
-  state!: MenuState;
+export class Menu {
+  state: MenuState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: MenuOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: MenuOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       items: options.items ?? [],
-      orientation: options.orientation ?? 'vertical'
-    }) as MenuState;
+      orientation: options.orientation ?? 'vertical',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+
+    // Auto-set active state based on current path
+    this._setActiveStates();
+  }
+
+  /**
+   * Set active state on items based on current request path
+   */
+  private _setActiveStates(): void {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      active: item.href ? req.isActiveNavItem(item.href) : false,
+      // Recursively set active for subitems
+      items: item.items?.map(subItem => ({
+        ...subItem,
+        active: subItem.href ? req.isActiveNavItem(subItem.href) : false
+      }))
+    }));
   }
 
   /* -------------------------
@@ -60,11 +90,13 @@ export class Menu extends Reactive {
 
   items(value: MenuItem[]): this {
     this.state.items = value;
+    this._setActiveStates();
     return this;
   }
 
   addItem(item: MenuItem): this {
-    this.state.items.push(item);
+    this.state.items = [...this.state.items, item];
+    this._setActiveStates();
     return this;
   }
 
@@ -73,6 +105,16 @@ export class Menu extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Helpers
    * ------------------------- */
@@ -81,21 +123,55 @@ export class Menu extends Reactive {
     const menuItem = document.createElement('div');
     menuItem.className = 'jux-menu-item';
 
+    // Add active class if item is active
+    if (item.active) {
+      menuItem.classList.add('jux-menu-item-active');
+    }
+
     if (item.href) {
       const link = document.createElement('a');
       link.className = 'jux-menu-link';
       link.href = item.href;
-      link.textContent = item.label;
+
+      // Add active class to link if item is active
+      if (item.active) {
+        link.classList.add('jux-menu-link-active');
+      }
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.textContent = item.icon;
+        link.appendChild(icon);
+      }
+
+      const label = document.createElement('span');
+      label.className = 'jux-menu-label';
+      label.textContent = item.label;
+      link.appendChild(label);
+
       menuItem.appendChild(link);
     } else {
       const button = document.createElement('button');
       button.className = 'jux-menu-button';
-      button.textContent = item.label;
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.textContent = item.icon;
+        button.appendChild(icon);
+      }
+
+      const label = document.createElement('span');
+      label.className = 'jux-menu-label';
+      label.textContent = item.label;
+      button.appendChild(label);
+
       menuItem.appendChild(button);
 
-      // Event binding - onClick
-      if (item.onClick) {
-        button.addEventListener('click', item.onClick);
+      // Event binding - click
+      if (item.click) {
+        button.addEventListener('click', item.click);
       }
     }
 
@@ -128,15 +204,23 @@ export class Menu extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { items, orientation } = this.state;
+    const { items, orientation, style, class: className } = this.state;
 
     const menu = document.createElement('nav');
     menu.className = `jux-menu jux-menu-${orientation}`;
-    menu.id = this._componentId;
+    menu.id = this._id;
+
+    if (className) {
+      menu.className += ` ${className}`;
+    }
+
+    if (style) {
+      menu.setAttribute('style', style);
+    }
 
     items.forEach(item => {
       menu.appendChild(this._renderMenuItem(item));
@@ -154,17 +238,17 @@ export class Menu extends Reactive {
       throw new Error('Menu.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Menu.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Menu.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function menu(componentId: string, options: MenuOptions = {}): Menu {
-  return new Menu(componentId, options);
+export function menu(id: string, options: MenuOptions = {}): Menu {
+  return new Menu(id, options);
 }