juxscript 1.0.3 → 1.0.4

package/lib/components/table.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Table column configuration
@@ -20,7 +20,9 @@ export interface TableOptions {
   striped?: boolean;
   hoverable?: boolean;
   bordered?: boolean;
-  allowHtml?: boolean;  // Enable HTML rendering in cells
+  allowHtml?: boolean;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -33,6 +35,8 @@ type TableState = {
   hoverable: boolean;
   bordered: boolean;
   allowHtml: boolean;
+  style: string;
+  class: string;
 };
 
 /**
@@ -46,7 +50,7 @@ type TableState = {
  *       { name: 'Bob', age: 25 }
  *     ],
  *     striped: true,
- *     allowHtml: true  // Enable HTML rendering
+ *     allowHtml: true
  *   });
  *   table.render();
  *
@@ -63,22 +67,26 @@ type TableState = {
  *   });
  *   table.render();
  */
-export class Table extends Reactive {
-  state!: TableState;
+export class Table {
+  state: TableState;
   container: HTMLElement | null = null;
+  _id: string;
+  id: string;
 
-  constructor(componentId: string, options: TableOptions = {}) {
-    super();
-    this._setComponentId(componentId);
+  constructor(id: string, options: TableOptions = {}) {
+    this._id = id;
+    this.id = id;
 
-    this.state = this._createReactiveState({
+    this.state = {
       columns: options.columns ?? [],
       data: options.data ?? [],
       striped: options.striped ?? false,
       hoverable: options.hoverable ?? true,
       bordered: options.bordered ?? false,
-      allowHtml: options.allowHtml ?? true  // Default to true for flexibility
-    }) as TableState;
+      allowHtml: options.allowHtml ?? true,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -115,6 +123,16 @@ export class Table extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
   /* -------------------------
    * Helpers
    * ------------------------- */
@@ -144,14 +162,12 @@ export class Table extends Reactive {
    *   'user_id' -> 'User Id'
    */
   private _formatLabel(key: string): string {
-    // Split on camelCase or snake_case
     const words = key
-      .replace(/([A-Z])/g, ' $1') // camelCase -> camel Case
-      .replace(/_/g, ' ')          // snake_case -> snake case
+      .replace(/([A-Z])/g, ' $1')
+      .replace(/_/g, ' ')
       .trim()
       .split(/\s+/);
 
-    // Capitalize first letter of each word
     return words
       .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
       .join(' ');
@@ -171,11 +187,11 @@ export class Table extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
 
     this.container = container;
-    let { columns, data, striped, hoverable, bordered, allowHtml } = this.state;
+    let { columns, data, striped, hoverable, bordered, allowHtml, style, class: className } = this.state;
 
     // Auto-generate columns if not provided
     if (columns.length === 0 && data.length > 0) {
@@ -184,7 +200,15 @@ export class Table extends Reactive {
 
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-table-wrapper';
-    wrapper.id = this._componentId;
+    wrapper.id = this._id;
+
+    if (className) {
+      wrapper.className += ` ${className}`;
+    }
+
+    if (style) {
+      wrapper.setAttribute('style', style);
+    }
 
     const table = document.createElement('table');
     table.className = 'jux-table';
@@ -218,7 +242,6 @@ export class Table extends Reactive {
         const td = document.createElement('td');
         if (col.align) td.style.textAlign = col.align;
 
-        // Get cell value
         const cellValue = row[col.key] ?? '';
 
         // Custom render function takes precedence
@@ -263,17 +286,17 @@ export class Table extends Reactive {
       throw new Error('Table.renderTo: Invalid component - not an object');
     }
 
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Table.renderTo: Invalid component - missing _componentId (not a Jux component)');
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Table.renderTo: Invalid component - missing _id (not a Jux component)');
     }
 
-    return this.render(`#${juxComponent._componentId}`);
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function table(componentId: string, options: TableOptions = {}): Table {
-  return new Table(componentId, options);
+export function table(id: string, options: TableOptions = {}): Table {
+  return new Table(id, options);
 }

package/lib/components/tabs.ts

@@ -1,4 +1,4 @@
-import { Reactive, getOrCreateContainer } from './reactivity.js';
+import { getOrCreateContainer } from './helpers.js';
 
 /**
  * Tab configuration
@@ -15,6 +15,8 @@ export interface Tab {
 export interface TabsOptions {
   tabs?: Tab[];
   activeTab?: string;
+  style?: string;
+  class?: string;
 }
 
 /**
@@ -23,6 +25,8 @@ export interface TabsOptions {
 type TabsState = {
   tabs: Tab[];
   activeTab: string;
+  style: string;
+  class: string;
 };
 
 /**
@@ -35,23 +39,27 @@ type TabsState = {
  *       { id: 'tab2', label: 'Tab 2', content: 'Content 2' }
  *     ]
  *   });
- *   await tabs.render();
+ *   tabs.render();
  */
-export class Tabs extends Reactive {
-  state!: TabsState;
+export class Tabs {
+  state: TabsState;
   container: HTMLElement | null = null;
-  
-  constructor(componentId: string, options: TabsOptions = {}) {
-    super();
-    this._setComponentId(componentId);
-    
+  _id: string;
+  id: string;
+
+  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 = this._createReactiveState({
+
+    this.state = {
       tabs,
-      activeTab
-    }) as TabsState;
+      activeTab,
+      style: options.style ?? '',
+      class: options.class ?? ''
+    };
   }
 
   /* -------------------------
@@ -64,7 +72,7 @@ export class Tabs extends Reactive {
   }
 
   addTab(tab: Tab): this {
-    this.state.tabs.push(tab);
+    this.state.tabs = [...this.state.tabs, tab];
     return this;
   }
 
@@ -73,13 +81,57 @@ export class Tabs extends Reactive {
     return this;
   }
 
+  style(value: string): this {
+    this.state.style = value;
+    return this;
+  }
+
+  class(value: string): this {
+    this.state.class = value;
+    return this;
+  }
+
+  /* -------------------------
+   * Helpers
+   * ------------------------- */
+
+  private _updateActiveTab(tabId: string): 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');
+      }
+    });
+
+    // 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');
+      }
+    });
+  }
+
   /* -------------------------
    * Render
    * ------------------------- */
 
-  async render(targetId?: string): Promise<this> {
+  render(targetId?: string): this {
     let container: HTMLElement;
-    
+
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -87,105 +139,95 @@ export class Tabs extends Reactive {
       }
       container = target;
     } else {
-      container = getOrCreateContainer(this._componentId) as HTMLElement;
+      container = getOrCreateContainer(this._id);
     }
-    
+
     this.container = container;
-    const { tabs, activeTab } = this.state;
-    
+    const { tabs, activeTab, style, class: className } = this.state;
+
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-tabs';
-    wrapper.id = this._componentId;
-    
+    wrapper.id = this._id;
+
+    if (className) {
+      wrapper.className += ` ${className}`;
+    }
+
+    if (style) {
+      wrapper.setAttribute('style', style);
+    }
+
     // Tab headers
     const tabHeaders = document.createElement('div');
     tabHeaders.className = 'jux-tabs-header';
-    
+
     tabs.forEach(tab => {
       const tabBtn = document.createElement('button');
       tabBtn.className = 'jux-tab-button';
       tabBtn.textContent = tab.label;
-      
+
       if (tab.id === activeTab) {
         tabBtn.classList.add('jux-tab-button-active');
       }
-      
+
       tabHeaders.appendChild(tabBtn);
-      
+
       // Event binding - tab click
       tabBtn.addEventListener('click', () => {
-        this.state.activeTab = tab.id;
-        
-        // Update active states
-        tabHeaders.querySelectorAll('.jux-tab-button').forEach(btn => {
-          btn.classList.remove('jux-tab-button-active');
-        });
-        tabBtn.classList.add('jux-tab-button-active');
-        
-        // Update content
-        tabPanels.querySelectorAll('.jux-tab-panel').forEach(panel => {
-          panel.classList.remove('jux-tab-panel-active');
-        });
-        const activePanel = tabPanels.querySelector(`[data-tab-id="${tab.id}"]`);
-        if (activePanel) {
-          activePanel.classList.add('jux-tab-panel-active');
-        }
-        
-        this.emit('tabChange', { tabId: tab.id });
+        this._updateActiveTab(tab.id);
       });
     });
-    
+
     wrapper.appendChild(tabHeaders);
-    
+
     // Tab panels
     const tabPanels = document.createElement('div');
     tabPanels.className = 'jux-tabs-panels';
-    
-    for (const tab of tabs) {
+
+    tabs.forEach(tab => {
       const panel = document.createElement('div');
       panel.className = 'jux-tab-panel';
       panel.setAttribute('data-tab-id', tab.id);
-      
+
       if (tab.id === activeTab) {
         panel.classList.add('jux-tab-panel-active');
       }
-      
+
       // Render content
       if (typeof tab.content === 'function') {
         panel.innerHTML = tab.content();
       } else {
         panel.innerHTML = tab.content;
       }
-      
+
       tabPanels.appendChild(panel);
-    }
-    
+    });
+
     wrapper.appendChild(tabPanels);
     container.appendChild(wrapper);
-    
-    this.emit('rendered');
+
     return this;
   }
 
   /**
    * Render to another Jux component's container
    */
-  async renderTo(juxComponent: any): Promise<this> {
+  renderTo(juxComponent: any): this {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Tabs.renderTo: Invalid component - not an object');
     }
-    
-    if (!juxComponent._componentId || typeof juxComponent._componentId !== 'string') {
-      throw new Error('Tabs.renderTo: Invalid component - missing _componentId (not a Jux component)');
+
+    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
+      throw new Error('Tabs.renderTo: Invalid component - missing _id (not a Jux component)');
     }
-    
-    return this.render(`#${juxComponent._componentId}`);
+
+    return this.render(`#${juxComponent._id}`);
   }
 }
 
 /**
  * Factory helper
  */
-export function tabs(componentId: string, options: TabsOptions = {}): Tabs {
-  return new Tabs(componentId, options);
+export function tabs(id: string, options: TabsOptions = {}): Tabs {
+  return new Tabs(id, options);
 }