mtrl 0.2.5 → 0.2.7

package/src/components/tabs/indicator.ts

@@ -0,0 +1,285 @@
+// 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' | 'auto';
+  /** 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;
+  /** Tabs variant (primary or secondary) */
+  variant?: 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: 'auto', // Changed to 'auto' to match variant behavior
+  fixedWidth: 40,
+  animationDuration: 250,
+  animationTiming: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  visible: true,
+  prefix: 'mtrl',
+  variant: 'primary'
+};
+
+/**
+ * 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 and variant
+   * @param tab - Target tab
+   * @returns Width in pixels
+   */
+  const calculateWidth = (tab: TabComponent): number => {
+    // Use auto strategy to determine based on variant
+    if (mergedConfig.widthStrategy === 'auto') {
+      // For secondary tabs, use full tab width
+      if (mergedConfig.variant === 'secondary') {
+        return tab.element.offsetWidth;
+      }
+      
+      // For primary tabs (default), use text label width
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        return textElement.clientWidth;
+      }
+      
+      // Fallback to dynamic if text element not found
+      return Math.max(tab.element.offsetWidth / 2, 30);
+    }
+    
+    // Handle other strategies when explicitly set
+    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`) || 
+                   tab.element.querySelector(`.${prefix}-tab-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
+    };
+  };
+  
+  /**
+   * Calculates indicator position based on variant and width
+   * @param tab - Target tab
+   * @param indicatorWidth - Width of the indicator
+   * @returns {Object} Position information
+   */
+  const calculatePosition = (tab: TabComponent, indicatorWidth: number): { left: number } => {
+    const { left, width: tabWidth } = getTabPosition(tab.element);
+    
+    // For primary tabs with text label width, center under the text
+    if (mergedConfig.variant !== 'secondary' && 
+        (mergedConfig.widthStrategy === 'auto' || mergedConfig.widthStrategy === 'content')) {
+      const textElement = tab.element.querySelector(`.${prefix}-tab-text`) || 
+                        tab.element.querySelector(`.${prefix}-button-text`);
+      
+      if (textElement) {
+        // Get text element position relative to tab
+        const textRect = textElement.getBoundingClientRect();
+        const tabRect = tab.element.getBoundingClientRect();
+        const textLeft = textRect.left - tabRect.left;
+        
+        // Center indicator under text
+        return {
+          left: left + textLeft
+        };
+      }
+    }
+    
+    // For secondary tabs or when no text element found
+    // For centered indicators, center in the tab
+    if (indicatorWidth < tabWidth) {
+      return {
+        left: left + ((tabWidth - indicatorWidth) / 2)
+      };
+    }
+    
+    // For full-width indicators
+    return { left };
+  };
+  
+  /**
+   * 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 based on strategy and variant
+    const width = calculateWidth(tab);
+    
+    // Calculate position based on width and variant
+    const { left } = calculatePosition(tab, width);
+    
+    // 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(${left}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);
+  };
+};