juxscript 1.1.2 → 1.1.4

package/lib/components/nav.ts

@@ -1,257 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,159 +0,0 @@
-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);
-}