mtrl 0.2.4 → 0.2.6

package/src/components/tabs/api.ts

@@ -1,443 +1,221 @@
 // src/components/tabs/api.ts
-import { TabsComponent, TabItem, TabChangeEventData } from './types';
-import { ANIMATION_DURATION } from './constants';
+import { TabsComponent, TabComponent, TabConfig } from './types';
+import { createTab } from './tab';
 
+/**
+ * API options for a Tabs component
+ */
 interface ApiOptions {
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-    isDisabled: () => boolean;
-  };
+  /** The component's lifecycle API */
   lifecycle: {
     destroy: () => void;
   };
 }
 
+/**
+ * Component with required elements and methods
+ */
 interface ComponentWithElements {
+  /** The DOM element */
   element: HTMLElement;
+  /** Array of tab components */
+  tabs: TabComponent[];
+  /** Container for tabs */
+  tabsContainer: HTMLElement;
+  /** Tab click handler */
+  handleTabClick: (event: Event, tab: TabComponent) => void;
+  /** Scroll container (optional) */
+  scrollContainer?: HTMLElement;
+  /** Class name helper */
   getClass: (name: string) => string;
-  events: {
-    emit: (name: string, data?: any) => void;
-    on: (name: string, handler: Function) => any;
-    off: (name: string, handler: Function) => any;
-  };
+  /** Event subscription (optional) */
+  on?: (event: string, handler: Function) => any;
+  /** Event unsubscription (optional) */
+  off?: (event: string, handler: Function) => any;
+  /** Event emission (optional) */
+  emit?: (event: string, data: any) => any;
+  /** Component configuration */
+  config: Record<string, any>;
 }
 
-/**
- * Creates DOM elements for the tabs component
- * @param component - Base component with element and class getter
- * @returns Component with tabs-specific elements
- */
-const setupElements = (component: ComponentWithElements) => {
-  const baseClass = component.getClass('tabs');
-  
-  // Create tabs list container
-  const tabsListElement = document.createElement('div');
-  tabsListElement.className = `${baseClass}__list`;
-  tabsListElement.setAttribute('role', 'none');
-  
-  // Create tabs indicator
-  const indicatorElement = document.createElement('span');
-  indicatorElement.className = `${baseClass}__indicator`;
-  
-  // Append elements to container
-  component.element.appendChild(tabsListElement);
-  component.element.appendChild(indicatorElement);
-  
-  return {
-    ...component,
-    tabsListElement,
-    indicatorElement
-  };
-};
-
 /**
  * Enhances a tabs component with API methods
  * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
- * @internal This is an internal utility for the Tabs component
  */
-export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: ReturnType<typeof setupElements>): TabsComponent => {
-    // Set up internal state
-    let items: TabItem[] = [];
-    let activeIndex = -1;
+export const withAPI = ({ lifecycle }: ApiOptions) => 
+  (component: ComponentWithElements): TabsComponent => ({
+    ...component as any,
+    element: component.element,
     
-    // Set up the component with DOM elements
-    const enhancedComponent = setupElements(component);
-    
-    // Function to create a tab element
-    const createTabElement = (item: TabItem, index: number) => {
-      const baseClass = component.getClass('tabs');
-      const tabElement = document.createElement('button');
-      
-      tabElement.className = `${baseClass}__tab`;
-      tabElement.setAttribute('role', 'tab');
-      tabElement.setAttribute('type', 'button');
-      tabElement.setAttribute('data-tab-id', item.id);
-      tabElement.setAttribute('data-tab-index', index.toString());
-      tabElement.setAttribute('aria-selected', 'false');
-      
-      if (item.disabled) {
-        tabElement.disabled = true;
-        tabElement.setAttribute('aria-disabled', 'true');
+    /**
+     * Creates and adds a new tab
+     */
+    addTab(config: TabConfig) {
+      // Create a merged config that inherits from tabs component
+      const mergedConfig = {
+        ...config,
+        prefix: component.config.prefix,
+        variant: config.variant || component.config.variant
+      };
+      
+      // Ensure value is set if not provided
+      if (mergedConfig.value === undefined) {
+        mergedConfig.value = ''; // Default empty value
       }
       
-      // Create content container
-      const contentElement = document.createElement('div');
-      contentElement.className = `${baseClass}__tab-content`;
+      // Create the tab
+      const tab = createTab(mergedConfig);
       
-      // Add icon if provided
-      if (item.icon) {
-        const iconElement = document.createElement('div');
-        iconElement.className = `${baseClass}__tab-icon`;
-        iconElement.innerHTML = item.icon;
-        contentElement.appendChild(iconElement);
-      }
+      // Add to internal tabs array
+      component.tabs.push(tab);
       
-      // Add label
-      const labelElement = document.createElement('div');
-      labelElement.className = `${baseClass}__tab-label`;
-      labelElement.textContent = item.label;
-      contentElement.appendChild(labelElement);
+      // Add to DOM
+      const targetContainer = component.tabsContainer;
+      targetContainer.appendChild(tab.element);
       
-      tabElement.appendChild(contentElement);
+      // Add click handler with robust event handling
+      if (tab.on && typeof tab.on === 'function') {
+        tab.on('click', (event) => component.handleTabClick(event, tab));
+      }
       
-      // Add click event
-      tabElement.addEventListener('click', () => {
-        if (!tabElement.disabled && !disabled.isDisabled()) {
-          const clickedIndex = parseInt(tabElement.getAttribute('data-tab-index') || '0', 10);
-          api.setActiveTab(clickedIndex);
-        }
+      // Add direct DOM event handler as a fallback
+      tab.element.addEventListener('click', (event) => {
+        component.handleTabClick(event, tab);
       });
       
-      return tabElement;
-    };
+      return tab;
+    },
     
-    // Function to update the indicator position
-    const updateIndicator = (animate = true) => {
-      if (activeIndex < 0 || !items.length) {
-        // Hide indicator if no active tab
-        enhancedComponent.indicatorElement.style.transform = 'translateX(-100%)';
-        return;
+    /**
+     * Adds a pre-created tab
+     */
+    add(tab: TabComponent) {
+      component.tabs.push(tab);
+      
+      // Add tab to DOM
+      const targetContainer = component.tabsContainer;
+      targetContainer.appendChild(tab.element);
+      
+      // Add click handler via API and direct DOM event
+      if (tab.on && typeof tab.on === 'function') {
+        tab.on('click', (event) => component.handleTabClick(event, tab));
       }
       
-      // Find the active tab element
-      const tabElement = enhancedComponent.tabsListElement.querySelector(
-        `[data-tab-index="${activeIndex}"]`
-      ) as HTMLElement;
-      
-      if (!tabElement) return;
-      
-      // Calculate position
-      const tabRect = tabElement.getBoundingClientRect();
-      const listRect = enhancedComponent.tabsListElement.getBoundingClientRect();
-      
-      const left = tabElement.offsetLeft;
-      const width = tabRect.width;
-      
-      // Update indicator style
-      enhancedComponent.indicatorElement.style.transition = animate ? 
-        `transform ${ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1)` : 'none';
-      enhancedComponent.indicatorElement.style.transform = `translateX(${left}px)`;
-      enhancedComponent.indicatorElement.style.width = `${width}px`;
+      tab.element.addEventListener('click', (event) => {
+        component.handleTabClick(event, tab);
+      });
       
-      // Scroll into view if needed
-      if (enhancedComponent.element.classList.contains(`${component.getClass('tabs')}--scrollable`)) {
-        const scrollLeft = enhancedComponent.tabsListElement.scrollLeft;
-        const listWidth = listRect.width;
-        
-        if (left < scrollLeft) {
-          enhancedComponent.tabsListElement.scrollTo({
-            left: left,
-            behavior: animate ? 'smooth' : 'auto'
-          });
-        } else if (left + width > scrollLeft + listWidth) {
-          enhancedComponent.tabsListElement.scrollTo({
-            left: left + width - listWidth,
-            behavior: animate ? 'smooth' : 'auto'
-          });
-        }
-      }
-    };
+      return this;
+    },
     
-    // Function to update tab elements' states
-    const updateTabStates = () => {
-      // Update aria-selected for all tabs
-      const tabElements = enhancedComponent.tabsListElement.querySelectorAll('[role="tab"]');
-      
-      tabElements.forEach((tab: Element) => {
-        const index = parseInt(tab.getAttribute('data-tab-index') || '-1', 10);
-        tab.setAttribute('aria-selected', index === activeIndex ? 'true' : 'false');
-        
-        if (index === activeIndex) {
-          tab.classList.add(`${component.getClass('tabs')}__tab--active`);
-        } else {
-          tab.classList.remove(`${component.getClass('tabs')}__tab--active`);
-        }
-      });
-    };
+    /**
+     * Gets all tabs
+     */
+    getTabs() {
+      return [...component.tabs];
+    },
     
-    // Create the API object
-    const api: TabsComponent = {
-      ...enhancedComponent as any,
-      element: enhancedComponent.element,
-      tabsListElement: enhancedComponent.tabsListElement,
-      indicatorElement: enhancedComponent.indicatorElement,
-      disabled,
-      lifecycle,
-      
-      getClass: component.getClass,
-      
-      enable() {
-        disabled.enable();
-        this.element.removeAttribute('aria-disabled');
-        return this;
-      },
-      
-      disable() {
-        disabled.disable();
-        this.element.setAttribute('aria-disabled', 'true');
-        return this;
-      },
-      
-      getItems() {
-        return [...items];
-      },
-      
-      setItems(newItems) {
-        // Clear existing tabs
-        while (this.tabsListElement.firstChild) {
-          this.tabsListElement.removeChild(this.tabsListElement.firstChild);
-        }
-        
-        // Store items and create elements
-        items = [...newItems];
-        
-        // Create tab elements
-        items.forEach((item, index) => {
-          const tabElement = createTabElement(item, index);
-          this.tabsListElement.appendChild(tabElement);
-        });
-        
-        // Reset active tab if needed
-        if (activeIndex >= items.length) {
-          activeIndex = items.length > 0 ? 0 : -1;
-        }
-        
-        // Update UI
-        updateTabStates();
-        updateIndicator(false);
-        
-        return this;
-      },
-      
-      addTab(item, index) {
-        const newItems = [...items];
-        
-        if (index !== undefined && index >= 0 && index <= items.length) {
-          // Insert at specific position
-          newItems.splice(index, 0, item);
-          
-          // Adjust active index if needed
-          if (activeIndex >= index) {
-            activeIndex++;
-          }
-        } else {
-          // Append to end
-          newItems.push(item);
-        }
-        
-        return this.setItems(newItems);
-      },
-      
-      removeTab(idOrIndex) {
-        if (items.length === 0) return this;
-        
-        let index = -1;
-        
-        if (typeof idOrIndex === 'number') {
-          index = idOrIndex;
-        } else {
-          // Find by ID
-          index = items.findIndex(item => item.id === idOrIndex);
-        }
-        
-        if (index < 0 || index >= items.length) return this;
-        
-        const newItems = items.filter((_, i) => i !== index);
-        
-        // Handle active index adjustment
-        let newActiveIndex = activeIndex;
-        
-        if (activeIndex === index) {
-          // Removed active tab, select a new one
-          if (newItems.length > 0) {
-            newActiveIndex = Math.min(activeIndex, newItems.length - 1);
-          } else {
-            newActiveIndex = -1;
-          }
-        } else if (activeIndex > index) {
-          // Active tab is after removed tab, adjust index
-          newActiveIndex--;
-        }
-        
-        // Update items
-        items = newItems;
-        
-        // Rebuild the tabs
-        this.setItems(newItems);
-        
-        // Set the correct active tab
-        if (newActiveIndex >= 0) {
-          this.setActiveTab(newActiveIndex);
-        }
-        
-        return this;
-      },
-      
-      getActiveTab() {
-        return activeIndex >= 0 && activeIndex < items.length ? items[activeIndex] : null;
-      },
-      
-      getActiveIndex() {
-        return activeIndex;
-      },
-      
-      setActiveTab(index) {
-        if (
-          index < 0 || 
-          index >= items.length || 
-          items[index].disabled || 
-          disabled.isDisabled() || 
-          index === activeIndex
-        ) {
-          return this;
-        }
-        
-        const previousIndex = activeIndex;
-        const previousTab = this.getActiveTab();
-        
-        activeIndex = index;
-        const currentTab = items[index];
-        
-        // Update DOM
-        updateTabStates();
-        updateIndicator();
-        
-        // Emit change event
-        component.events.emit('change', {
-          index,
-          tab: currentTab,
-          previousIndex,
-          previousTab
-        } as TabChangeEventData);
-        
-        return this;
-      },
-      
-      setActiveTabById(id) {
-        const index = items.findIndex(item => item.id === id);
-        if (index >= 0) {
-          this.setActiveTab(index);
-        }
-        return this;
-      },
-      
-      destroy() {
-        // Clean up event listeners
-        const tabElements = enhancedComponent.tabsListElement.querySelectorAll('[role="tab"]');
-        tabElements.forEach(tab => {
-          tab.replaceWith(tab.cloneNode(true));
+    /**
+     * Gets the active tab
+     */
+    getActiveTab() {
+      return component.tabs.find(tab => tab.isActive()) || null;
+    },
+    
+    /**
+     * Sets a tab as active
+     */
+    setActiveTab(tabOrValue: TabComponent | string) {
+      const targetTab = typeof tabOrValue === 'string'
+        ? component.tabs.find(tab => tab.getValue() === tabOrValue)
+        : tabOrValue;
+        
+      if (!targetTab) return this;
+      
+      // Deactivate all tabs first
+      component.tabs.forEach(tab => tab.deactivate());
+      
+      // Activate the target tab
+      targetTab.activate();
+      
+      // Emit change event
+      if (component.emit) {
+        component.emit('change', {
+          tab: targetTab,
+          value: targetTab.getValue()
         });
-        
-        // Call lifecycle destroy
-        lifecycle.destroy();
-      },
+      }
       
-      on(event, handler) {
-        component.events.on(event, handler);
-        return this;
-      },
+      return this;
+    },
+    
+    /**
+     * Removes a tab
+     */
+    removeTab(tabOrValue: TabComponent | string) {
+      const targetTab = typeof tabOrValue === 'string'
+        ? component.tabs.find(tab => tab.getValue() === tabOrValue)
+        : tabOrValue;
+        
+      if (!targetTab) return this;
+      
+      // Remove from array
+      const index = component.tabs.indexOf(targetTab);
+      if (index !== -1) {
+        component.tabs.splice(index, 1);
+      }
       
-      off(event, handler) {
-        component.events.off(event, handler);
-        return this;
+      // Clean up tab and remove from DOM
+      if (targetTab.element.parentNode) {
+        targetTab.element.parentNode.removeChild(targetTab.element);
       }
-    };
-    
-    // Set up keyboard navigation
-    enhancedComponent.element.addEventListener('keydown', (e: KeyboardEvent) => {
-      if (disabled.isDisabled() || !items.length) return;
       
-      const key = e.key;
-      let newIndex = activeIndex;
+      targetTab.destroy();
       
-      switch (key) {
-        case 'ArrowRight':
-        case 'ArrowDown':
-          // Move to next non-disabled tab
-          for (let i = 1; i <= items.length; i++) {
-            const index = (activeIndex + i) % items.length;
-            if (!items[index].disabled) {
-              newIndex = index;
-              break;
-            }
-          }
-          break;
-          
-        case 'ArrowLeft':
-        case 'ArrowUp':
-          // Move to previous non-disabled tab
-          for (let i = 1; i <= items.length; i++) {
-            const index = (activeIndex - i + items.length) % items.length;
-            if (!items[index].disabled) {
-              newIndex = index;
-              break;
-            }
-          }
-          break;
-          
-        case 'Home':
-          // Move to first non-disabled tab
-          for (let i = 0; i < items.length; i++) {
-            if (!items[i].disabled) {
-              newIndex = i;
-              break;
-            }
-          }
-          break;
-          
-        case 'End':
-          // Move to last non-disabled tab
-          for (let i = items.length - 1; i >= 0; i--) {
-            if (!items[i].disabled) {
-              newIndex = i;
-              break;
-            }
-          }
-          break;
-          
-        default:
-          return;
+      return this;
+    },
+    
+    /**
+     * Adds an event listener
+     */
+    on(event: string, handler: Function) {
+      if (component.on) {
+        component.on(event, handler);
       }
-      
-      if (newIndex !== activeIndex) {
-        e.preventDefault();
-        api.setActiveTab(newIndex);
-        
-        // Focus the tab
-        const tabElement = enhancedComponent.tabsListElement.querySelector(
-          `[data-tab-index="${newIndex}"]`
-        ) as HTMLElement;
-        
-        if (tabElement) {
-          tabElement.focus();
-        }
+      return this;
+    },
+    
+    /**
+     * Removes an event listener
+     */
+    off(event: string, handler: Function) {
+      if (component.off) {
+        component.off(event, handler);
       }
-    });
+      return this;
+    },
     
-    return api;
-  };
+    /**
+     * Destroys the tabs component
+     */
+    destroy() {
+      // Clean up all tabs first
+      component.tabs.forEach(tab => tab.destroy());
+      component.tabs.length = 0;
+      
+      // Then destroy container
+      lifecycle.destroy();
+    }
+  });
 
-export default withAPI;
+/**
+ * Creates API configuration for the Tabs component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  }
+});