juxscript 1.0.19 → 1.0.21

package/lib/components/menu.ts

@@ -1,9 +1,11 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
 import { req } from './req.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;
@@ -11,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';
@@ -23,9 +23,6 @@ export interface MenuOptions {
   class?: string;
 }
 
-/**
- * Menu component state
- */
 type MenuState = {
   items: MenuItem[];
   orientation: string;
@@ -33,50 +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;
-
+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
@@ -84,9 +61,11 @@ export class Menu {
     }));
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   items(value: MenuItem[]): this {
     this.state.items = value;
@@ -100,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');
     }
@@ -133,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');
       }
@@ -141,7 +124,7 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        icon.textContent = item.icon;
+        icon.appendChild(renderIcon(item.icon));
         link.appendChild(icon);
       }
 
@@ -150,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');
@@ -158,7 +146,7 @@ export class Menu {
       if (item.icon) {
         const icon = document.createElement('span');
         icon.className = 'jux-menu-icon';
-        icon.textContent = item.icon;
+        icon.appendChild(renderIcon(item.icon));
         button.appendChild(icon);
       }
 
@@ -169,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';
@@ -190,24 +180,13 @@ export class Menu {
     return menuItem;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
-
-    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);
-    }
+    const container = this._setupContainer(targetId);
 
-    this.container = container;
     const { items, orientation, style, class: className } = this.state;
 
     const menu = document.createElement('nav');
@@ -226,29 +205,56 @@ export class Menu {
       menu.appendChild(this._renderMenuItem(item));
     });
 
-    container.appendChild(menu);
-    return this;
-  }
+    this._wireStandardEvents(menu);
 
-  /**
-   * 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');
-    }
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'items') {
+        const transform = toComponent || ((v: any) => v);
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Menu.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.items = transformed;
+          this._setActiveStates();
 
-    return this.render(`#${juxComponent._id}`);
+          const existingItems = menu.querySelectorAll('.jux-menu-item');
+          existingItems.forEach(item => item.remove());
+
+          this.state.items.forEach(item => {
+            menu.appendChild(this._renderMenuItem(item));
+          });
+
+          requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+              (window as any).lucide.createIcons();
+            }
+          });
+        });
+      }
+      else if (property === 'orientation') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          menu.classList.remove(`jux-menu-${this.state.orientation}`);
+          this.state.orientation = transformed;
+          menu.classList.add(`jux-menu-${transformed}`);
+        });
+      }
+    });
+
+    container.appendChild(menu);
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
+    return this;
   }
 }
 
-/**
- * Factory helper
- */
 export function menu(id: string, options: MenuOptions = {}): Menu {
   return new Menu(id, options);
 }

package/lib/components/modal.ts

@@ -1,8 +1,9 @@
-import { getOrCreateContainer } from './helpers.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;
@@ -13,57 +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;
+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 ?? ''
-    };
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   title(value: string): this {
     this.state.title = value;
@@ -90,156 +80,160 @@ 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
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * 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(`Modal: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
+    const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
+    const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
 
-    this.container = container;
-    const { title, content, showCloseButton, closeOnBackdropClick, size, isOpen, style, class: className } = this.state;
+    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;
 
-    // Modal backdrop
     const modal = document.createElement('div');
     modal.className = `jux-modal jux-modal-${size}`;
-    modal.id = this._id;
 
-    if (className) {
-      modal.className += ` ${className}`;
+    if (showClose) {
+      const closeButton = document.createElement('button');
+      closeButton.className = 'jux-modal-close';
+      closeButton.innerHTML = '×';
+      modal.appendChild(closeButton);
     }
 
-    if (style) {
-      modal.setAttribute('style', style);
+    if (title) {
+      const header = document.createElement('div');
+      header.className = 'jux-modal-header';
+      header.textContent = title;
+      modal.appendChild(header);
     }
 
-    if (isOpen) {
-      modal.classList.add('jux-modal-open');
-    }
+    const body = document.createElement('div');
+    body.className = 'jux-modal-body';
+    body.innerHTML = content;
+    modal.appendChild(body);
 
-    // Modal dialog
-    const dialog = document.createElement('div');
-    dialog.className = 'jux-modal-dialog';
+    overlay.appendChild(modal);
 
-    // Modal header
-    if (title || showCloseButton) {
-      const header = document.createElement('div');
-      header.className = 'jux-modal-header';
+    if (!hasOpenSync) {
+      if (showClose) {
+        const closeButton = modal.querySelector('.jux-modal-close');
+        closeButton?.addEventListener('click', () => {
+          this.state.open = false;
+          overlay.style.display = 'none';
+        });
+      }
 
-      if (title) {
-        const titleEl = document.createElement('h3');
-        titleEl.className = 'jux-modal-title';
-        titleEl.textContent = title;
-        header.appendChild(titleEl);
+      if (closeOnBackdrop) {
+        overlay.addEventListener('click', (e) => {
+          if (e.target === overlay) {
+            this.state.open = false;
+            overlay.style.display = 'none';
+          }
+        });
       }
+    }
 
-      if (showCloseButton) {
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'jux-modal-close';
-        closeBtn.innerHTML = '&times;';
-        header.appendChild(closeBtn);
+    this._wireStandardEvents(overlay);
 
-        // Event binding - close button
-        closeBtn.addEventListener('click', () => this.close());
-      }
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'open') {
+        const transformToState = toState || ((v: any) => Boolean(v));
+        const transformToComponent = toComponent || ((v: any) => Boolean(v));
 
-      dialog.appendChild(header);
-    }
+        let isUpdating = false;
 
-    // Modal body
-    const body = document.createElement('div');
-    body.className = 'jux-modal-body';
-    body.innerHTML = content;
-    dialog.appendChild(body);
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.open = transformed;
+          overlay.style.display = transformed ? 'flex' : 'none';
+        });
 
-    modal.appendChild(dialog);
-    container.appendChild(modal);
+        if (showClose) {
+          const closeButton = modal.querySelector('.jux-modal-close');
+          closeButton?.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
 
-    // Event binding - backdrop click
-    if (closeOnBackdropClick) {
-      modal.addEventListener('click', (e) => {
-        if (e.target === modal) {
-          this.close();
-        }
-      });
-    }
+            this.state.open = false;
+            overlay.style.display = 'none';
+            stateObj.set(transformToState(false));
 
-    // Event binding - escape key
-    const escapeHandler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && this.state.isOpen) {
-        this.close();
-      }
-    };
-    document.addEventListener('keydown', escapeHandler);
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        }
 
-    return this;
-  }
+        if (closeOnBackdrop) {
+          overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+              if (isUpdating) return;
+              isUpdating = true;
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Modal.renderTo: Invalid component - not an object');
-    }
+              this.state.open = false;
+              overlay.style.display = 'none';
+              stateObj.set(transformToState(false));
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Modal.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+              setTimeout(() => { isUpdating = false; }, 0);
+            }
+          });
+        }
+      }
+      else if (property === 'content') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          body.innerHTML = transformed;
+          this.state.content = transformed;
+        });
+      }
+      else if (property === 'title') {
+        const transform = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const header = modal.querySelector('.jux-modal-header');
+          if (header) {
+            header.textContent = transformed;
+          }
+          this.state.title = transformed;
+        });
+      }
+    });
 
-    return this.render(`#${juxComponent._id}`);
+    container.appendChild(overlay);
+    return this;
   }
 }
 
-/**
- * Factory helper
- */
 export function modal(id: string, options: ModalOptions = {}): Modal {
   return new Modal(id, options);
 }