juxscript 1.1.239 → 1.1.243

package/lib/components/modal.ts

@@ -1,576 +0,0 @@
-import { BaseComponent } from './base/BaseComponent.js';
-import { renderIcon } from './icons.js';
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['open', 'close'] as const;
-
-export type EmojiIconType = {
-  // Can be an emoji character or an icon name from a collection
-  icon: string;
-  collection?: 'lucide' | 'heroicons' | 'material-symbols' | 'material' | 'icon-park' | string;
-}
-export interface ModalOptions {
-  title?: string;
-  content?: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
-  icon?: EmojiIconType | undefined;
-  close?: boolean;
-  backdropClose?: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
-  size?: 'small' | 'medium' | 'large';
-  actions?: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
-  style?: string;
-  class?: string;
-}
-
-type ModalState = {
-  title: string;
-  content: string | BaseComponent<any> | Array<string | BaseComponent<any>>;
-  icon: EmojiIconType | undefined;
-  close: boolean;
-  backdropClose: boolean;
-  position?: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right';
-  size: string;
-  open: boolean;
-  actions: Array<{ label: string; variant?: string; click?: () => void } | Array<BaseComponent<any>>>;
-  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 ?? '',
-      icon: options.icon ?? undefined,
-      close: options.close ?? true,
-      backdropClose: options.backdropClose ?? true,
-      position: options.position,
-      size: options.size ?? 'medium',
-      open: false,
-      actions: options.actions ?? [],
-      style: options.style ?? '',
-      class: options.class ?? ''
-    });
-  }
-
-  protected getTriggerEvents(): readonly string[] {
-    return TRIGGER_EVENTS;
-  }
-
-  protected getCallbackEvents(): readonly string[] {
-    return CALLBACK_EVENTS;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * REACTIVE UPDATE (Precision DOM edits)
-   * ═════════════════════════════════════════════════════════════════ */
-
-  update(prop: string, value: any): void {
-    super.update(prop, value);
-
-    if (!this._overlay) return;
-
-    const modal = this._overlay.querySelector('.jux-modal');
-    if (!modal) return;
-
-    switch (prop) {
-      case 'open':
-        this._overlay.style.display = value ? 'flex' : 'none';
-        if (value) {
-          this._triggerCallback('open');
-        } else {
-          this._triggerCallback('close');
-        }
-        break;
-
-      case 'title':
-        this._updateTitle(value);
-        break;
-
-      case 'content':
-        this._updateContent(value);
-        break;
-
-      case 'icon':
-        this._updateIcon(value);
-        break;
-
-      case 'size':
-        modal.className = modal.className.replace(/jux-modal-(small|medium|large)/, `jux-modal-${value}`);
-        break;
-
-      case 'position':
-        // Remove existing position classes
-        this._overlay.className = this._overlay.className
-          .split(' ')
-          .filter(c => !c.startsWith('jux-modal-position-'))
-          .join(' ');
-
-        // Add new position class
-        if (value) {
-          this._overlay.classList.add(`jux-modal-position-${value}`);
-        }
-        break;
-
-      case 'actions':
-        this._rebuildActions();
-        break;
-    }
-  }
-
-  private _updateTitle(value: string): void {
-    let headerEl = this._overlay!.querySelector('.jux-modal-header');
-
-    if (!headerEl && value) {
-      // Create header if it doesn't exist
-      headerEl = document.createElement('div');
-      headerEl.className = 'jux-modal-header';
-
-      const modal = this._overlay!.querySelector('.jux-modal');
-      const body = modal!.querySelector('.jux-modal-body');
-      modal!.insertBefore(headerEl, body);
-    }
-
-    if (headerEl) {
-      // Preserve icon if exists
-      const iconEl = headerEl.querySelector('.jux-modal-header-icon');
-      headerEl.innerHTML = '';
-
-      if (iconEl) {
-        headerEl.appendChild(iconEl);
-      }
-
-      const titleEl = document.createElement('span');
-      titleEl.className = 'jux-modal-header-title';
-      titleEl.textContent = value;
-      headerEl.appendChild(titleEl);
-    }
-  }
-
-  private _updateIcon(value?: EmojiIconType): void {
-    const headerEl = this._overlay!.querySelector('.jux-modal-header');
-    if (!headerEl) return;
-
-    let iconEl = headerEl.querySelector('.jux-modal-header-icon');
-
-    if (value) {
-      if (!iconEl) {
-        iconEl = document.createElement('span');
-        iconEl.className = 'jux-modal-header-icon';
-        headerEl.insertBefore(iconEl, headerEl.firstChild);
-      }
-      iconEl.innerHTML = '';
-      iconEl.appendChild(renderIcon(value.icon, value.collection));
-    } else if (iconEl) {
-      iconEl.remove();
-    }
-  }
-
-  private _updateContent(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): void {
-    const contentEl = this._overlay!.querySelector('.jux-modal-content') as HTMLElement;
-    if (!contentEl) return;
-
-    contentEl.innerHTML = '';
-
-    const items = Array.isArray(value) ? value : [value];
-
-    items.forEach(item => {
-      if (typeof item === 'string') {
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = item;
-        while (tempDiv.firstChild) {
-          contentEl.appendChild(tempDiv.firstChild);
-        }
-      } else if (item instanceof BaseComponent) {
-        item.render(contentEl);
-      }
-    });
-  }
-
-  private _rebuildActions(): void {
-    const modal = this._overlay!.querySelector('.jux-modal');
-    if (!modal) return;
-
-    let footerEl = modal.querySelector('.jux-modal-footer') as HTMLElement | null;
-
-    if (this.state.actions.length === 0) {
-      if (footerEl) footerEl.remove();
-      return;
-    }
-
-    if (!footerEl) {
-      footerEl = document.createElement('div');
-      footerEl.className = 'jux-modal-footer';
-      modal.appendChild(footerEl);
-    }
-
-    footerEl.innerHTML = '';
-
-    this.state.actions.forEach(action => {
-      // Check if it's an array of BaseComponents
-      if (Array.isArray(action)) {
-        action.forEach(component => {
-          if (component instanceof BaseComponent) {
-            component.render(footerEl!);
-          }
-        });
-      }
-      // Otherwise it's an action object with label property
-      else if ('label' in action) {
-        const btn = document.createElement('button');
-        btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
-        btn.textContent = action.label;
-        btn.type = 'button';
-
-        btn.addEventListener('click', () => {
-          if (action.click) action.click();
-        });
-
-        footerEl!.appendChild(btn);
-      }
-    });
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * FLUENT API (Just set state, update() handles DOM)
-   * ═════════════════════════════════════════════════════════════════ */
-
-  title(value: string): this {
-    this.state.title = value;
-    return this;
-  }
-
-  content(value: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
-    this.state.content = value;
-    return this;
-  }
-
-  icon(value: EmojiIconType): this {
-    this.state.icon = value;
-    return this;
-  }
-
-  close(value: boolean): this {
-    this.state.close = value;
-    return this;
-  }
-
-  backdropClose(value: boolean): this {
-    this.state.backdropClose = value;
-    return this;
-  }
-
-  size(value: 'small' | 'medium' | 'large'): this {
-    this.state.size = value;
-    return this;
-  }
-
-  position(value: 'bottom' | 'center' | 'top' | 'fullscreen' | 'popover' | 'popover-top' | 'popover-bottom' | 'popover-left' | 'popover-right'): this {
-    this.state.position = value;
-    return this;
-  }
-
-  actions(value: Array<{ label: string; variant?: string; click?: () => void }>): this {
-    this.state.actions = value;
-    return this;
-  }
-
-  addAction(action: { label: string; variant?: string; click?: () => void }): this {
-    this.state.actions = [...this.state.actions, action];
-    return this;
-  }
-
-  open(): this {
-    this.state.open = true;
-    this._triggerCallback('open', true, null, this);
-    return this;
-  }
-
-  closeModal(): this {
-    this.state.open = false;
-    this._triggerCallback('close', false, null, this);
-    return this;
-  }
-
-  toggle(): this {
-    this.state.open = !this.state.open;
-    return this;
-  }
-
-  /**
-   * Check if modal is currently open
-   */
-  isOpen(): boolean {
-    return this.state.open;
-  }
-
-  /**
-   * Check if modal is currently closed
-   */
-  isClosed(): boolean {
-    return !this.state.open;
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * DYNAMIC CONTENT ADDITION (Like tabs.addTabContent)
-   * ═════════════════════════════════════════════════════════════════ */
-
-  /**
-   * Add content to modal (supports strings and BaseComponents)
-   */
-  addContent(content: string | BaseComponent<any> | Array<string | BaseComponent<any>>): this {
-    const contentEl = this._overlay?.querySelector('.jux-modal-content') as HTMLElement;
-    if (!contentEl) {
-      console.warn('[Modal] Content element not found');
-      return this;
-    }
-
-    const items = Array.isArray(content) ? content : [content];
-
-    items.forEach(item => {
-      if (typeof item === 'string') {
-        const tempDiv = document.createElement('div');
-        tempDiv.innerHTML = item;
-        while (tempDiv.firstChild) {
-          contentEl.appendChild(tempDiv.firstChild);
-        }
-      } else if (item instanceof BaseComponent) {
-        item.render(contentEl);
-      }
-    });
-
-    return this;
-  }
-
-  /**
-   * Clear all content from modal
-   */
-  clearContent(): this {
-    const contentEl = this._overlay?.querySelector('.jux-modal-content');
-    if (contentEl) {
-      contentEl.innerHTML = '';
-    }
-    return this;
-  }
-
-  /**
-   * Get the modal content element ID for rendering child components
-   */
-  contentId(): string {
-    return `${this._id}-content`;
-  }
-
-  /**
-   * Get the modal content element (only available after render)
-   */
-  getContentElement(): HTMLElement | null {
-    return document.getElementById(this.contentId());
-  }
-
-  /* ═════════════════════════════════════════════════════════════════
-   * RENDER
-   * ═════════════════════════════════════════════════════════════════ */
-
-  render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-    const container = this._setupContainer(targetId);
-
-    const { open, title, content, icon, size, position, close, backdropClose, actions, 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';
-
-    // Add position class
-    if (position) {
-      overlay.classList.add(`jux-modal-position-${position}`);
-    }
-
-    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 (close) {
-      const closeButton = document.createElement('button');
-      closeButton.className = 'jux-modal-close';
-      closeButton.innerHTML = '×';
-      closeButton.type = 'button';
-      modal.appendChild(closeButton);
-    }
-
-    if (title || icon) {
-      const header = document.createElement('div');
-      header.className = 'jux-modal-header';
-
-      if (icon) {
-        const iconEl = document.createElement('span');
-        iconEl.className = 'jux-modal-header-icon';
-        iconEl.appendChild(renderIcon(icon.icon, icon.collection));
-        header.appendChild(iconEl);
-      }
-
-      if (title) {
-        const titleEl = document.createElement('span');
-        titleEl.className = 'jux-modal-header-title';
-        titleEl.textContent = title;
-        header.appendChild(titleEl);
-      }
-
-      modal.appendChild(header);
-    }
-
-    const contentElement = document.createElement('div');
-    contentElement.className = 'jux-modal-content';
-    contentElement.id = this.contentId();
-    modal.appendChild(contentElement);
-
-    // Render initial content
-    if (content) {
-      const items = Array.isArray(content) ? content : [content];
-      items.forEach(item => {
-        if (typeof item === 'string') {
-          const tempDiv = document.createElement('div');
-          tempDiv.innerHTML = item;
-          while (tempDiv.firstChild) {
-            contentElement.appendChild(tempDiv.firstChild);
-          }
-        } else if (item instanceof BaseComponent) {
-          item.render(contentElement);
-        }
-      });
-    }
-
-    if (actions.length > 0) {
-      const footer = document.createElement('div');
-      footer.className = 'jux-modal-footer';
-
-      actions.forEach(action => {
-        // Check if it's an array of BaseComponents
-        if (Array.isArray(action)) {
-          action.forEach(component => {
-            if (component instanceof BaseComponent) {
-              component.render(footer);
-            }
-          });
-        }
-        // Otherwise it's an action object with label property
-        else if ('label' in action) {
-          const btn = document.createElement('button');
-          btn.className = `jux-modal-action jux-modal-action-${action.variant || 'default'}`;
-          btn.textContent = action.label;
-          btn.type = 'button';
-
-          btn.addEventListener('click', () => {
-            if (action.click) action.click();
-          });
-
-          footer.appendChild(btn);
-        }
-      });
-
-      modal.appendChild(footer);
-    }
-
-    overlay.appendChild(modal);
-
-    // Default dismiss behavior (only if NOT using sync)
-    if (!hasOpenSync) {
-      if (close) {
-        const closeButton = modal.querySelector('.jux-modal-close');
-        closeButton?.addEventListener('click', () => {
-          this.state.open = false;
-        });
-      }
-
-      if (backdropClose) {
-        overlay.addEventListener('click', (e) => {
-          if (e.target === overlay) {
-            this.state.open = false;
-          }
-        });
-      }
-    }
-
-    this._wireStandardEvents(overlay);
-
-    // Wire sync bindings
-    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;
-        });
-
-        if (close) {
-          const closeButton = modal.querySelector('.jux-modal-close');
-          closeButton?.addEventListener('click', () => {
-            if (isUpdating) return;
-            isUpdating = true;
-
-            this.state.open = false;
-            stateObj.set(transformToState(false));
-
-            setTimeout(() => { isUpdating = false; }, 0);
-          });
-        }
-
-        if (backdropClose) {
-          overlay.addEventListener('click', (e) => {
-            if (e.target === overlay) {
-              if (isUpdating) return;
-              isUpdating = true;
-
-              this.state.open = false;
-              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);
-          this.state.content = transformed;
-        });
-      }
-      else if (property === 'title') {
-        const transform = toComponent || ((v: any) => String(v));
-
-        stateObj.subscribe((val: any) => {
-          const transformed = transform(val);
-          this.state.title = transformed;
-        });
-      }
-    });
-
-    container.appendChild(overlay);
-
-    requestAnimationFrame(() => {
-      if ((window as any).Iconify) {
-        (window as any).Iconify.scan();
-      }
-    });
-
-    return this;
-  }
-}
-
-export function modal(id: string, options: ModalOptions = {}): Modal {
-  return new Modal(id, options);
-}

package/lib/components/nav.d.ts

@@ -1,46 +0,0 @@
-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;
-    update(prop: string, value: any): void;
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-}
-export declare function nav(id: string, options?: NavOptions): Nav;
-export {};
-//# sourceMappingURL=nav.d.ts.map

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

@@ -1 +0,0 @@
-{"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;IAK5B,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAQtC,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAyInE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,GAAG,GAAG,CAE7D"}