mtrl 0.3.8 → 0.4.0

package/src/components/tabs/index.ts

@@ -1,46 +0,0 @@
-// src/components/tabs/index.ts
-import createTabs from './tabs';
-import { createTab } from './tab';
-import { addScrollIndicators } from './scroll-indicators';
-import { setupResponsiveBehavior } from './responsive';
-import { createTabsState } from './state';
-import { createTabIndicator } from './indicator';
-import { updateTabPanels, setupKeyboardNavigation } from './utils';
-
-export { 
-  // Types
-  TabsConfig, 
-  TabsComponent, 
-  TabComponent, 
-  TabConfig, 
-  TabChangeEventData,
-  IndicatorConfig
-} from './types';
-
-// Export enhancers and utilities
-export { 
-  addScrollIndicators,
-  setupResponsiveBehavior,
-  createTabsState,
-  createTabIndicator,
-  updateTabPanels,
-  setupKeyboardNavigation
-};
-
-// Export features
-export {
-  withTabsManagement,
-  withScrollable,
-  withDivider,
-  withIndicator,
-  TabsManagementConfig,
-  TabsManagementComponent,
-  ScrollableConfig,
-  ScrollableComponent,
-  DividerConfig,
-  IndicatorFeatureConfig,
-  IndicatorComponent
-} from './features';
-
-// Default export
-export default createTabs;

package/src/components/tabs/indicator.ts

@@ -1,285 +0,0 @@
-// 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

@@ -1,144 +0,0 @@
-// 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

@@ -1,149 +0,0 @@
-// 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);
-  };
-};