juxscript 1.0.19 → 1.0.21

package/lib/components/tabs.ts

@@ -1,70 +1,56 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['tabChange'] as const;
 
-/**
- * Tab configuration
- */
 export interface Tab {
   id: string;
   label: string;
-  content: string | (() => string);
+  content: string | HTMLElement;
+  icon?: string;
 }
 
-/**
- * Tabs component options
- */
 export interface TabsOptions {
   tabs?: Tab[];
   activeTab?: string;
+  variant?: 'default' | 'pills' | 'underline';
   style?: string;
   class?: string;
 }
 
-/**
- * Tabs component state
- */
 type TabsState = {
   tabs: Tab[];
   activeTab: string;
+  variant: string;
   style: string;
   class: string;
 };
 
-/**
- * Tabs component
- * 
- * Usage:
- *   const tabs = jux.tabs('myTabs', {
- *     tabs: [
- *       { id: 'tab1', label: 'Tab 1', content: 'Content 1' },
- *       { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
- *     ]
- *   });
- *   tabs.render();
- */
-export class Tabs {
-  state: TabsState;
-  container: HTMLElement | null = null;
-  _id: string;
-  id: string;
-
+export class Tabs extends BaseComponent<TabsState> {
   constructor(id: string, options: TabsOptions = {}) {
-    this._id = id;
-    this.id = id;
-
-    const tabs = options.tabs ?? [];
-    const activeTab = options.activeTab ?? (tabs.length > 0 ? tabs[0].id : '');
-
-    this.state = {
-      tabs,
-      activeTab,
+    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
-   * ------------------------- */
+  /* ═════════════════════════════════════════════════════════════════
+   * FLUENT API
+   * ═════════════════════════════════════════════════════════════════ */
+
+  // ✅ Inherited from BaseComponent
 
   tabs(value: Tab[]): this {
     this.state.tabs = value;
@@ -78,156 +64,187 @@ export class Tabs {
 
   activeTab(value: string): this {
     this.state.activeTab = value;
+    this._updateActiveTab();
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
-    return this;
-  }
-
-  class(value: string): this {
-    this.state.class = value;
+  variant(value: 'default' | 'pills' | 'underline'): this {
+    this.state.variant = value;
     return this;
   }
 
-  /* -------------------------
-   * Helpers
-   * ------------------------- */
-
-  private _updateActiveTab(tabId: string): void {
+  private _updateActiveTab(): void {
     if (!this.container) return;
-
     const wrapper = this.container.querySelector(`#${this._id}`);
     if (!wrapper) return;
 
-    this.state.activeTab = tabId;
-
-    // Update tab buttons
-    const tabButtons = wrapper.querySelectorAll('.jux-tab-button');
-    tabButtons.forEach((btn, index) => {
-      if (this.state.tabs[index]?.id === tabId) {
-        btn.classList.add('jux-tab-button-active');
-      } else {
-        btn.classList.remove('jux-tab-button-active');
-      }
+    wrapper.querySelectorAll('.jux-tabs-button').forEach(btn => {
+      btn.classList.toggle('jux-tabs-button-active', btn.getAttribute('data-tab') === this.state.activeTab);
     });
 
-    // Update tab panels
-    const tabPanels = wrapper.querySelectorAll('.jux-tab-panel');
-    tabPanels.forEach(panel => {
-      const panelId = panel.getAttribute('data-tab-id');
-      if (panelId === tabId) {
-        panel.classList.add('jux-tab-panel-active');
-      } else {
-        panel.classList.remove('jux-tab-panel-active');
-      }
+    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
+   * ═════════════════════════════════════════════════════════════════ */
 
   render(targetId?: string): this {
-    let container: HTMLElement;
+    const container = this._setupContainer(targetId);
 
-    if (targetId) {
-      const target = document.querySelector(targetId);
-      if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Tabs: Target element "${targetId}" not found`);
-      }
-      container = target;
-    } else {
-      container = getOrCreateContainer(this._id);
-    }
-
-    this.container = container;
-    const { tabs, activeTab, style, class: className } = this.state;
+    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';
+    wrapper.className = `jux-tabs jux-tabs-${variant}`;
     wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
-    if (className) {
-      wrapper.className += ` ${className}`;
-    }
-
-    if (style) {
-      wrapper.setAttribute('style', style);
-    }
+    const tabList = document.createElement('div');
+    tabList.className = 'jux-tabs-list';
 
-    // Tab headers
-    const tabHeaders = document.createElement('div');
-    tabHeaders.className = 'jux-tabs-header';
+    const tabPanels = document.createElement('div');
+    tabPanels.className = 'jux-tabs-panels';
 
     tabs.forEach(tab => {
-      const tabBtn = document.createElement('button');
-      tabBtn.className = 'jux-tab-button';
-      tabBtn.textContent = tab.label;
-
+      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) {
-        tabBtn.classList.add('jux-tab-button-active');
+        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);
+    });
 
-      tabHeaders.appendChild(tabBtn);
+    wrapper.appendChild(tabList);
+    wrapper.appendChild(tabPanels);
 
-      // Event binding - tab click
-      tabBtn.addEventListener('click', () => {
-        this._updateActiveTab(tab.id);
+    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);
+        });
       });
-    });
+    }
 
-    wrapper.appendChild(tabHeaders);
+    this._wireStandardEvents(wrapper);
 
-    // Tab panels
-    const tabPanels = document.createElement('div');
-    tabPanels.className = 'jux-tabs-panels';
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'activeTab') {
+        const transformToState = toState || ((v: any) => String(v));
+        const transformToComponent = toComponent || ((v: any) => String(v));
 
-    tabs.forEach(tab => {
-      const panel = document.createElement('div');
-      panel.className = 'jux-tab-panel';
-      panel.setAttribute('data-tab-id', tab.id);
+        let isUpdating = false;
 
-      if (tab.id === activeTab) {
-        panel.classList.add('jux-tab-panel-active');
-      }
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          this.state.activeTab = transformed;
+          this._switchTab(transformed, wrapper);
+        });
 
-      // Render content
-      if (typeof tab.content === 'function') {
-        panel.innerHTML = tab.content();
-      } else {
-        panel.innerHTML = tab.content;
-      }
+        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);
 
-      tabPanels.appendChild(panel);
+            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);
+            });
+          });
+        });
+      }
     });
 
-    wrapper.appendChild(tabPanels);
     container.appendChild(wrapper);
-
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
-  renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Tabs.renderTo: Invalid component - not an object');
-    }
+  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);
+    });
 
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Tabs.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
+    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';
+    });
 
-    return this.render(`#${juxComponent._id}`);
+    // 🎯 Fire the tabChange callback event
+    this._triggerCallback('tabChange', tabId);
   }
 }
 
-/**
- * Factory helper
- */
 export function tabs(id: string, options: TabsOptions = {}): Tabs {
   return new Tabs(id, options);
 }