juxscript 1.1.4 → 1.1.6

package/lib/components/modal.js

@@ -0,0 +1,227 @@
+import { BaseComponent } from './base/BaseComponent.js';
+// Event definitions
+const TRIGGER_EVENTS = [];
+const CALLBACK_EVENTS = ['open', 'close'];
+export class Modal extends BaseComponent {
+    constructor(id, options = {}) {
+        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 ?? ''
+        });
+        this._overlay = null;
+    }
+    getTriggerEvents() {
+        return TRIGGER_EVENTS;
+    }
+    getCallbackEvents() {
+        return CALLBACK_EVENTS;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - addClass(), removeClass(), toggleClass()
+    // - visible(), show(), hide()
+    // - attr(), attrs(), removeAttr()
+    title(value) {
+        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) {
+        this.state.content = value;
+        if (this._overlay) {
+            const body = this._overlay.querySelector('.jux-modal-body');
+            if (body) {
+                body.innerHTML = value;
+            }
+        }
+        return this;
+    }
+    showCloseButton(value) {
+        this.state.showCloseButton = value;
+        return this;
+    }
+    closeOnBackdropClick(value) {
+        this.state.closeOnBackdropClick = value;
+        return this;
+    }
+    size(value) {
+        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.state.open = true;
+        if (this._overlay) {
+            this._overlay.style.display = 'flex';
+        }
+        // 🎯 Fire the open callback event
+        this._triggerCallback('open');
+        return this;
+    }
+    close() {
+        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() {
+        return `${this._id}-body`;
+    }
+    /**
+     * Get the modal body element (only available after render)
+     * @returns The modal body element or null if not rendered
+     */
+    getBodyElement() {
+        return document.getElementById(this.bodyId());
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+    render(targetId) {
+        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) => Boolean(v));
+                const transformToComponent = toComponent || ((v) => Boolean(v));
+                let isUpdating = false;
+                stateObj.subscribe((val) => {
+                    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) => String(v));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    body.innerHTML = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'title') {
+                const transform = toComponent || ((v) => String(v));
+                stateObj.subscribe((val) => {
+                    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, options = {}) {
+    return new Modal(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);
+}

package/lib/components/nav.d.ts

@@ -0,0 +1,45 @@
+import { BaseComponent } from './base/BaseComponent.js';
+export interface NavItem {
+    label: string;
+    href: string;
+    active?: boolean;
+    itemClass?: string;
+}
+export interface NavBrand {
+    text?: string;
+    href?: string;
+    icon?: string;
+}
+export interface NavOptions {
+    items?: NavItem[];
+    brand?: NavBrand;
+    variant?: 'default' | 'pills' | 'tabs';
+    sticky?: boolean;
+    style?: string;
+    class?: string;
+}
+type NavState = {
+    items: NavItem[];
+    brand?: NavBrand;
+    variant: string;
+    sticky: boolean;
+    style: string;
+    class: string;
+};
+export declare class Nav extends BaseComponent<NavState> {
+    private _nav;
+    constructor(id: string, options?: NavOptions);
+    protected getTriggerEvents(): readonly string[];
+    protected getCallbackEvents(): readonly string[];
+    private _setActiveStates;
+    items(value: NavItem[]): this;
+    addItem(item: NavItem): this;
+    itemClass(className: string): this;
+    brand(value: NavBrand): this;
+    variant(value: string): this;
+    sticky(value: boolean): this;
+    render(targetId?: string): this;
+}
+export declare function nav(id: string, options?: NavOptions): Nav;
+export {};
+//# sourceMappingURL=nav.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nav.d.ts","sourceRoot":"","sources":["nav.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,QAAQ,GAAG;IACd,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,OAAO,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,GAAI,SAAQ,aAAa,CAAC,QAAQ,CAAC;IAC9C,OAAO,CAAC,IAAI,CAA4B;gBAE5B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAahD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,OAAO,CAAC,gBAAgB;IAaxB,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI;IAM7B,OAAO,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI;IAM5B,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAQlC,KAAK,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI;IAK5B,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,MAAM,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAS5B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI;CAyIhC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,GAAG,CAE7D"}