mtrl 0.2.4 → 0.2.6

package/src/components/tabs/indicator.ts

@@ -0,0 +1,225 @@
+// src/components/tabs/indicator.ts
+import { TabComponent } from './types';
+
+/**
+ * Configuration for tab indicator
+ */
+export interface TabIndicatorConfig {
+  /** Height of the indicator in pixels */
+  height?: number;
+  /** Width strategy - fixed size or dynamic based on tab width */
+  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** Fixed width in pixels when using fixed strategy */
+  fixedWidth?: number;
+  /** Animation duration in milliseconds */
+  animationDuration?: number;
+  /** Animation timing function */
+  animationTiming?: string;
+  /** Whether to show the indicator */
+  visible?: boolean;
+  /** CSS class prefix */
+  prefix?: string;
+  /** Custom color for the indicator */
+  color?: string;
+}
+
+/**
+ * Tab indicator API
+ */
+export interface TabIndicator {
+  /** The indicator DOM element */
+  element: HTMLElement;
+  /** Move the indicator to a specific tab */
+  moveToTab: (tab: TabComponent, immediate?: boolean) => void;
+  /** Show the indicator */
+  show: () => void;
+  /** Hide the indicator */
+  hide: () => void;
+  /** Set indicator color */
+  setColor: (color: string) => void;
+  /** Update indicator position (e.g. after resize) */
+  update: () => void;
+  /** Destroy the indicator and clean up */
+  destroy: () => void;
+}
+
+/**
+ * Default configuration for tab indicator
+ */
+const DEFAULT_CONFIG: TabIndicatorConfig = {
+  widthStrategy: 'fixed',
+  fixedWidth: 40,
+  animationDuration: 250,
+  animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  visible: true,
+  prefix: 'mtrl'
+};
+
+/**
+ * Creates a tab indicator component
+ * @param config - Indicator configuration
+ * @returns Tab indicator instance
+ */
+export const createTabIndicator = (config: TabIndicatorConfig = {}): TabIndicator => {
+  // Merge with default config
+  const mergedConfig = { ...DEFAULT_CONFIG, ...config };
+  const prefix = mergedConfig.prefix || 'mtrl';
+  
+  // Create indicator element
+  const element = document.createElement('div');
+  element.className = `${prefix}-tabs-indicator`;
+  element.style.transition = `transform ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}, 
+                             width ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}`;
+  element.style.width = `${mergedConfig.fixedWidth}px`; // Set initial width
+  
+  // Set initial visibility
+  if (!mergedConfig.visible) {
+    element.style.opacity = '0';
+  }
+  
+  // Track current tab to be able to update on resize
+  let currentTab: TabComponent | null = null;
+  
+  /**
+   * Calculates indicator width based on strategy
+   * @param tab - Target tab
+   * @returns Width in pixels
+   */
+  const calculateWidth = (tab: TabComponent): number => {
+    switch (mergedConfig.widthStrategy) {
+      case 'dynamic':
+        return Math.max(tab.element.offsetWidth / 2, 30);
+      case 'content':
+        // Try to match content width
+        const text = tab.element.querySelector(`.${prefix}-button-text`);
+        if (text) {
+          return Math.max(text.clientWidth, 30);
+        }
+        return mergedConfig.fixedWidth || 40;
+      case 'fixed':
+      default:
+        return mergedConfig.fixedWidth || 40;
+    }
+  };
+  
+  /**
+   * Gets the direct DOM position for a tab element
+   * @param tabElement - The tab element
+   * @returns {Object} Position information
+   */
+  const getTabPosition = (tabElement: HTMLElement): { left: number, width: number } => {
+    // Find the scroll container (should be the parent of the tab)
+    const scrollContainer = tabElement.parentElement;
+    if (!scrollContainer) {
+      console.error('Tab has no parent element, cannot position indicator');
+      return { left: 0, width: tabElement.offsetWidth };
+    }
+    
+    // Get positions using getBoundingClientRect for most accurate values
+    const tabRect = tabElement.getBoundingClientRect();
+    const containerRect = scrollContainer.getBoundingClientRect();
+    
+    // Calculate position relative to scroll container
+    return {
+      left: tabRect.left - containerRect.left,
+      width: tabRect.width
+    };
+  };
+  
+  /**
+   * Moves indicator to specified tab
+   * @param tab - Target tab
+   * @param immediate - Whether to skip animation
+   */
+  const moveToTab = (tab: TabComponent, immediate: boolean = false): void => {
+    if (!tab || !tab.element) {
+      console.error('Invalid tab or tab has no element');
+      return;
+    }
+    
+    // Store current tab for later updates
+    currentTab = tab;
+    
+    // Calculate indicator width
+    const width = calculateWidth(tab);
+    
+    // Get tab position directly from DOM
+    const { left, width: tabWidth } = getTabPosition(tab.element);
+    
+    // Calculate position to center indicator on tab
+    const tabCenter = left + (tabWidth / 2);
+    const indicatorLeft = tabCenter - (width / 2);
+    
+    // Apply position immediately if requested
+    if (immediate) {
+      element.style.transition = 'none';
+      
+      // Force reflow to ensure transition is skipped
+      element.offsetHeight; // eslint-disable-line no-unused-expressions
+    }
+    
+    // Update position and width
+    element.style.width = `${width}px`;
+    element.style.transform = `translateX(${indicatorLeft}px)`;
+    
+    // Restore transition after immediate update
+    if (immediate) {
+      // Need to use timeout to ensure browser processes the style change
+      setTimeout(() => {
+        element.style.transition = `transform ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}, 
+                                   width ${mergedConfig.animationDuration}ms ${mergedConfig.animationTiming}`;
+      }, 10);
+    }
+  };
+  
+  /**
+   * Updates indicator position (e.g. after resize)
+   */
+  const update = (): void => {
+    if (currentTab) {
+      moveToTab(currentTab, true);
+    }
+  };
+  
+  /**
+   * Shows the indicator
+   */
+  const show = (): void => {
+    element.style.opacity = '1';
+  };
+  
+  /**
+   * Hides the indicator
+   */
+  const hide = (): void => {
+    element.style.opacity = '0';
+  };
+  
+  /**
+   * Sets indicator color
+   * @param color - CSS color value
+   */
+  const setColor = (color: string): void => {
+    element.style.backgroundColor = color;
+  };
+  
+  /**
+   * Cleans up and destroys the indicator
+   */
+  const destroy = (): void => {
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+    currentTab = null;
+  };
+  
+  return {
+    element,
+    moveToTab,
+    show,
+    hide,
+    setColor,
+    update,
+    destroy
+  };
+};

package/src/components/tabs/responsive.ts

@@ -0,0 +1,144 @@
+// src/components/tabs/responsive.ts
+import { TabsComponent, TabComponent } from './types';
+
+/**
+ * Breakpoints for responsive behavior
+ */
+export const RESPONSIVE_BREAKPOINTS = {
+  /** Small screens (mobile) */
+  SMALL: 600,
+  /** Medium screens (tablet) */
+  MEDIUM: 904,
+  /** Large screens (desktop) */
+  LARGE: 1240
+};
+
+/**
+ * Configuration for responsive behavior
+ */
+export interface ResponsiveConfig {
+  /** Whether to enable responsive behavior */
+  responsive?: boolean;
+  /** Options for small screens */
+  smallScreen?: {
+    /** Layout to use on small screens */
+    layout?: 'icon-only' | 'text-only' | 'icon-and-text';
+    /** Maximum tabs to show before scrolling */
+    maxVisibleTabs?: number;
+  };
+  /** Custom breakpoint values */
+  breakpoints?: {
+    small?: number;
+    medium?: number;
+    large?: number;
+  };
+}
+
+/**
+ * Enhances tabs with responsive behavior
+ * @param tabs - The tabs component to enhance
+ * @param config - Responsive configuration
+ */
+export const setupResponsiveBehavior = (
+  tabs: TabsComponent, 
+  config: ResponsiveConfig = {}
+): void => {
+  if (config.responsive === false) return;
+  
+  // Merge custom breakpoints with defaults
+  const breakpoints = {
+    small: config.breakpoints?.small || RESPONSIVE_BREAKPOINTS.SMALL,
+    medium: config.breakpoints?.medium || RESPONSIVE_BREAKPOINTS.MEDIUM,
+    large: config.breakpoints?.large || RESPONSIVE_BREAKPOINTS.LARGE
+  };
+  
+  // Default small screen configuration
+  const smallScreen = {
+    layout: config.smallScreen?.layout || 'icon-only',
+    maxVisibleTabs: config.smallScreen?.maxVisibleTabs || 4
+  };
+  
+  // Store original tab layouts to restore later
+  const originalLayouts = new Map<TabComponent, string>();
+  
+  // Get all tabs
+  const allTabs = tabs.getTabs();
+  
+  // Save original layouts
+  allTabs.forEach(tab => {
+    // Determine current layout
+    let layout = 'text-only';
+    if (tab.getIcon() && tab.getText()) {
+      layout = 'icon-and-text';
+    } else if (tab.getIcon()) {
+      layout = 'icon-only';
+    }
+    
+    originalLayouts.set(tab, layout);
+  });
+  
+  /**
+   * Update tabs layout based on screen size
+   */
+  const updateLayout = (): void => {
+    const width = window.innerWidth;
+    
+    if (width < breakpoints.small) {
+      // Small screen behavior
+      allTabs.forEach(tab => {
+        // Skip if tab has no icon but we want icon-only
+        if (smallScreen.layout === 'icon-only' && !tab.getIcon()) {
+          return;
+        }
+        
+        // Apply layout according to small screen config
+        if (smallScreen.layout === 'icon-only' && tab.getIcon()) {
+          // Keep text for accessibility but visually show only icon
+          tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+          tab.element.classList.remove(`${tab.getClass('tab')}--text-only`);
+          tab.element.classList.add(`${tab.getClass('tab')}--icon-only`);
+        } else if (smallScreen.layout === 'text-only') {
+          tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+          tab.element.classList.remove(`${tab.getClass('tab')}--icon-only`);
+          tab.element.classList.add(`${tab.getClass('tab')}--text-only`);
+        }
+      });
+      
+      // Add responsive class
+      tabs.element.classList.add(`${tabs.getClass('tabs')}--responsive-small`);
+    } else {
+      // Restore original layouts for medium and large screens
+      allTabs.forEach(tab => {
+        const originalLayout = originalLayouts.get(tab) || 'text-only';
+        
+        tab.element.classList.remove(`${tab.getClass('tab')}--icon-only`);
+        tab.element.classList.remove(`${tab.getClass('tab')}--text-only`);
+        tab.element.classList.remove(`${tab.getClass('tab')}--icon-and-text`);
+        
+        tab.element.classList.add(`${tab.getClass('tab')}--${originalLayout}`);
+      });
+      
+      // Remove responsive class
+      tabs.element.classList.remove(`${tabs.getClass('tabs')}--responsive-small`);
+    }
+  };
+  
+  // Initial layout update
+  updateLayout();
+  
+  // Set up resize listener
+  const resizeObserver = new ResizeObserver(updateLayout);
+  resizeObserver.observe(document.body);
+  
+  // Store the observer on the component for cleanup
+  (tabs as any)._resizeObserver = resizeObserver;
+  
+  // Enhance destroy method to clean up observer
+  const originalDestroy = tabs.destroy;
+  tabs.destroy = function() {
+    if ((this as any)._resizeObserver) {
+      (this as any)._resizeObserver.disconnect();
+    }
+    originalDestroy.call(this);
+  };
+};

package/src/components/tabs/scroll-indicators.ts

@@ -0,0 +1,149 @@
+// src/components/tabs/scroll-indicators.ts
+import { TabsComponent } from './types';
+
+/**
+ * Configuration for scroll indicators
+ */
+export interface ScrollIndicatorConfig {
+  /** Whether to show scroll indicators */
+  enabled?: boolean;
+  /** Whether to add scroll buttons */
+  showButtons?: boolean;
+  /** Scroll indicator appearance */
+  appearance?: 'fade' | 'shadow';
+}
+
+/**
+ * Adds scroll indicators to a tabs component
+ * @param tabs - Tabs component to enhance
+ * @param config - Scroll indicator configuration
+ */
+export const addScrollIndicators = (
+  tabs: TabsComponent,
+  config: ScrollIndicatorConfig = {}
+): void => {
+  const { 
+    enabled = true, 
+    showButtons = false, 
+    appearance = 'fade' 
+  } = config;
+  
+  if (!enabled) return;
+  
+  // Find scroll container
+  const scrollContainer = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll`);
+  if (!scrollContainer) return;
+  
+  // Add indicator elements
+  const leftIndicator = document.createElement('div');
+  leftIndicator.className = `${tabs.getClass('tabs')}-scroll-indicator ${tabs.getClass('tabs')}-scroll-indicator--left`;
+  leftIndicator.classList.add(`${tabs.getClass('tabs')}-scroll-indicator--${appearance}`);
+  
+  const rightIndicator = document.createElement('div');
+  rightIndicator.className = `${tabs.getClass('tabs')}-scroll-indicator ${tabs.getClass('tabs')}-scroll-indicator--right`;
+  rightIndicator.classList.add(`${tabs.getClass('tabs')}-scroll-indicator--${appearance}`);
+  
+  tabs.element.appendChild(leftIndicator);
+  tabs.element.appendChild(rightIndicator);
+  
+  // Add buttons if requested
+  if (showButtons) {
+    const leftButton = document.createElement('button');
+    leftButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--left`;
+    leftButton.setAttribute('aria-label', 'Scroll tabs left');
+    leftButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>';
+    
+    const rightButton = document.createElement('button');
+    rightButton.className = `${tabs.getClass('tabs')}-scroll-button ${tabs.getClass('tabs')}-scroll-button--right`;
+    rightButton.setAttribute('aria-label', 'Scroll tabs right');
+    rightButton.innerHTML = '<svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>';
+    
+    tabs.element.appendChild(leftButton);
+    tabs.element.appendChild(rightButton);
+    
+    // Add button click handlers
+    leftButton.addEventListener('click', () => {
+      scrollContainer.scrollBy({
+        left: -100,
+        behavior: 'smooth'
+      });
+    });
+    
+    rightButton.addEventListener('click', () => {
+      scrollContainer.scrollBy({
+        left: 100,
+        behavior: 'smooth'
+      });
+    });
+  }
+  
+  /**
+   * Updates indicator visibility based on scroll position
+   */
+  const updateIndicators = (): void => {
+    const { scrollLeft, scrollWidth, clientWidth } = scrollContainer as HTMLElement;
+    
+    // Show left indicator only when scrolled right
+    leftIndicator.classList.toggle('visible', scrollLeft > 0);
+    
+    // Show right indicator only when more content is available to scroll
+    rightIndicator.classList.toggle('visible', scrollLeft + clientWidth < scrollWidth - 1);
+    
+    // Update button states if present
+    if (showButtons) {
+      const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--left`) as HTMLButtonElement;
+      const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--right`) as HTMLButtonElement;
+      
+      if (leftButton) {
+        leftButton.disabled = scrollLeft <= 0;
+      }
+      
+      if (rightButton) {
+        rightButton.disabled = scrollLeft + clientWidth >= scrollWidth - 1;
+      }
+    }
+  };
+  
+  // Initial update
+  updateIndicators();
+  
+  // Add scroll listener
+  scrollContainer.addEventListener('scroll', updateIndicators);
+  
+  // Add resize observer to update on container size changes
+  const resizeObserver = new ResizeObserver(updateIndicators);
+  resizeObserver.observe(scrollContainer as Element);
+  
+  // Add cleanup to component destroy method
+  const originalDestroy = tabs.destroy;
+  tabs.destroy = function() {
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+    }
+    
+    scrollContainer.removeEventListener('scroll', updateIndicators);
+    
+    if (leftIndicator.parentNode) {
+      leftIndicator.parentNode.removeChild(leftIndicator);
+    }
+    
+    if (rightIndicator.parentNode) {
+      rightIndicator.parentNode.removeChild(rightIndicator);
+    }
+    
+    if (showButtons) {
+      const leftButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--left`);
+      const rightButton = tabs.element.querySelector(`.${tabs.getClass('tabs')}-scroll-button--right`);
+      
+      if (leftButton && leftButton.parentNode) {
+        leftButton.parentNode.removeChild(leftButton);
+      }
+      
+      if (rightButton && rightButton.parentNode) {
+        rightButton.parentNode.removeChild(rightButton);
+      }
+    }
+    
+    originalDestroy.call(this);
+  };
+};

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);
+};