juxscript 1.0.2 → 1.0.4

package/lib/components/main.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Main component options
@@ -6,6 +6,8 @@ import { Reactive, getOrCreateContainer } from './reactivity.js';
 export interface MainOptions {
   content?: string;
   padding?: string;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -14,6 +16,8 @@ export interface MainOptions {
 type MainState = {
   content: string;
   padding: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -26,18 +30,22 @@ type MainState = {
  *   });
  *   main.render('#appmain');
  */
-export class Main extends Reactive {
-  state!: MainState;
+export class Main {
+  state: MainState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: MainOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: MainOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       content: options.content ?? '',
-      padding: options.padding ?? 'var(--space-xl)'
-    }) as MainState;
+      padding: options.padding ?? 'var(--space-xl)',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -54,6 +62,16 @@ export class Main extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -68,17 +86,25 @@ export class Main extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { content, padding } = this.state;
+    const { content, padding, style, class: className } = this.state;
 
     const main = document.createElement('main');
     main.className = 'jux-main';
-    main.id = this._componentId;
+    main.id = this._id;
     main.style.padding = padding;
 
+    if (style) {
+      main.setAttribute('style', style);
+    }
+
+    if (className) {
+      main.className += ` ${className}`;
+    }
+
     if (content) {
       main.innerHTML = content;
     }
@@ -95,17 +121,17 @@ export class Main extends Reactive {
       throw new Error('Main.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Main.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Main.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function main(componentId: string, options: MainOptions = {}): Main {
-  return new Main(componentId, options);
+export function main(id: string, options: MainOptions = {}): Main {
+  return new Main(id, options);
 }

package/lib/components/menu.ts

@@ -1,4 +1,5 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
+import { req } from './req.js';
 
 /**
  * Menu item configuration
@@ -6,9 +7,10 @@ import { Reactive, getOrCreateContainer } from './reactivity.js';
 export interface MenuItem {
   label: string;
   href?: string;
-  onClick?: () => void;
+  click?: () => void;
   icon?: string;
   items?: MenuItem[];
+  active?: boolean;
 }
 
 /**
@@ -17,6 +19,8 @@ export interface MenuItem {
 export interface MenuOptions {
   items?: MenuItem[];
   orientation?: 'vertical' | 'horizontal';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -25,6 +29,8 @@ export interface MenuOptions {
 type MenuState = {
   items: MenuItem[];
   orientation: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -39,19 +45,43 @@ type MenuState = {
  *     ]
  *   });
  *   menu.render();
+ * 
+ * Active states are automatically set based on current URL
  */
-export class Menu extends Reactive {
-  state!: MenuState;
+export class Menu {
+  state: MenuState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: MenuOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: MenuOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       items: options.items ?? [],
-      orientation: options.orientation ?? 'vertical'
-    }) as MenuState;
+      orientation: options.orientation ?? 'vertical',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+
+    // Auto-set active state based on current path
+    this._setActiveStates();
+  }
+
+  /**
+   * Set active state on items based on current request path
+   */
+  private _setActiveStates(): void {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      active: item.href ? req.isActiveNavItem(item.href) : false,
+      // Recursively set active for subitems
+      items: item.items?.map(subItem => ({
+        ...subItem,
+        active: subItem.href ? req.isActiveNavItem(subItem.href) : false
+      }))
+    }));
   }
 
   /* -------------------------
@@ -60,11 +90,13 @@ export class Menu extends Reactive {
 
   items(value: MenuItem[]): this {
     this.state.items = value;
+    this._setActiveStates();
     return this;
   }
 
   addItem(item: MenuItem): this {
-    this.state.items.push(item);
+    this.state.items = [...this.state.items, item];
+    this._setActiveStates();
     return this;
   }
 
@@ -73,6 +105,16 @@ export class Menu extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Helpers
    * ------------------------- */
@@ -81,21 +123,55 @@ export class Menu extends Reactive {
     const menuItem = document.createElement('div');
     menuItem.className = 'jux-menu-item';
 
+    // Add active class if item is active
+    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;
-      link.textContent = item.label;
+
+      // Add active class to link if item is active
+      if (item.active) {
+        link.classList.add('jux-menu-link-active');
+      }
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.textContent = item.icon;
+        link.appendChild(icon);
+      }
+
+      const label = document.createElement('span');
+      label.className = 'jux-menu-label';
+      label.textContent = item.label;
+      link.appendChild(label);
+
       menuItem.appendChild(link);
     } else {
       const button = document.createElement('button');
       button.className = 'jux-menu-button';
-      button.textContent = item.label;
+
+      if (item.icon) {
+        const icon = document.createElement('span');
+        icon.className = 'jux-menu-icon';
+        icon.textContent = 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);
 
-      // Event binding - onClick
-      if (item.onClick) {
-        button.addEventListener('click', item.onClick);
+      // Event binding - click
+      if (item.click) {
+        button.addEventListener('click', item.click);
       }
     }
 
@@ -128,15 +204,23 @@ export class Menu extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { items, orientation } = this.state;
+    const { items, orientation, style, class: className } = this.state;
 
     const menu = document.createElement('nav');
     menu.className = `jux-menu jux-menu-${orientation}`;
-    menu.id = this._componentId;
+    menu.id = this._id;
+
+    if (className) {
+      menu.className += ` ${className}`;
+    }
+
+    if (style) {
+      menu.setAttribute('style', style);
+    }
 
     items.forEach(item => {
       menu.appendChild(this._renderMenuItem(item));
@@ -154,17 +238,17 @@ export class Menu extends Reactive {
       throw new Error('Menu.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Menu.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Menu.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function menu(componentId: string, options: MenuOptions = {}): Menu {
-  return new Menu(componentId, options);
+export function menu(id: string, options: MenuOptions = {}): Menu {
+  return new Menu(id, options);
 }

package/lib/components/modal.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Modal component options
@@ -9,6 +9,8 @@ export interface ModalOptions {
   showCloseButton?: boolean;
   closeOnBackdropClick?: boolean;
   size?: 'small' | 'medium' | 'large';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -21,6 +23,8 @@ type ModalState = {
   closeOnBackdropClick: boolean;
   size: string;
   isOpen: boolean;
+  style: string;
+  class: string;
 };
 
 /**
@@ -35,22 +39,26 @@ type ModalState = {
  *   modal.render();
  *   modal.open();
  */
-export class Modal extends Reactive {
-  state!: ModalState;
+export class Modal {
+  state: ModalState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: ModalOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: ModalOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       title: options.title ?? '',
       content: options.content ?? '',
       showCloseButton: options.showCloseButton ?? true,
       closeOnBackdropClick: options.closeOnBackdropClick ?? true,
       size: options.size ?? 'medium',
-      isOpen: false
-    }) as ModalState;
+      isOpen: false,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -82,6 +90,20 @@ export class Modal extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Modal controls
+   * ------------------------- */
+
   open(): this {
     this.state.isOpen = true;
     if (this.container) {
@@ -90,7 +112,6 @@ export class Modal extends Reactive {
         modalEl.classList.add('jux-modal-open');
       }
     }
-    this.emit('open');
     return this;
   }
 
@@ -102,7 +123,6 @@ export class Modal extends Reactive {
         modalEl.classList.remove('jux-modal-open');
       }
     }
-    this.emit('close');
     return this;
   }
 
@@ -120,16 +140,24 @@ export class Modal extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { title, content, showCloseButton, closeOnBackdropClick, size, isOpen } = this.state;
+    const { title, content, showCloseButton, closeOnBackdropClick, size, isOpen, style, class: className } = this.state;
 
     // Modal backdrop
     const modal = document.createElement('div');
     modal.className = `jux-modal jux-modal-${size}`;
-    modal.id = this._componentId;
+    modal.id = this._id;
+
+    if (className) {
+      modal.className += ` ${className}`;
+    }
+
+    if (style) {
+      modal.setAttribute('style', style);
+    }
 
     if (isOpen) {
       modal.classList.add('jux-modal-open');
@@ -183,11 +211,12 @@ export class Modal extends Reactive {
     }
 
     // Event binding - escape key
-    document.addEventListener('keydown', (e) => {
+    const escapeHandler = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && this.state.isOpen) {
         this.close();
       }
-    });
+    };
+    document.addEventListener('keydown', escapeHandler);
 
     return this;
   }
@@ -200,17 +229,17 @@ export class Modal extends Reactive {
       throw new Error('Modal.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Modal.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Modal.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function modal(componentId: string, options: ModalOptions = {}): Modal {
-  return new Modal(componentId, options);
+export function modal(id: string, options: ModalOptions = {}): Modal {
+  return new Modal(id, options);
 }

package/lib/components/nav.ts

@@ -1,4 +1,5 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
+import { req } from './req.js';
 
 /**
  * Nav item configuration
@@ -15,6 +16,8 @@ export interface NavItem {
 export interface NavOptions {
   items?: NavItem[];
   variant?: 'default' | 'pills' | 'tabs';
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -23,6 +26,8 @@ export interface NavOptions {
 type NavState = {
   items: NavItem[];
   variant: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -38,18 +43,35 @@ type NavState = {
  *   });
  *   nav.render();
  */
-export class Nav extends Reactive {
-  state!: NavState;
+export class Nav {
+  state: NavState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: NavOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: NavOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       items: options.items ?? [],
-      variant: options.variant ?? 'default'
-    }) as NavState;
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
+
+    // Auto-set active state based on current path
+    this._setActiveStates();
+  }
+
+  /**
+   * Set active state on items based on current request path
+   */
+  private _setActiveStates(): void {
+    this.state.items = this.state.items.map(item => ({
+      ...item,
+      active: req.isActiveNavItem(item.href)
+    }));
   }
 
   /* -------------------------
@@ -58,11 +80,13 @@ export class Nav extends Reactive {
 
   items(value: NavItem[]): this {
     this.state.items = value;
+    this._setActiveStates();
     return this;
   }
 
   addItem(item: NavItem): this {
-    this.state.items.push(item);
+    this.state.items = [...this.state.items, item];
+    this._setActiveStates();
     return this;
   }
 
@@ -71,6 +95,16 @@ export class Nav extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
@@ -85,15 +119,23 @@ export class Nav extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    const { items, variant } = this.state;
+    const { items, variant, style, class: className } = this.state;
 
     const nav = document.createElement('nav');
     nav.className = `jux-nav jux-nav-${variant}`;
-    nav.id = this._componentId;
+    nav.id = this._id;
+
+    if (className) {
+      nav.className += ` ${className}`;
+    }
+
+    if (style) {
+      nav.setAttribute('style', style);
+    }
 
     items.forEach(item => {
       const link = document.createElement('a');
@@ -120,17 +162,17 @@ export class Nav extends Reactive {
       throw new Error('Nav.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Nav.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Nav.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function nav(componentId: string, options: NavOptions = {}): Nav {
-  return new Nav(componentId, options);
+export function nav(id: string, options: NavOptions = {}): Nav {
+  return new Nav(id, options);
 }