juxscript 1.1.4 → 1.1.6

package/lib/components/menu.js

@@ -0,0 +1,202 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+import { req } from './req.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['itemClick']; // ✅ Fire when menu item is clicked
+export class Menu extends BaseComponent {
+    constructor(id, options = {}) {
+        super(id, {
+            items: options.items ?? [],
+            orientation: options.orientation ?? 'vertical',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+        this._setActiveStates();
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    _setActiveStates() {
+        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) {
+        this.state.items = value;
+        this._setActiveStates();
+        return this;
+    }
+    addItem(item) {
+        this.state.items = [...this.state.items, item];
+        this._setActiveStates();
+        return this;
+    }
+    itemClass(className) {
+        this.state.items = this.state.items.map(item => ({
+            ...item,
+            itemClass: className,
+            items: item.items?.map(subItem => ({
+                ...subItem,
+                itemClass: className
+            }))
+        }));
+        return this;
+    }
+    orientation(value) {
+        this.state.orientation = value;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * HELPERS
+     * ═════════════════════════════════════════════════════════════════ */
+    _renderMenuItem(item) {
+        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) {
+        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) => v);
+                stateObj.subscribe((val) => {
+                    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.lucide) {
+                            window.lucide.createIcons();
+                        }
+                    });
+                });
+            }
+            else if (property === 'orientation') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    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.lucide) {
+                window.lucide.createIcons();
+            }
+        });
+        return this;
+    }
+}
+export function menu(id, options = {}) {
+    return new Menu(id, options);
+}

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.d.ts

@@ -0,0 +1,51 @@
+import { BaseComponent } from './base/BaseComponent.js';
+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 declare class Modal extends BaseComponent<ModalState> {
+    private _overlay;
+    constructor(id: string, options?: ModalOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    title(value: string): this;
+    content(value: string): this;
+    showCloseButton(value: boolean): this;
+    closeOnBackdropClick(value: boolean): this;
+    size(value: 'small' | 'medium' | 'large'): this;
+    open(): this;
+    close(): 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;
+    /**
+     * Get the modal body element (only available after render)
+     * @returns The modal body element or null if not rendered
+     */
+    getBodyElement(): HTMLElement | null;
+    render(targetId?: string): this;
+}
+export declare function modal(id: string, options?: ModalOptions): Modal;
+export {};
+//# sourceMappingURL=modal.d.ts.map

package/lib/components/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,OAAO,CAAC;IACzB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,KAAM,SAAQ,aAAa,CAAC,UAAU,CAAC;IAClD,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB;IAalD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAehD,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAY1B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAW5B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,oBAAoB,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAK1C,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI;IAW/C,IAAI,IAAI,IAAI;IAUZ,KAAK,IAAI,IAAI;IAUb;;;;;;;OAOG;IACH,MAAM,IAAI,MAAM;IAIhB;;;OAGG;IACH,cAAc,IAAI,WAAW,GAAG,IAAI;IAQpC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAiIhC;AAED,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,YAAiB,GAAG,KAAK,CAEnE"}