juxscript 1.0.3 → 1.0.5

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);
 }

package/lib/components/paragraph.ts

@@ -0,0 +1,111 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * Paragraph options
+ */
+export interface ParagraphOptions {
+    text?: string;
+    class?: string;
+    style?: string;
+}
+
+/**
+ * Paragraph state
+ */
+type ParagraphState = {
+    text: string;
+    class: string;
+    style: string;
+};
+
+/**
+ * Paragraph component - semantic paragraph element
+ * 
+ * Usage:
+ *   jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');
+ *   jux.paragraph('description').text('A simple framework').render('#app');
+ */
+export class Paragraph {
+    state: ParagraphState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+
+    constructor(id: string, options: ParagraphOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            text: options.text ?? '',
+            class: options.class ?? '',
+            style: options.style ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string | HTMLElement): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            if (targetId instanceof HTMLElement) {
+                container = targetId;
+            } else {
+                const target = document.querySelector(targetId);
+                if (!target || !(target instanceof HTMLElement)) {
+                    throw new Error(`Paragraph: Target element "${targetId}" not found`);
+                }
+                container = target;
+            }
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { text, class: className, style } = this.state;
+
+        const p = document.createElement('p');
+        p.id = this._id;
+        p.textContent = text;
+
+        if (className) {
+            p.className = className;
+        }
+
+        if (style) {
+            p.setAttribute('style', style);
+        }
+
+        container.appendChild(p);
+
+        return this;
+    }
+}
+
+/**
+ * Factory helper
+ */
+export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
+    return new Paragraph(id, options);
+}

package/lib/components/progress.ts

@@ -0,0 +1,276 @@
+import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
+
+/**
+ * Progress component options
+ */
+export interface ProgressOptions {
+    value?: number;
+    max?: number;
+    label?: string;
+    showPercentage?: boolean;
+    variant?: 'default' | 'success' | 'warning' | 'error' | 'info';
+    size?: 'sm' | 'md' | 'lg';
+    striped?: boolean;
+    animated?: boolean;
+    style?: string;
+    class?: string;
+}
+
+/**
+ * Progress component state
+ */
+type ProgressState = {
+    value: number;
+    max: number;
+    label: string;
+    showPercentage: boolean;
+    variant: string;
+    size: string;
+    striped: boolean;
+    animated: boolean;
+    style: string;
+    class: string;
+};
+
+/**
+ * Progress component - Progress bar for loading/completion
+ * 
+ * Usage:
+ *   jux.progress('upload', {
+ *     value: 45,
+ *     max: 100,
+ *     label: 'Uploading...',
+ *     showPercentage: true,
+ *     animated: true
+ *   }).render('#app');
+ * 
+ *   // Update progress
+ *   const prog = jux.progress('upload').render('#app');
+ *   prog.value(75);
+ */
+export class Progress {
+    state: ProgressState;
+    container: HTMLElement | null = null;
+    _id: string;
+    id: string;
+    private _boundState?: State<number>;
+
+    constructor(id: string, options: ProgressOptions = {}) {
+        this._id = id;
+        this.id = id;
+
+        this.state = {
+            value: options.value ?? 0,
+            max: options.max ?? 100,
+            label: options.label ?? '',
+            showPercentage: options.showPercentage ?? false,
+            variant: options.variant ?? 'default',
+            size: options.size ?? 'md',
+            striped: options.striped ?? false,
+            animated: options.animated ?? false,
+            style: options.style ?? '',
+            class: options.class ?? ''
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    value(value: number): this {
+        this.state.value = Math.max(0, Math.min(value, this.state.max));
+        this._updateElement();
+        return this;
+    }
+
+    max(value: number): this {
+        this.state.max = value;
+        return this;
+    }
+
+    label(value: string): this {
+        this.state.label = value;
+        this._updateElement();
+        return this;
+    }
+
+    showPercentage(value: boolean): this {
+        this.state.showPercentage = value;
+        this._updateElement();
+        return this;
+    }
+
+    variant(value: 'default' | 'success' | 'warning' | 'error' | 'info'): this {
+        this.state.variant = value;
+        this._updateElement();
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    striped(value: boolean): this {
+        this.state.striped = value;
+        this._updateElement();
+        return this;
+    }
+
+    animated(value: boolean): this {
+        this.state.animated = value;
+        this._updateElement();
+        return this;
+    }
+
+    style(value: string): this {
+        this.state.style = value;
+        return this;
+    }
+
+    class(value: string): this {
+        this.state.class = value;
+        return this;
+    }
+
+    /**
+     * Two-way binding to state
+     */
+    bind(stateObj: State<number>): this {
+        this._boundState = stateObj;
+
+        stateObj.subscribe((val) => {
+            this.value(val);
+        });
+
+        return this;
+    }
+
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
+    private _updateElement(): void {
+        const wrapper = document.getElementById(this._id);
+        const bar = document.getElementById(`${this._id}-bar`);
+        const labelEl = document.getElementById(`${this._id}-label`);
+
+        // If element has a value attribute set externally (e.g., by bindValue), sync state
+        if (wrapper && wrapper.hasAttribute('data-value')) {
+            const externalValue = parseFloat(wrapper.getAttribute('data-value') || '0');
+            this.state.value = externalValue;
+        }
+
+        if (bar) {
+            const percentage = (this.state.value / this.state.max) * 100;
+            bar.style.width = `${percentage}%`;
+            bar.setAttribute('aria-valuenow', this.state.value.toString());
+            bar.className = `jux-progress-bar jux-progress-bar-${this.state.variant}`;
+
+            if (this.state.striped) {
+                bar.classList.add('jux-progress-bar-striped');
+            }
+            if (this.state.animated) {
+                bar.classList.add('jux-progress-bar-animated');
+            }
+        }
+
+        if (labelEl) {
+            const percentage = Math.round((this.state.value / this.state.max) * 100);
+            const text = this.state.showPercentage
+                ? `${this.state.label} ${percentage}%`.trim()
+                : this.state.label;
+            labelEl.textContent = text;
+        }
+    }
+
+    getPercentage(): number {
+        return Math.round((this.state.value / this.state.max) * 100);
+    }
+
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
+    render(targetId?: string): this {
+        let container: HTMLElement;
+
+        if (targetId) {
+            const target = document.querySelector(targetId);
+            if (!target || !(target instanceof HTMLElement)) {
+                throw new Error(`Progress: Target element "${targetId}" not found`);
+            }
+            container = target;
+        } else {
+            container = getOrCreateContainer(this._id);
+        }
+
+        this.container = container;
+        const { value, max, label, showPercentage, variant, size, striped, animated, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-progress jux-progress-${size}`;
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        // Label
+        if (label || showPercentage) {
+            const labelEl = document.createElement('div');
+            labelEl.className = 'jux-progress-label';
+            labelEl.id = `${this._id}-label`;
+            const percentage = Math.round((value / max) * 100);
+            const text = showPercentage
+                ? `${label} ${percentage}%`.trim()
+                : label;
+            labelEl.textContent = text;
+            wrapper.appendChild(labelEl);
+        }
+
+        // Progress track
+        const track = document.createElement('div');
+        track.className = 'jux-progress-track';
+
+        // Progress bar
+        const bar = document.createElement('div');
+        bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
+        bar.id = `${this._id}-bar`;
+        bar.setAttribute('role', 'progressbar');
+        bar.setAttribute('aria-valuenow', value.toString());
+        bar.setAttribute('aria-valuemin', '0');
+        bar.setAttribute('aria-valuemax', max.toString());
+
+        const percentage = (value / max) * 100;
+        bar.style.width = `${percentage}%`;
+
+        if (striped) {
+            bar.classList.add('jux-progress-bar-striped');
+        }
+        if (animated) {
+            bar.classList.add('jux-progress-bar-animated');
+        }
+
+        track.appendChild(bar);
+        wrapper.appendChild(track);
+        container.appendChild(wrapper);
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Progress.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function progress(id: string, options: ProgressOptions = {}): Progress {
+    return new Progress(id, options);
+}