juxscript 1.0.131 → 1.1.0

package/lib/components/nav.ts

@@ -0,0 +1,257 @@
+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 = [] as const;
+
+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 class Nav extends BaseComponent<NavState> {
+  private _nav: HTMLElement | null = null;
+
+  constructor(id: string, options: NavOptions = {}) {
+    super(id, {
+      items: options.items ?? [],
+      brand: options.brand,
+      variant: options.variant ?? 'default',
+      sticky: options.sticky ?? false,
+      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: req.isActiveNavItem(item.href)
+    }));
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  items(value: NavItem[]): this {
+    this.state.items = value;
+    this._setActiveStates();
+    return this;
+  }
+
+  addItem(item: NavItem): 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
+    }));
+    return this;
+  }
+
+  brand(value: NavBrand): this {
+    this.state.brand = value;
+    return this;
+  }
+
+  variant(value: string): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  sticky(value: boolean): this {
+    this.state.sticky = value;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { brand, items, variant, sticky, style, class: className } = this.state;
+
+    const nav = document.createElement('nav');
+    nav.className = `jux-nav jux-nav-${variant}`;
+    nav.id = this._id;
+    if (sticky) nav.classList.add('jux-nav-sticky');
+    if (className) nav.className += ` ${className}`;
+    if (style) nav.setAttribute('style', style);
+
+    // Brand/Logo
+    if (brand) {
+      const brandEl = document.createElement('div');
+      brandEl.className = 'jux-nav-brand';
+
+      if (brand.href) {
+        const link = document.createElement('a');
+        link.href = brand.href;
+        if (brand.icon) {
+          const icon = document.createElement('span');
+          icon.appendChild(renderIcon(brand.icon));
+          link.appendChild(icon);
+        }
+        if (brand.text) {
+          const text = document.createElement('span');
+          text.textContent = brand.text;
+          link.appendChild(text);
+        }
+        brandEl.appendChild(link);
+      } else {
+        if (brand.icon) {
+          const icon = document.createElement('span');
+          icon.appendChild(renderIcon(brand.icon));
+          brandEl.appendChild(icon);
+        }
+        if (brand.text) {
+          const text = document.createElement('span');
+          text.textContent = brand.text;
+          brandEl.appendChild(text);
+        }
+      }
+
+      nav.appendChild(brandEl);
+    }
+
+    // Nav items container
+    const itemsContainer = document.createElement('div');
+    itemsContainer.className = 'jux-nav-items';
+
+    items.forEach(item => {
+      const itemWrapper = document.createElement('div');
+      itemWrapper.className = 'jux-nav-item-wrapper';
+
+      if (item.itemClass) {
+        itemWrapper.className += ` ${item.itemClass}`;
+      }
+
+      const navLink = document.createElement('a');
+      navLink.className = 'jux-nav-link';
+      navLink.href = item.href;
+      navLink.textContent = item.label;
+      if (item.active) {
+        itemWrapper.classList.add('jux-nav-item-active');
+        navLink.classList.add('jux-nav-link-active');
+      }
+
+      itemWrapper.appendChild(navLink);
+      itemsContainer.appendChild(itemWrapper);
+    });
+
+    nav.appendChild(itemsContainer);
+
+    this._wireStandardEvents(nav);
+
+    // 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();
+
+          itemsContainer.innerHTML = '';
+          this.state.items.forEach((item: any) => {
+            const itemWrapper = document.createElement('div');
+            itemWrapper.className = 'jux-nav-item-wrapper';
+
+            if (item.itemClass) {
+              itemWrapper.className += ` ${item.itemClass}`;
+            }
+
+            const navLink = document.createElement('a');
+            navLink.className = 'jux-nav-link';
+            navLink.href = item.href;
+            navLink.textContent = item.label;
+            if (item.active) {
+              itemWrapper.classList.add('jux-nav-item-active');
+              navLink.classList.add('jux-nav-link-active');
+            }
+
+            itemWrapper.appendChild(navLink);
+            itemsContainer.appendChild(itemWrapper);
+          });
+        });
+      }
+      else if (property === 'brand') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          const brandEl = nav.querySelector('.jux-nav-brand');
+          if (brandEl && transformed.text) {
+            const textEl = brandEl.querySelector('span:last-child');
+            if (textEl) {
+              textEl.textContent = transformed.text;
+            }
+          }
+          this.state.brand = transformed;
+        });
+      }
+    });
+
+    container.appendChild(nav);
+    this._nav = nav;
+
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
+    return this;
+  }
+}
+
+export function nav(id: string, options: NavOptions = {}): Nav {
+  return new Nav(id, options);
+}

package/lib/components/paragraph.ts

@@ -0,0 +1,97 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface ParagraphOptions {
+    content?: string;
+    class?: string;
+    style?: string;
+}
+
+type ParagraphState = {
+    content: string;
+    class: string;
+    style: string;
+};
+
+export class Paragraph extends BaseComponent<ParagraphState> {
+    constructor(id: string, options: ParagraphOptions = {}) {
+        super(id, {
+            content: options.content ?? '',
+            class: options.class ?? '',
+            style: options.style ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent:
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - All other base methods
+
+    content(value: string): this {
+        this.state.content = value;
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { content, style, class: className } = this.state;
+
+        const paragraph = document.createElement('p');
+        paragraph.className = 'jux-paragraph';
+        paragraph.id = this._id;
+        paragraph.textContent = content;
+        if (className) paragraph.className += ` ${className}`;
+        if (style) paragraph.setAttribute('style', style);
+
+        this._wireStandardEvents(paragraph);
+
+        // Wire sync bindings
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'content') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    paragraph.textContent = transformed;
+                    this.state.content = transformed;
+                });
+            }
+            else if (property === 'class') {
+                const transform = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform(val);
+                    paragraph.className = `jux-paragraph ${transformed}`;
+                    this.state.class = transformed;
+                });
+            }
+        });
+
+        container.appendChild(paragraph);
+        return this;
+    }
+}
+
+export function paragraph(id: string, options: ParagraphOptions = {}): Paragraph {
+    return new Paragraph(id, options);
+}

package/lib/components/progress.ts

@@ -0,0 +1,159 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface ProgressOptions {
+    value?: number;
+    max?: number;
+    variant?: 'default' | 'success' | 'warning' | 'error';
+    showPercentage?: boolean;
+    label?: string;
+    size?: 'sm' | 'md' | 'lg';
+    style?: string;
+    class?: string;
+}
+
+type ProgressState = {
+    value: number;
+    max: number;
+    variant: string;
+    showPercentage: boolean;
+    label: string;
+    size: string;
+    style: string;
+    class: string;
+};
+
+export class Progress extends BaseComponent<ProgressState> {
+    private _bar: HTMLElement | null = null;
+    private _label: HTMLElement | null = null;
+
+    constructor(id: string, options: ProgressOptions = {}) {
+        super(id, {
+            value: options.value ?? 0,
+            max: options.max ?? 100,
+            variant: options.variant ?? 'default',
+            showPercentage: options.showPercentage ?? false,
+            label: options.label ?? '',
+            size: options.size ?? 'md',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    value(val: number): this {
+        this.state.value = Math.max(0, Math.min(val, this.state.max));
+        this._updateProgress();
+        return this;
+    }
+
+    max(val: number): this {
+        this.state.max = val;
+        this._updateProgress();
+        return this;
+    }
+
+    variant(value: 'default' | 'success' | 'warning' | 'error'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    showPercentage(value: boolean): this {
+        this.state.showPercentage = value;
+        return this;
+    }
+
+    label(value: string): this {
+        this.state.label = value;
+        if (this._label) {
+            this._label.textContent = value;
+        }
+        return this;
+    }
+
+    size(value: 'sm' | 'md' | 'lg'): this {
+        this.state.size = value;
+        return this;
+    }
+
+    private _updateProgress(): void {
+        if (this._bar) {
+            const percentage = (this.state.value / this.state.max) * 100;
+            this._bar.style.width = `${percentage}%`;
+            if (this._label) {
+                // Use custom label if set, otherwise show percentage
+                this._label.textContent = this.state.label || `${Math.round(percentage)}%`;
+            }
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { value, max, variant, showPercentage, label, size, 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);
+
+        const track = document.createElement('div');
+        track.className = 'jux-progress-track';
+
+        const bar = document.createElement('div');
+        bar.className = `jux-progress-bar jux-progress-bar-${variant}`;
+        const percentage = (value / max) * 100;
+        bar.style.width = `${percentage}%`;
+        this._bar = bar;
+
+        if (showPercentage || label) {
+            const labelEl = document.createElement('span');
+            labelEl.className = 'jux-progress-label';
+            labelEl.textContent = label || `${Math.round(percentage)}%`;
+            bar.appendChild(labelEl);
+            this._label = labelEl;
+        }
+
+        track.appendChild(bar);
+        wrapper.appendChild(track);
+
+        this._wireStandardEvents(wrapper);
+
+        // Wire sync for value
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'value') {
+                const transform = toComponent || ((v: any) => Number(v));
+                stateObj.subscribe((val: any) => {
+                    this.value(transform(val));
+                });
+            }
+        });
+
+        container.appendChild(wrapper);
+
+        return this;
+    }
+}
+
+export function progress(id: string, options: ProgressOptions = {}): Progress {
+    return new Progress(id, options);
+}