juxscript 1.0.132 → 1.1.2

package/lib/components/tabs.ts

@@ -0,0 +1,250 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['tabChange'] as const;
+
+export interface Tab {
+  id: string;
+  label: string;
+  content: string | HTMLElement;
+  icon?: string;
+}
+
+export interface TabsOptions {
+  tabs?: Tab[];
+  activeTab?: string;
+  variant?: 'default' | 'pills' | 'underline';
+  style?: string;
+  class?: string;
+}
+
+type TabsState = {
+  tabs: Tab[];
+  activeTab: string;
+  variant: string;
+  style: string;
+  class: string;
+};
+
+export class Tabs extends BaseComponent<TabsState> {
+  constructor(id: string, options: TabsOptions = {}) {
+    super(id, {
+      tabs: options.tabs ?? [],
+      activeTab: options.activeTab ?? (options.tabs?.[0]?.id ?? ''),
+      variant: options.variant ?? 'default',
+      style: options.style ?? '',
+      class: options.class ?? ''
+    });
+  }
+
+  protected getTriggerEvents(): readonly string[] {
+    return TRIGGER_EVENTS;
+  }
+
+  protected getCallbackEvents(): readonly string[] {
+    return CALLBACK_EVENTS;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
+
+  tabs(value: Tab[]): this {
+    this.state.tabs = value;
+    return this;
+  }
+
+  addTab(tab: Tab): this {
+    this.state.tabs = [...this.state.tabs, tab];
+    return this;
+  }
+
+  activeTab(value: string): this {
+    this.state.activeTab = value;
+    this._updateActiveTab();
+    return this;
+  }
+
+  variant(value: 'default' | 'pills' | 'underline'): this {
+    this.state.variant = value;
+    return this;
+  }
+
+  private _updateActiveTab(): void {
+    if (!this.container) return;
+    const wrapper = this.container.querySelector(`#${this._id}`);
+    if (!wrapper) return;
+
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
+    });
+
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === this.state.activeTab;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
+    });
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * RENDER
+   * ═════════════════════════════════════════════════════════════════ */
+
+  render(targetId?: string): this {
+    const container = this._setupContainer(targetId);
+
+    const { tabs, activeTab, variant, style, class: className } = this.state;
+    const hasActiveTabSync = this._syncBindings.some(b => b.property === 'activeTab');
+
+    const wrapper = document.createElement('div');
+    wrapper.className = `jux-tabs jux-tabs-${variant}`;
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
+
+    const tabList = document.createElement('div');
+    tabList.className = 'jux-tabs-list';
+
+    const tabPanels = document.createElement('div');
+    tabPanels.className = 'jux-tabs-panels';
+
+    tabs.forEach(tab => {
+      const tabButton = document.createElement('button');
+      tabButton.className = 'jux-tabs-button';
+      tabButton.setAttribute('data-tab', tab.id);
+      if (tab.id === activeTab) tabButton.classList.add('jux-tabs-button-active');
+      tabButton.textContent = tab.label;
+      tabList.appendChild(tabButton);
+
+      const tabPanel = document.createElement('div');
+      tabPanel.className = 'jux-tabs-panel';
+      tabPanel.setAttribute('data-tab', tab.id);
+      if (tab.id === activeTab) {
+        tabPanel.classList.add('jux-tabs-panel-active');
+      } else {
+        tabPanel.style.display = 'none';
+      }
+      if (typeof tab.content === 'string') {
+        tabPanel.innerHTML = tab.content;
+      } else {
+        tabPanel.appendChild(tab.content);
+      }
+      tabPanels.appendChild(tabPanel);
+    });
+
+    wrapper.appendChild(tabList);
+    wrapper.appendChild(tabPanels);
+
+    if (!hasActiveTabSync) {
+      tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+        button.addEventListener('click', () => {
+          const tabId = button.getAttribute('data-tab')!;
+          this.state.activeTab = tabId;
+          this._switchTab(tabId, wrapper);
+        });
+      });
+    }
+
+    this._wireStandardEvents(wrapper);
+
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'activeTab') {
+        const transformToState = toState || ((v: any) => String(v));
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        let isUpdating = false;
+
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.activeTab = transformed;
+          this._switchTab(transformed, wrapper);
+        });
+
+        tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+          button.addEventListener('click', () => {
+            if (isUpdating) return;
+            isUpdating = true;
+
+            const tabId = button.getAttribute('data-tab')!;
+            this.state.activeTab = tabId;
+            this._switchTab(tabId, wrapper);
+
+            const transformed = transformToState(tabId);
+            stateObj.set(transformed);
+
+            setTimeout(() => { isUpdating = false; }, 0);
+          });
+        });
+      }
+      else if (property === 'tabs') {
+        const transform = toComponent || ((v: any) => v);
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.tabs = transformed;
+
+          tabList.innerHTML = '';
+          tabPanels.innerHTML = '';
+
+          transformed.forEach((tab: any) => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'jux-tabs-button';
+            tabButton.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) tabButton.classList.add('jux-tabs-button-active');
+            tabButton.textContent = tab.label;
+            tabList.appendChild(tabButton);
+
+            const tabPanel = document.createElement('div');
+            tabPanel.className = 'jux-tabs-panel';
+            tabPanel.setAttribute('data-tab', tab.id);
+            if (tab.id === this.state.activeTab) {
+              tabPanel.classList.add('jux-tabs-panel-active');
+            } else {
+              tabPanel.style.display = 'none';
+            }
+            if (typeof tab.content === 'string') {
+              tabPanel.innerHTML = tab.content;
+            } else {
+              tabPanel.appendChild(tab.content);
+            }
+            tabPanels.appendChild(tabPanel);
+          });
+
+          tabList.querySelectorAll('.jux-tabs-button').forEach(button => {
+            button.addEventListener('click', () => {
+              const tabId = button.getAttribute('data-tab')!;
+              this.state.activeTab = tabId;
+              this._switchTab(tabId, wrapper);
+            });
+          });
+        });
+      }
+    });
+
+    container.appendChild(wrapper);
+    return this;
+  }
+
+  private _switchTab(tabId: string, wrapper: HTMLElement): void {
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === tabId);
+    });
+
+    wrapper.querySelectorAll('.jux-tabs-panel').forEach(panel => {
+      const isActive = panel.getAttribute('data-tab') === tabId;
+      panel.classList.toggle('jux-tabs-panel-active', isActive);
+      (panel as HTMLElement).style.display = isActive ? 'block' : 'none';
+    });
+
+    // 🎯 Fire the tabChange callback event
+    this._triggerCallback('tabChange', tabId);
+  }
+}
+
+export function tabs(id: string, options: TabsOptions = {}): Tabs {
+  return new Tabs(id, options);
+}

package/lib/components/theme-toggle.ts

@@ -0,0 +1,293 @@
+import { BaseComponent } from './base/BaseComponent.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['themeChange'] as const;
+
+export interface Theme {
+    id: string;
+    label: string;
+    icon?: string;
+    iconCollection?: string;
+}
+
+export interface ThemeToggleOptions {
+    themes?: Theme[];
+    defaultTheme?: string;
+    storageKey?: string;
+    showLabel?: boolean;
+    variant?: 'button' | 'dropdown' | 'cycle';
+    style?: string;
+    class?: string;
+}
+
+type ThemeToggleState = {
+    themes: Theme[];
+    currentTheme: string;
+    storageKey: string;
+    showLabel: boolean;
+    variant: string;
+    style: string;
+    class: string;
+};
+
+export class ThemeToggle extends BaseComponent<ThemeToggleState> {
+    constructor(id: string, options: ThemeToggleOptions = {}) {
+        const defaultThemes: Theme[] = [
+            { id: 'light', label: 'Light', icon: '☀️' },
+            { id: 'dark', label: 'Dark', icon: '🌙' }
+        ];
+
+        super(id, {
+            themes: options.themes ?? defaultThemes,
+            currentTheme: options.defaultTheme ?? ThemeToggle.detectTheme(options.storageKey),
+            storageKey: options.storageKey ?? 'jux-theme',
+            showLabel: options.showLabel ?? false,
+            variant: options.variant ?? 'button',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+
+        // Apply theme on initialization
+        this.applyTheme(this.state.currentTheme);
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * STATIC METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private static detectTheme(storageKey = 'jux-theme'): string {
+        if (typeof window === 'undefined') return 'light';
+
+        const stored = localStorage.getItem(storageKey);
+        if (stored) return stored;
+
+        const current = document.body.getAttribute('data-theme');
+        if (current) return current;
+
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark';
+        }
+
+        return 'light';
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from BaseComponent
+
+    themes(value: Theme[]): this {
+        this.state.themes = value;
+        return this;
+    }
+
+    variant(value: 'button' | 'dropdown' | 'cycle'): this {
+        this.state.variant = value;
+        return this;
+    }
+
+    showLabel(value: boolean): this {
+        this.state.showLabel = value;
+        return this;
+    }
+
+    setTheme(themeId: string): this {
+        const theme = this.state.themes.find(t => t.id === themeId);
+
+        if (!theme) {
+            console.warn(`Theme "${themeId}" not found in available themes`);
+            return this;
+        }
+
+        this.state.currentTheme = themeId;
+        this.applyTheme(themeId);
+        this._updateDOM();
+
+        return this;
+    }
+
+    getTheme(): string {
+        return this.state.currentTheme;
+    }
+
+    addTheme(theme: Theme): this {
+        if (!this.state.themes.find(t => t.id === theme.id)) {
+            this.state.themes.push(theme);
+        }
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * PRIVATE METHODS
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private applyTheme(themeId: string): void {
+        if (typeof document === 'undefined') return;
+
+        try {
+            document.body.setAttribute('data-theme', themeId);
+            document.documentElement.setAttribute('data-theme', themeId);
+            localStorage.setItem(this.state.storageKey, themeId);
+
+            window.dispatchEvent(new CustomEvent('themechange', {
+                detail: { theme: themeId }
+            }));
+
+            // 🎯 Fire the themeChange callback event
+            this._triggerCallback('themeChange', themeId);
+
+            console.log(`🎨 Theme applied: ${themeId}`);
+        } catch (error: any) {
+            throw new Error(`Failed to apply theme "${themeId}": ${error.message}`);
+        }
+    }
+
+    private cycleTheme(): void {
+        const currentIndex = this.state.themes.findIndex(t => t.id === this.state.currentTheme);
+        const nextIndex = (currentIndex + 1) % this.state.themes.length;
+        const nextTheme = this.state.themes[nextIndex];
+
+        this.setTheme(nextTheme.id);
+    }
+
+    private _updateDOM(): void {
+        if (!this.container) return;
+
+        const toggle = this.container.querySelector(`#${this._id}`);
+        if (!toggle) return;
+
+        const currentTheme = this.state.themes.find(t => t.id === this.state.currentTheme);
+        if (!currentTheme) return;
+
+        if (this.state.variant === 'button' || this.state.variant === 'cycle') {
+            const button = toggle.querySelector('button');
+            if (button && currentTheme.icon) {
+                button.innerHTML = '';
+                const iconElement = renderIcon(currentTheme.icon, currentTheme.iconCollection);
+                button.appendChild(iconElement);
+
+                if (this.state.showLabel) {
+                    const labelSpan = document.createElement('span');
+                    labelSpan.textContent = ` ${currentTheme.label}`;
+                    button.appendChild(labelSpan);
+                }
+
+                requestAnimationFrame(() => {
+                    if ((window as any).Iconify) {
+                        (window as any).Iconify.scan();
+                    }
+                });
+            }
+        }
+
+        if (this.state.variant === 'dropdown') {
+            const select = toggle.querySelector('select') as HTMLSelectElement;
+            if (select) {
+                select.value = this.state.currentTheme;
+            }
+        }
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { themes, currentTheme, showLabel, variant, style, class: className } = this.state;
+
+        const wrapper = document.createElement('div');
+        wrapper.className = `jux-theme-toggle`;
+        wrapper.id = this._id;
+
+        if (className) {
+            wrapper.className += ` ${className}`;
+        }
+
+        if (style) {
+            wrapper.setAttribute('style', style);
+        }
+
+        const theme = themes.find(t => t.id === currentTheme);
+
+        if (variant === 'button' || variant === 'cycle') {
+            const button = document.createElement('button');
+            button.className = 'jux-theme-toggle-button';
+            button.type = 'button';
+            button.setAttribute('aria-label', 'Toggle theme');
+
+            if (theme?.icon) {
+                const iconElement = renderIcon(theme.icon, theme.iconCollection);
+                button.appendChild(iconElement);
+            }
+
+            if (showLabel) {
+                const labelSpan = document.createElement('span');
+                labelSpan.textContent = ` ${theme?.label || currentTheme}`;
+                button.appendChild(labelSpan);
+            } else if (!theme?.icon) {
+                button.textContent = theme?.label || currentTheme;
+            }
+
+            button.addEventListener('click', () => {
+                this.cycleTheme();
+            });
+
+            wrapper.appendChild(button);
+
+        } else if (variant === 'dropdown') {
+            const select = document.createElement('select');
+            select.className = 'jux-theme-toggle-select';
+            select.setAttribute('aria-label', 'Select theme');
+
+            themes.forEach(t => {
+                const option = document.createElement('option');
+                option.value = t.id;
+                option.textContent = showLabel
+                    ? `${t.icon || ''} ${t.label}`.trim()
+                    : t.icon || t.label;
+
+                if (t.id === currentTheme) {
+                    option.selected = true;
+                }
+
+                select.appendChild(option);
+            });
+
+            select.addEventListener('change', (e) => {
+                const target = e.target as HTMLSelectElement;
+                this.setTheme(target.value);
+            });
+
+            wrapper.appendChild(select);
+        }
+
+        this._wireStandardEvents(wrapper);
+
+        container.appendChild(wrapper);
+
+        requestAnimationFrame(() => {
+            if ((window as any).Iconify) {
+                (window as any).Iconify.scan();
+            }
+        });
+
+        return this;
+    }
+}
+
+export function themeToggle(id: string, options: ThemeToggleOptions = {}): ThemeToggle {
+    return new ThemeToggle(id, options);
+}

package/lib/components/tooltip.ts

@@ -0,0 +1,144 @@
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = [] as const;
+
+export interface TooltipOptions {
+    text?: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    style?: string;
+    class?: string;
+}
+
+type TooltipState = {
+    text: string;
+    position: string;
+    style: string;
+    class: string;
+};
+
+export class Tooltip extends BaseComponent<TooltipState> {
+    private _tooltip: HTMLElement | null = null;
+    private _target: HTMLElement | null = null;
+
+    constructor(id: string, options: TooltipOptions = {}) {
+        super(id, {
+            text: options.text ?? '',
+            position: options.position ?? 'top',
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    text(value: string): this {
+        this.state.text = value;
+        return this;
+    }
+
+    position(value: 'top' | 'bottom' | 'left' | 'right'): this {
+        this.state.position = value;
+        return this;
+    }
+
+    attachTo(target: HTMLElement | null): this {
+        if (!target) return this;
+
+        this._target = target;
+        this._setupTooltip();
+        return this;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    private _setupTooltip(): void {
+        if (!this._target) return;
+
+        const { text, position, style, class: className } = this.state;
+
+        // Create tooltip element
+        const tooltip = document.createElement('div');
+        tooltip.className = `jux-tooltip jux-tooltip-${position}`;
+        tooltip.id = this._id;
+        if (className) tooltip.className += ` ${className}`;
+        if (style) tooltip.setAttribute('style', style);
+        tooltip.textContent = text;
+        tooltip.style.display = 'none';
+        this._tooltip = tooltip;
+
+        document.body.appendChild(tooltip);
+
+        // Show on hover
+        this._target.addEventListener('mouseenter', () => {
+            this._show();
+        });
+
+        this._target.addEventListener('mouseleave', () => {
+            this._hide();
+        });
+
+    }
+
+    private _show(): void {
+        if (!this._tooltip || !this._target) return;
+
+        const targetRect = this._target.getBoundingClientRect();
+        const tooltipRect = this._tooltip.getBoundingClientRect();
+
+        let top = 0;
+        let left = 0;
+
+        switch (this.state.position) {
+            case 'top':
+                top = targetRect.top - tooltipRect.height - 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'bottom':
+                top = targetRect.bottom + 8;
+                left = targetRect.left + (targetRect.width - tooltipRect.width) / 2;
+                break;
+            case 'left':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.left - tooltipRect.width - 8;
+                break;
+            case 'right':
+                top = targetRect.top + (targetRect.height - tooltipRect.height) / 2;
+                left = targetRect.right + 8;
+                break;
+        }
+
+        this._tooltip.style.top = `${top}px`;
+        this._tooltip.style.left = `${left}px`;
+        this._tooltip.style.display = 'block';
+    }
+
+    private _hide(): void {
+        if (this._tooltip) {
+            this._tooltip.style.display = 'none';
+        }
+    }
+
+    render(targetId?: string): this {
+        // Tooltips don't render to containers, they attach to targets
+        console.warn('Tooltip: Use .attachTo(element) instead of .render()');
+        return this;
+    }
+}
+
+export function tooltip(id: string, options: TooltipOptions = {}): Tooltip {
+    return new Tooltip(id, options);
+}