juxscript 1.1.2 → 1.1.4

package/lib/components/menu.ts

@@ -1,275 +0,0 @@
-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

@@ -1,284 +0,0 @@
-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);
-}