juxscript 1.0.132 → 1.1.2

package/lib/components/menu.ts

@@ -0,0 +1,275 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { req } from './req.js';
+
+// 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;
+  click?: () => void;
+  icon?: string;
+  items?: MenuItem[];
+  active?: boolean;
+  itemClass?: string;
+}
+
+export interface MenuOptions {
+  items?: MenuItem[];
+  orientation?: 'vertical' | 'horizontal';
+  style?: string;
+  class?: string;
+}
+
+type MenuState = {
+  items: MenuItem[];
+  orientation: string;
+  style: string;
+  class: string;
+};
+
+export class Menu extends BaseComponent<MenuState> {
+  constructor(id: string, options: MenuOptions = {}) {
+    super(id, {
+      items: options.items ?? [],
+      orientation: options.orientation ?? 'vertical',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+
+    this._setActiveStates();
+  }
+
+  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,
+      items: item.items?.map(subItem => ({
+        ...subItem,
+        active: subItem.href ? req.isActiveNavItem(subItem.href) : false
+      }))
+    }));
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  items(value: MenuItem[]): this {
+    this.state.items = value;
+    this._setActiveStates();
+    return this;
+  }
+
+  addItem(item: MenuItem): this {
+    this.state.items = [...this.state.items, item];
+    this._setActiveStates();
+    return this;
+  }
+
+  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;
+  }
+
+  orientation(value: 'vertical' | 'horizontal'): this {
+    this.state.orientation = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * HELPERS
+   * ═════════════════════════════════════════════════════════════════ */
+
+  private _renderMenuItem(item: MenuItem): HTMLElement {
+    const menuItem = document.createElement('div');
+    menuItem.className = 'jux-menu-item';
+
+    if (item.itemClass) {
+      menuItem.className += ` ${item.itemClass}`;
+    }
+
+    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;
+
+      if (item.active) {
+        link.classList.add('jux-menu-link-active');
+      }
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.appendChild(renderIcon(item.icon));
+        link.appendChild(icon);
+      }
+
+      const label = document.createElement('span');
+      label.className = 'jux-menu-label';
+      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');
+      button.className = 'jux-menu-button';
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.appendChild(renderIcon(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);
+
+      // ✅ 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 });
+      });
+    }
+
+    if (item.items && item.items.length > 0) {
+      // Mark item as having submenu
+      menuItem.classList.add('jux-menu-item-has-submenu');
+
+      const submenu = document.createElement('div');
+      submenu.className = 'jux-menu-submenu';
+
+      item.items.forEach(subItem => {
+        submenu.appendChild(this._renderMenuItem(subItem));
+      });
+
+      menuItem.appendChild(submenu);
+
+      // Add click handler to toggle submenu expansion
+      const clickTarget = menuItem.querySelector('a, button');
+      if (clickTarget) {
+        clickTarget.addEventListener('click', (e) => {
+          // Prevent default link behavior if it has submenus
+          if (!item.href) {
+            e.preventDefault();
+          }
+          menuItem.classList.toggle('jux-menu-item-expanded');
+        });
+      }
+    }
+
+    return menuItem;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { items, orientation, style, class: className } = this.state;
+
+    const menu = document.createElement('nav');
+    menu.className = `jux-menu jux-menu-${orientation}`;
+    menu.id = this._id;
+
+    if (className) {
+      menu.className += ` ${className}`;
+    }
+
+    if (style) {
+      menu.setAttribute('style', style);
+    }
+
+    items.forEach(item => {
+      menu.appendChild(this._renderMenuItem(item));
+    });
+
+    this._wireStandardEvents(menu);
+
+    // Wire sync bindings
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'items') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.items = transformed;
+          this._setActiveStates();
+
+          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;
+  }
+}
+
+export function menu(id: string, options: MenuOptions = {}): Menu {
+  return new Menu(id, options);
+}

package/lib/components/modal.ts

@@ -0,0 +1,284 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['open', 'close'] as const;
+
+export interface ModalOptions {
+  title?: string;
+  content?: string;
+  showCloseButton?: boolean;
+  closeOnBackdropClick?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  style?: string;
+  class?: string;
+}
+
+type ModalState = {
+  title: string;
+  content: string;
+  showCloseButton: boolean;
+  closeOnBackdropClick: boolean;
+  size: string;
+  open: boolean;
+  style: string;
+  class: string;
+};
+
+export class Modal extends BaseComponent<ModalState> {
+  private _overlay: HTMLElement | null = null;
+
+  constructor(id: string, options: ModalOptions = {}) {
+    super(id, {
+      title: options.title ?? '',
+      content: options.content ?? '',
+      showCloseButton: options.showCloseButton ?? true,
+      closeOnBackdropClick: options.closeOnBackdropClick ?? true,
+      size: options.size ?? 'medium',
+      open: false,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent:
+  // - style(), class()
+  // - bind(), sync(), renderTo()
+  // - addClass(), removeClass(), toggleClass()
+  // - visible(), show(), hide()
+  // - attr(), attrs(), removeAttr()
+
+  title(value: string): this {
+    this.state.title = value;
+    if (this._overlay) {
+      const modal = this._overlay.querySelector('.jux-modal');
+      const header = modal?.querySelector('.jux-modal-header');
+      if (header) {
+        header.textContent = value;
+      }
+    }
+    return this;
+  }
+
+  content(value: string): this {
+    this.state.content = value;
+    if (this._overlay) {
+      const body = this._overlay.querySelector('.jux-modal-body');
+      if (body) {
+        body.innerHTML = value;
+      }
+    }
+    return this;
+  }
+
+  showCloseButton(value: boolean): this {
+    this.state.showCloseButton = value;
+    return this;
+  }
+
+  closeOnBackdropClick(value: boolean): this {
+    this.state.closeOnBackdropClick = value;
+    return this;
+  }
+
+  size(value: 'small' | 'medium' | 'large'): this {
+    this.state.size = value;
+    if (this._overlay) {
+      const modal = this._overlay.querySelector('.jux-modal');
+      if (modal) {
+        modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
+      }
+    }
+    return this;
+  }
+
+  open(): this {
+    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.open = false;
+    if (this._overlay) {
+      this._overlay.style.display = 'none';
+    }
+    // 🎯 Fire the close callback event
+    this._triggerCallback('close');
+    return this;
+  }
+
+  /**
+   * Get the modal body element ID for rendering child components
+   * @returns The ID of the modal body element (e.g., 'mymodal-body')
+   * 
+   * Usage:
+   *   const modal = jux.modal('files-modal', { title: 'Files' }).render('body').open();
+   *   jux.table('files-table', {...}).render(modal.bodyId());
+   */
+  bodyId(): string {
+    return `${this._id}-body`;
+  }
+
+  /**
+   * Get the modal body element (only available after render)
+   * @returns The modal body element or null if not rendered
+   */
+  getBodyElement(): HTMLElement | null {
+    return document.getElementById(this.bodyId());
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { open, title, content, size, closeOnBackdropClick: closeOnBackdrop, showCloseButton: showClose, style, class: className } = this.state;
+    const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
+
+    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}`;
+
+    if (showClose) {
+      const closeButton = document.createElement('button');
+      closeButton.className = 'jux-modal-close';
+      closeButton.innerHTML = '×';
+      modal.appendChild(closeButton);
+    }
+
+    if (title) {
+      const header = document.createElement('div');
+      header.className = 'jux-modal-header';
+      header.textContent = title;
+      modal.appendChild(header);
+    }
+
+    const body = document.createElement('div');
+    body.className = 'jux-modal-body';
+    body.id = this.bodyId(); // Set predictable ID for child component rendering
+    body.innerHTML = content;
+    modal.appendChild(body);
+
+    overlay.appendChild(modal);
+
+    if (!hasOpenSync) {
+      if (showClose) {
+        const closeButton = modal.querySelector('.jux-modal-close');
+        closeButton?.addEventListener('click', () => {
+          this.state.open = false;
+          overlay.style.display = 'none';
+        });
+      }
+
+      if (closeOnBackdrop) {
+        overlay.addEventListener('click', (e) => {
+          if (e.target === overlay) {
+            this.state.open = false;
+            overlay.style.display = 'none';
+          }
+        });
+      }
+    }
+
+    this._wireStandardEvents(overlay);
+
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'open') {
+        const transformToState = toState || ((v: any) => Boolean(v));
+        const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+        let isUpdating = false;
+
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.open = transformed;
+          overlay.style.display = transformed ? 'flex' : 'none';
+        });
+
+        if (showClose) {
+          const closeButton = modal.querySelector('.jux-modal-close');
+          closeButton?.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
+
+            this.state.open = false;
+            overlay.style.display = 'none';
+            stateObj.set(transformToState(false));
+
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        }
+
+        if (closeOnBackdrop) {
+          overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+              if (isUpdating) return;
+              isUpdating = true;
+
+              this.state.open = false;
+              overlay.style.display = 'none';
+              stateObj.set(transformToState(false));
+
+              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;
+        });
+      }
+    });
+
+    container.appendChild(overlay);
+    return this;
+  }
+}
+
+export function modal(id: string, options: ModalOptions = {}): Modal {
+  return new Modal(id, options);
+}