mtrl 0.2.5 → 0.2.7

package/src/components/tabs/state.ts

@@ -0,0 +1,186 @@
+// src/components/tabs/state.ts
+import { TabComponent } from './types';
+import { TabIndicator } from './indicator';
+
+/**
+ * State manager for MD3 tab states
+ * Handles proper state transitions between tabs
+ */
+export interface TabsStateManager {
+  /**
+   * Activates a tab and handles state transitions
+   * @param tab - The tab to activate
+   * @param immediate - Whether to skip animation
+   */
+  activateTab: (tab: TabComponent, immediate?: boolean) => void;
+  
+  /**
+   * Gets the currently active tab
+   */
+  getActiveTab: () => TabComponent | null;
+  
+  /**
+   * Cleans up event listeners
+   */
+  destroy: () => void;
+}
+
+/**
+ * Options for creating a tabs state manager
+ */
+export interface TabsStateOptions {
+  /**
+   * Initial tabs to manage
+   */
+  tabs: TabComponent[];
+  
+  /**
+   * Optional callback when active tab changes
+   */
+  onChange?: (data: { tab: TabComponent; value: string }) => void;
+  
+  /**
+   * Optional indicator component
+   */
+  indicator?: TabIndicator;
+}
+
+/**
+ * Creates a state manager for MD3 tabs
+ * @param options - State manager options
+ * @returns A tabs state manager instance
+ */
+export const createTabsState = (options: TabsStateOptions): TabsStateManager => {
+  const { tabs = [], onChange, indicator } = options;
+  let activeTab: TabComponent | null = null;
+  
+  // Find initial active tab if any
+  const initialActiveTab = tabs.find(tab => tab.isActive());
+  if (initialActiveTab) {
+    activeTab = initialActiveTab;
+    
+    // Position indicator at initial active tab
+    if (indicator) {
+      // Delay initial positioning to ensure DOM is ready
+      setTimeout(() => {
+        indicator.moveToTab(initialActiveTab, true);
+      }, 50);
+    }
+  }
+  
+  /**
+   * Handles ripple effect on tab activation
+   * @param tab - The tab to add ripple to 
+   */
+  const addRippleEffect = (tab: TabComponent): void => {
+    if (!tab.element) return;
+    
+    const ripple = tab.element.querySelector(`.${tab.getClass('tab')}-ripple`);
+    if (!ripple) return;
+    
+    // Create a new ripple element
+    const rippleElement = document.createElement('span');
+    rippleElement.className = 'ripple';
+    
+    // Position the ripple in the center
+    rippleElement.style.width = '100%';
+    rippleElement.style.height = '100%';
+    rippleElement.style.left = '0';
+    rippleElement.style.top = '0';
+    
+    // Add animation
+    rippleElement.style.animation = 'ripple-effect 0.4s cubic-bezier(0.4, 0, 0.2, 1)';
+    
+    // Add to DOM
+    ripple.appendChild(rippleElement);
+    
+    // Remove after animation completes
+    setTimeout(() => {
+      rippleElement.remove();
+    }, 400);
+  };
+  
+  /**
+   * Activates a tab with proper state transitions
+   */
+  const activateTab = (tab: TabComponent, immediate = false): void => {
+    if (!tab || (activeTab === tab)) return;
+    
+    // First deactivate the current active tab
+    if (activeTab) {
+      activeTab.deactivate();
+    }
+    
+    // Activate the new tab
+    tab.activate();
+    activeTab = tab;
+    
+    // Move indicator to this tab
+    if (indicator) {
+      // Small delay to ensure DOM updates before indicator positioning
+      setTimeout(() => {
+        indicator.moveToTab(tab, immediate);
+      }, 10);
+    }
+    
+    // Add ripple effect unless immediate mode is on
+    if (!immediate) {
+      addRippleEffect(tab);
+    }
+    
+    // Trigger change callback
+    if (onChange) {
+      onChange({
+        tab,
+        value: tab.getValue()
+      });
+    }
+  };
+  
+  /**
+   * Gets the currently active tab
+   */
+  const getActiveTab = (): TabComponent | null => {
+    return activeTab;
+  };
+  
+  /**
+   * Cleans up resources
+   */
+  const destroy = (): void => {
+    // Clean up any event listeners or timers
+    activeTab = null;
+  };
+  
+  return {
+    activateTab,
+    getActiveTab,
+    destroy
+  };
+};
+
+/**
+ * Adds animation styles for ripple effects
+ * This is separate from indicator animations
+ */
+export const addTabStateStyles = (): void => {
+  // Only add once
+  if (document.getElementById('tab-state-styles')) return;
+  
+  const style = document.createElement('style');
+  style.id = 'tab-state-styles';
+  style.textContent = `
+    @keyframes ripple-effect {
+      0% {
+        transform: scale(0);
+        opacity: 0.2;
+      }
+      100% {
+        transform: scale(1);
+        opacity: 0;
+      }
+    }
+  `;
+  
+  document.head.appendChild(style);
+};

package/src/components/tabs/tab-api.ts

@@ -0,0 +1,258 @@
+// src/components/tabs/tab-api.ts
+import { TabComponent } from './types';
+import { TAB_STATES, TAB_LAYOUT } from './constants';
+import { BadgeComponent } from '../badge/types';
+import createBadge from '../badge';
+
+/**
+ * API options for a Tab component
+ */
+interface ApiOptions {
+  /** The button component's disabled API */
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+    isDisabled?: () => boolean;
+  };
+  /** The component's lifecycle API */
+  lifecycle: {
+    destroy: () => void;
+  };
+  /** The button component (optional) */
+  button?: any;
+}
+
+/**
+ * Component with required elements and methods
+ */
+interface ComponentWithElements {
+  /** The DOM element */
+  element: HTMLElement;
+  /** The button component (optional) */
+  button?: any;
+  /** The badge component (optional) */
+  badge?: BadgeComponent;
+  /** Class name helper */
+  getClass: (name: string) => string;
+  /** Component configuration */
+  config: Record<string, any>;
+  /** Event emitter (optional) */
+  emit?: (event: string, data: any) => any;
+}
+
+/**
+ * Enhances a tab component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) => 
+  (component: ComponentWithElements): TabComponent => {
+    // Use the button component as a delegate for some methods
+    const buttonComponent = button || component.button;
+    
+    return {
+      ...component as any,
+      element: component.element,
+      
+      /**
+       * Gets the tab's value
+       */
+      getValue: () => {
+        if (buttonComponent && typeof buttonComponent.getValue === 'function') {
+          return buttonComponent.getValue();
+        }
+        const value = component.element.getAttribute('data-value');
+        return value !== null ? value : '';
+      },
+      
+      /**
+       * Sets the tab's value
+       */
+      setValue(value: string) {
+        const safeValue = value || '';
+        if (buttonComponent && typeof buttonComponent.setValue === 'function') {
+          buttonComponent.setValue(safeValue);
+        } else {
+          component.element.setAttribute('data-value', safeValue);
+        }
+        return this;
+      },
+      
+      /**
+       * Activates the tab
+       */
+      activate() {
+        component.element.classList.add(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.setAttribute('aria-selected', 'true');
+        return this;
+      },
+      
+      /**
+       * Deactivates the tab
+       */
+      deactivate() {
+        component.element.classList.remove(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.setAttribute('aria-selected', 'false');
+        return this;
+      },
+      
+      /**
+       * Checks if the tab is active
+       */
+      isActive() {
+        return component.element.classList.contains(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+      },
+      
+      /**
+       * Enables the tab
+       */
+      enable() {
+        if (disabled && typeof disabled.enable === 'function') {
+          disabled.enable();
+        }
+        return this;
+      },
+      
+      /**
+       * Disables the tab
+       */
+      disable() {
+        if (disabled && typeof disabled.disable === 'function') {
+          disabled.disable();
+        }
+        return this;
+      },
+      
+      /**
+       * Sets the tab's text content
+       */
+      setText(content: string) {
+        if (buttonComponent && typeof buttonComponent.setText === 'function') {
+          buttonComponent.setText(content);
+          this.updateLayoutStyle();
+        }
+        return this;
+      },
+      
+      /**
+       * Gets the tab's text content
+       */
+      getText() {
+        return buttonComponent && typeof buttonComponent.getText === 'function' 
+          ? buttonComponent.getText() 
+          : '';
+      },
+      
+      /**
+       * Sets the tab's icon
+       */
+      setIcon(icon: string) {
+        if (buttonComponent && typeof buttonComponent.setIcon === 'function') {
+          buttonComponent.setIcon(icon);
+          this.updateLayoutStyle();
+        }
+        return this;
+      },
+      
+      /**
+       * Gets the tab's icon
+       */
+      getIcon() {
+        return buttonComponent && typeof buttonComponent.getIcon === 'function'
+          ? buttonComponent.getIcon()
+          : '';
+      },
+      
+      /**
+       * Sets the tab's badge
+       */
+      setBadge(content: string | number) {
+        if (!component.badge) {
+          // Create badge on demand if it doesn't exist
+          const badgeConfig = {
+            content,
+            standalone: false,
+            target: component.element,
+            prefix: component.config.prefix
+          };
+          component.badge = createBadge(badgeConfig);
+        } else {
+          component.badge.setContent(content);
+          component.badge.show();
+        }
+        return this;
+      },
+      
+      /**
+       * Gets the tab's badge content
+       */
+      getBadge() {
+        return component.badge ? component.badge.getContent() : '';
+      },
+      
+      /**
+       * Shows the tab's badge
+       */
+      showBadge() {
+        if (component.badge) {
+          component.badge.show();
+        }
+        return this;
+      },
+      
+      /**
+       * Hides the tab's badge
+       */
+      hideBadge() {
+        if (component.badge) {
+          component.badge.hide();
+        }
+        return this;
+      },
+      
+      /**
+       * Gets the badge component
+       */
+      getBadgeComponent() {
+        return component.badge;
+      },
+      
+      /**
+       * Destroys the tab
+       */
+      destroy() {
+        if (component.badge) {
+          component.badge.destroy();
+        }
+        
+        if (lifecycle && typeof lifecycle.destroy === 'function') {
+          lifecycle.destroy();
+        }
+      },
+      
+      /**
+       * Updates tab layout classes based on content
+       */
+      updateLayoutStyle() {
+        const hasText = !!this.getText();
+        const hasIcon = !!this.getIcon();
+        let layoutClass = '';
+        
+        if (hasText && hasIcon) {
+          layoutClass = TAB_LAYOUT.ICON_AND_TEXT;
+        } else if (hasIcon) {
+          layoutClass = TAB_LAYOUT.ICON_ONLY;
+        } else {
+          layoutClass = TAB_LAYOUT.TEXT_ONLY;
+        }
+        
+        // Remove all existing layout classes
+        Object.values(TAB_LAYOUT).forEach(layout => {
+          component.element.classList.remove(`${component.getClass('tab')}--${layout}`);
+        });
+        
+        // Add the appropriate layout class
+        component.element.classList.add(`${component.getClass('tab')}--${layoutClass}`);
+      }
+    };
+  };

package/src/components/tabs/tab.ts

@@ -0,0 +1,255 @@
+// src/components/tabs/tab.ts
+import { pipe } from '../../core/compose';
+import { createBase } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { TabConfig, TabComponent } from './types';
+import { TAB_STATES, TAB_LAYOUT } from './constants';
+import { createTabConfig } from './config';
+import createButton from '../button';
+import createBadge from '../badge';
+
+/**
+ * Creates a new Tab component following MD3 guidelines
+ * @param {TabConfig} config - Tab configuration object
+ * @returns {TabComponent} Tab component instance
+ */
+export const createTab = (config: TabConfig = {}): TabComponent => {
+  const baseConfig = createTabConfig(config);
+  
+  try {
+    // Create base component with events and lifecycle
+    const baseComponent = pipe(
+      createBase,
+      withEvents(),
+      withLifecycle()
+    )(baseConfig);
+    
+    // Create a button for the tab
+    const button = createButton({
+      text: baseConfig.text,
+      icon: baseConfig.icon,
+      iconSize: baseConfig.iconSize,
+      disabled: baseConfig.disabled,
+      ripple: baseConfig.ripple !== false, // Enable ripple by default
+      rippleConfig: {
+        duration: 400,
+        timing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        opacity: ['0.2', '0'],
+        ...(baseConfig.rippleConfig || {})
+      },
+      value: baseConfig.value,
+      prefix: baseConfig.prefix,
+      variant: 'text', // MD3 tabs use text button style
+      class: `${baseConfig.prefix}-tab`
+    });
+    
+    // Use the button element as our element
+    baseComponent.element = button.element;
+    
+    // Set up tab accessibility attributes
+    baseComponent.element.setAttribute('role', 'tab');
+    baseComponent.element.setAttribute('aria-selected', 
+      baseConfig.state === TAB_STATES.ACTIVE ? 'true' : 'false');
+    
+    // For better accessibility
+    if (baseConfig.value) {
+      baseComponent.element.setAttribute('id', `tab-${baseConfig.value}`);
+      baseComponent.element.setAttribute('aria-controls', `tabpanel-${baseConfig.value}`);
+    }
+    
+    // Add active state if specified in config
+    if (baseConfig.state === TAB_STATES.ACTIVE) {
+      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+    }
+    
+    // Forward button events to our component
+    button.on('click', (event) => {
+      if (baseComponent.emit) {
+        baseComponent.emit('click', event);
+      }
+    });
+    
+    // Create the tab component with enhanced API
+    const tab: TabComponent = {
+      ...baseComponent,
+      button,
+      element: button.element,
+      
+      // Badge support
+      badge: null,
+      
+      // Tab state methods
+      getValue() {
+        return button.getValue();
+      },
+      
+      setValue(value) {
+        const safeValue = value || '';
+        button.setValue(safeValue);
+        
+        // Update accessibility attributes
+        this.element.setAttribute('id', `tab-${safeValue}`);
+        this.element.setAttribute('aria-controls', `tabpanel-${safeValue}`);
+        
+        return this;
+      },
+      
+      activate() {
+        this.element.classList.add(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.setAttribute('aria-selected', 'true');
+        
+        // Dispatch event for screen readers
+        const event = new CustomEvent('tab:activated', { 
+          bubbles: true,
+          detail: { value: this.getValue() }
+        });
+        this.element.dispatchEvent(event);
+        
+        return this;
+      },
+      
+      deactivate() {
+        this.element.classList.remove(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.setAttribute('aria-selected', 'false');
+        return this;
+      },
+      
+      isActive() {
+        return this.element.classList.contains(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+      },
+      
+      enable() {
+        button.enable();
+        this.element.removeAttribute('aria-disabled');
+        return this;
+      },
+      
+      disable() {
+        button.disable();
+        this.element.setAttribute('aria-disabled', 'true');
+        return this;
+      },
+      
+      setText(content) {
+        button.setText(content);
+        this.updateLayoutStyle();
+        return this;
+      },
+      
+      getText() {
+        return button.getText();
+      },
+      
+      setIcon(icon) {
+        button.setIcon(icon);
+        this.updateLayoutStyle();
+        return this;
+      },
+      
+      getIcon() {
+        return button.getIcon();
+      },
+      
+      // Badge methods
+      setBadge(content) {
+        if (!this.badge) {
+          const badgeConfig = {
+            content,
+            standalone: false,
+            target: this.element,
+            prefix: baseConfig.prefix,
+            ...(baseConfig.badgeConfig || {})
+          };
+          
+          this.badge = createBadge(badgeConfig);
+        } else {
+          this.badge.setContent(content);
+          this.badge.show();
+        }
+        
+        // Add badge presence attribute for potential styling
+        this.element.setAttribute('data-has-badge', 'true');
+        
+        return this;
+      },
+      
+      getBadge() {
+        return this.badge ? this.badge.getContent() : '';
+      },
+      
+      showBadge() {
+        if (this.badge) {
+          this.badge.show();
+          this.element.setAttribute('data-has-badge', 'true');
+        }
+        return this;
+      },
+      
+      hideBadge() {
+        if (this.badge) {
+          this.badge.hide();
+          this.element.setAttribute('data-has-badge', 'false');
+        }
+        return this;
+      },
+      
+      getBadgeComponent() {
+        return this.badge;
+      },
+      
+      destroy() {
+        if (this.badge) {
+          this.badge.destroy();
+        }
+        
+        if (button.destroy) {
+          button.destroy();
+        }
+        
+        baseComponent.lifecycle.destroy();
+      },
+      
+      updateLayoutStyle() {
+        const hasText = !!this.getText();
+        const hasIcon = !!this.getIcon();
+        let layoutClass = '';
+        
+        if (hasText && hasIcon) {
+          layoutClass = TAB_LAYOUT.ICON_AND_TEXT;
+        } else if (hasIcon) {
+          layoutClass = TAB_LAYOUT.ICON_ONLY;
+        } else {
+          layoutClass = TAB_LAYOUT.TEXT_ONLY;
+        }
+        
+        // Remove all existing layout classes
+        Object.values(TAB_LAYOUT).forEach(layout => {
+          this.element.classList.remove(`${this.getClass('tab')}--${layout}`);
+        });
+        
+        // Add the appropriate layout class
+        this.element.classList.add(`${this.getClass('tab')}--${layoutClass}`);
+        
+        // Set appropriate aria-label when icon-only
+        if (layoutClass === TAB_LAYOUT.ICON_ONLY && hasText) {
+          this.element.setAttribute('aria-label', this.getText());
+        } else {
+          this.element.removeAttribute('aria-label');
+        }
+      }
+    };
+    
+    // Add badge if specified in config
+    if (baseConfig.badge !== undefined) {
+      tab.setBadge(baseConfig.badge);
+    }
+    
+    // Initialize layout style based on content
+    tab.updateLayoutStyle();
+    
+    return tab;
+  } catch (error) {
+    console.error('Tab creation error:', error);
+    throw new Error(`Failed to create tab: ${(error as Error).message}`);
+  }
+};