juxscript 1.0.20 → 1.0.21

package/lib/components/menu.ts

@@ -1,11 +1,11 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
 import { renderIcon } from './icons.js';
 import { req } from './req.js';
-import { State } from '../reactivity/state.js';
 
-/**
- * Menu item configuration
- */
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['itemClick'] as const;  // ✅ Fire when menu item is clicked
+
 export interface MenuItem {
   label: string;
   href?: string;
@@ -13,11 +13,9 @@ export interface MenuItem {
   icon?: string;
   items?: MenuItem[];
   active?: boolean;
+  itemClass?: string;
 }
 
-/**
- * Menu component options
- */
 export interface MenuOptions {
   items?: MenuItem[];
   orientation?: 'vertical' | 'horizontal';
@@ -25,9 +23,6 @@ export interface MenuOptions {
   class?: string;
 }
 
-/**
- * Menu component state
- */
 type MenuState = {
   items: MenuItem[];
   orientation: string;
@@ -35,56 +30,30 @@ type MenuState = {
   class: string;
 };
 
-/**
- * Menu component
- *
- * Usage:
- *   const menu = jux.menu('myMenu', {
- *     orientation: 'vertical',
- *     items: [
- *       { label: 'Home', href: '/' },
- *       { label: 'About', href: '/about' }
- *     ]
- *   });
- *   menu.render();
- * 
- * Active states are automatically set based on current URL
- */
-export class Menu {
-  state: MenuState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
-  // Store bind() instructions (DOM events only)
-  private _bindings: Array<{ event: string, handler: Function }> = [];
-
-  // Store sync() instructions (state synchronization)
-  private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
-
+export class Menu extends BaseComponent<MenuState> {
   constructor(id: string, options: MenuOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       items: options.items ?? [],
       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
-   */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
   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
@@ -92,34 +61,11 @@ export class Menu {
     }));
   }
 
-  /**
-   * Bind event handler (stores for wiring in render)
-   * DOM events only: click, mouseenter, mouseleave, etc.
-   */
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
 
-  /**
-   * Two-way sync with state (stores for wiring in render)
-   * 
-   * @param property - Component property to sync ('items', 'orientation', etc)
-   * @param stateObj - State object to sync with
-   * @param toState - Optional transform function when going from component to state
-   * @param toComponent - Optional transform function when going from state to component
-   */
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Menu.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    return this;
-  }
-
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  // ✅ Inherited from BaseComponent
 
   items(value: MenuItem[]): this {
     this.state.items = value;
@@ -133,30 +79,35 @@ export class Menu {
     return this;
   }
 
-  orientation(value: 'vertical' | 'horizontal'): this {
-    this.state.orientation = value;
-    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,
+      items: item.items?.map(subItem => ({
+        ...subItem,
+        itemClass: className
+      }))
+    }));
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  orientation(value: 'vertical' | 'horizontal'): this {
+    this.state.orientation = value;
     return this;
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * HELPERS
+   * ═════════════════════════════════════════════════════════════════ */
 
   private _renderMenuItem(item: MenuItem): HTMLElement {
     const menuItem = document.createElement('div');
     menuItem.className = 'jux-menu-item';
 
-    // Add active class if item is active
+    if (item.itemClass) {
+      menuItem.className += ` ${item.itemClass}`;
+    }
+
     if (item.active) {
       menuItem.classList.add('jux-menu-item-active');
     }
@@ -166,7 +117,6 @@ export class Menu {
       link.className = 'jux-menu-link';
       link.href = item.href;
 
-      // Add active class to link if item is active
       if (item.active) {
         link.classList.add('jux-menu-link-active');
       }
@@ -174,8 +124,7 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        const iconElement = renderIcon(item.icon);
-        icon.appendChild(iconElement);
+        icon.appendChild(renderIcon(item.icon));
         link.appendChild(icon);
       }
 
@@ -184,6 +133,11 @@ export class Menu {
       label.textContent = item.label;
       link.appendChild(label);
 
+      // ✅ Fire itemClick callback when link is clicked
+      link.addEventListener('click', (e) => {
+        this._triggerCallback('itemClick', { item, event: e });
+      });
+
       menuItem.appendChild(link);
     } else {
       const button = document.createElement('button');
@@ -192,8 +146,7 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        const iconElement = renderIcon(item.icon);
-        icon.appendChild(iconElement);
+        icon.appendChild(renderIcon(item.icon));
         button.appendChild(icon);
       }
 
@@ -204,13 +157,15 @@ export class Menu {
 
       menuItem.appendChild(button);
 
-      // Event binding - click
-      if (item.click) {
-        button.addEventListener('click', item.click);
-      }
+      // ✅ Fire both the item's click handler AND the callback event
+      button.addEventListener('click', (e) => {
+        if (item.click) {
+          item.click();
+        }
+        this._triggerCallback('itemClick', { item, event: e });
+      });
     }
 
-    // Nested items (submenu)
     if (item.items && item.items.length > 0) {
       const submenu = document.createElement('div');
       submenu.className = 'jux-menu-submenu';
@@ -225,30 +180,15 @@ export class Menu {
     return menuItem;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    // === 1. SETUP: Get container ===
-    let container: HTMLElement;
+    const container = this._setupContainer(targetId);
 
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Menu: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-
-    // === 2. PREPARE: Destructure state ===
     const { items, orientation, style, class: className } = this.state;
 
-    // === 3. BUILD: Create DOM elements ===
     const menu = document.createElement('nav');
     menu.className = `jux-menu jux-menu-${orientation}`;
     menu.id = this._id;
@@ -265,25 +205,18 @@ export class Menu {
       menu.appendChild(this._renderMenuItem(item));
     });
 
-    // === 4. WIRE: Add event listeners ===
+    this._wireStandardEvents(menu);
 
-    // Wire up custom event bindings (from .bind() calls)
-    this._bindings.forEach(({ event, handler }) => {
-      menu.addEventListener(event, handler as EventListener);
-    });
-
-    // Wire up sync bindings (from .sync() calls)
+    // Wire sync bindings
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'items') {
-        // Sync items array
-        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._setActiveStates();
 
-          // Re-render menu items
           const existingItems = menu.querySelectorAll('.jux-menu-item');
           existingItems.forEach(item => item.remove());
 
@@ -291,7 +224,6 @@ export class Menu {
             menu.appendChild(this._renderMenuItem(item));
           });
 
-          // Re-trigger icon rendering
           requestAnimationFrame(() => {
             if ((window as any).lucide) {
               (window as any).lucide.createIcons();
@@ -300,11 +232,10 @@ export class Menu {
         });
       }
       else if (property === 'orientation') {
-        // Sync orientation
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           menu.classList.remove(`jux-menu-${this.state.orientation}`);
           this.state.orientation = transformed;
           menu.classList.add(`jux-menu-${transformed}`);
@@ -312,10 +243,8 @@ export class Menu {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(menu);
 
-    // Trigger Lucide icon rendering
     requestAnimationFrame(() => {
       if ((window as any).lucide) {
         (window as any).lucide.createIcons();
@@ -324,26 +253,8 @@ export class Menu {
 
     return this;
   }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Menu.renderTo: Invalid component - not an object');
-    }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Menu.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
-/**
- * Factory helper
- */
 export function menu(id: string, options: MenuOptions = {}): Menu {
   return new Menu(id, options);
 }

package/lib/components/modal.ts

@@ -1,10 +1,9 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
-import { renderIcon } from './icons.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['open', 'close'] as const;
 
-/**
- * Modal component options
- */
 export interface ModalOptions {
   title?: string;
   content?: string;
@@ -15,68 +14,46 @@ export interface ModalOptions {
   class?: string;
 }
 
-/**
- * Modal component state
- */
 type ModalState = {
   title: string;
   content: string;
   showCloseButton: boolean;
   closeOnBackdropClick: boolean;
   size: string;
-  isOpen: boolean;
   open: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Modal component
- *
- * Usage:
- *   const modal = jux.modal('myModal', {
- *     title: 'Confirmation',
- *     content: 'Are you sure?',
- *     size: 'medium'
- *   });
- *   modal.render();
- *   modal.open();
- */
-export class Modal {
-  state: ModalState;
-  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 Modal extends BaseComponent<ModalState> {
+  private _overlay: HTMLElement | null = null;
 
   constructor(id: string, options: ModalOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    this.state = {
+    super(id, {
       title: options.title ?? '',
       content: options.content ?? '',
       showCloseButton: options.showCloseButton ?? true,
       closeOnBackdropClick: options.closeOnBackdropClick ?? true,
       size: options.size ?? 'medium',
-      isOpen: false,
       open: false,
       style: options.style ?? '',
       class: options.class ?? ''
-    };
+    });
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   title(value: string): this {
     this.state.title = value;
@@ -103,84 +80,43 @@ export class Modal {
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
-    return this;
-  }
-
-  /* -------------------------
-   * Modal controls
-   * ------------------------- */
-
   open(): this {
-    this.state.isOpen = true;
-    if (this.container) {
-      const modalEl = this.container.querySelector('.jux-modal');
-      if (modalEl) {
-        modalEl.classList.add('jux-modal-open');
-      }
+    this.state.open = true;
+    if (this._overlay) {
+      this._overlay.style.display = 'flex';
     }
+    // 🎯 Fire the open callback event
+    this._triggerCallback('open');
     return this;
   }
 
   close(): this {
-    this.state.isOpen = false;
-    if (this.container) {
-      const modalEl = this.container.querySelector('.jux-modal');
-      if (modalEl) {
-        modalEl.classList.remove('jux-modal-open');
-      }
+    this.state.open = false;
+    if (this._overlay) {
+      this._overlay.style.display = 'none';
     }
+    // 🎯 Fire the close callback event
+    this._triggerCallback('close');
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
-  bind(event: string, handler: Function): this {
-    this._bindings.push({ event, handler });
-    return this;
-  }
-
-  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-    if (!stateObj || typeof stateObj.subscribe !== 'function') {
-      throw new Error(`Modal.sync: Expected a State object for property "${property}"`);
-    }
-    this._syncBindings.push({ property, stateObj, toState, toComponent });
-    return this;
-  }
+  /* ═════════════════════════════════════════════════════════════════
+   * 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(`Modal: Target "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-    this.container = container;
+    const container = this._setupContainer(targetId);
 
-    // === 2. PREPARE: Destructure state and check sync flags ===
     const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
     const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
 
-    // === 3. BUILD: Create DOM elements ===
     const overlay = document.createElement('div');
     overlay.className = 'jux-modal-overlay';
     overlay.id = this._id;
     overlay.style.display = open ? 'flex' : 'none';
     if (className) overlay.className += ` ${className}`;
     if (style) overlay.setAttribute('style', style);
+    this._overlay = overlay;
 
     const modal = document.createElement('div');
     modal.className = `jux-modal jux-modal-${size}`;
@@ -206,9 +142,6 @@ export class Modal {
 
     overlay.appendChild(modal);
 
-    // === 4. WIRE: Attach event listeners and sync bindings ===
-
-    // Default close behavior (only if NOT using sync)
     if (!hasOpenSync) {
       if (showClose) {
         const closeButton = modal.querySelector('.jux-modal-close');
@@ -228,12 +161,8 @@ export class Modal {
       }
     }
 
-    // Wire custom bindings from .bind() calls
-    this._bindings.forEach(({ event, handler }) => {
-      overlay.addEventListener(event, handler as EventListener);
-    });
+    this._wireStandardEvents(overlay);
 
-    // Wire sync bindings from .sync() calls
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'open') {
         const transformToState = toState || ((v: any) => Boolean(v));
@@ -241,7 +170,6 @@ export class Modal {
 
         let isUpdating = false;
 
-        // State → Component
         stateObj.subscribe((val: any) => {
           if (isUpdating) return;
           const transformed = transformToComponent(val);
@@ -249,7 +177,6 @@ export class Modal {
           overlay.style.display = transformed ? 'flex' : 'none';
         });
 
-        // Component → State (close button, backdrop)
         if (showClose) {
           const closeButton = modal.querySelector('.jux-modal-close');
           closeButton?.addEventListener('click', () => {
@@ -280,19 +207,19 @@ export class Modal {
         }
       }
       else if (property === 'content') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           body.innerHTML = transformed;
           this.state.content = transformed;
         });
       }
       else if (property === 'title') {
-        const transformToComponent = toComponent || ((v: any) => String(v));
+        const transform = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
-          const transformed = transformToComponent(val);
+          const transformed = transform(val);
           const header = modal.querySelector('.jux-modal-header');
           if (header) {
             header.textContent = transformed;
@@ -302,25 +229,11 @@ export class Modal {
       }
     });
 
-    // === 5. RENDER: Append to DOM and finalize ===
     container.appendChild(overlay);
     return this;
   }
-
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent?._id) {
-      throw new Error('Modal.renderTo: Invalid component');
-    }
-    return this.render(`#${juxComponent._id}`);
-  }
 }
 
-/**
- * Factory helper
- */
 export function modal(id: string, options: ModalOptions = {}): Modal {
   return new Modal(id, options);
 }