mtrl 0.2.5 → 0.2.6

package/src/components/tabs/config.ts

@@ -1,80 +1,74 @@
 // src/components/tabs/config.ts
 import { 
   createComponentConfig, 
-  createElementConfig
+  createElementConfig,
+  BaseComponentConfig 
 } from '../../core/config/component-config';
-import { TabsConfig } from './types';
-import { TABS_VARIANTS } from './constants';
+import { withElement } from '../../core/compose/component';
+import { TabConfig } from './types';
+import { TABS_VARIANTS, TAB_STATES } from './constants';
+
+/**
+ * Default configuration for a Tab
+ */
+export const defaultTabConfig: TabConfig = {
+  state: TAB_STATES.INACTIVE,
+  componentName: 'tab',
+  ripple: true
+};
 
 /**
  * Default configuration for the Tabs component
  */
-export const defaultConfig: TabsConfig = {
+export const defaultTabsConfig = {
   variant: TABS_VARIANTS.PRIMARY,
-  showIndicator: true,
-  animated: true,
   scrollable: true,
-  activeIndex: 0
+  showDivider: true,
+  componentName: 'tabs'
 };
 
-/**
- * Creates the base configuration for Tabs component
- * @param {TabsConfig} config - User provided configuration
- * @returns {TabsConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: TabsConfig = {}): TabsConfig => 
-  createComponentConfig(defaultConfig, config, 'tabs') as TabsConfig;
+export const createTabsConfig = (config = {}) => 
+  createComponentConfig(defaultTabsConfig, config, 'tabs');
 
 /**
- * Generates element configuration for the Tabs component
- * @param {TabsConfig} config - Tabs configuration
- * @returns {Object} Element configuration object for withElement
+ * Creates the base configuration for a Tab
+ * @param {TabConfig} config - User provided configuration
+ * @returns {TabConfig} Complete configuration with defaults applied
  */
-export const getElementConfig = (config: TabsConfig) => {
-  // Create the attributes object
-  const attrs: Record<string, any> = {
-    role: 'tablist'
+export const createTabConfig = (config: TabConfig = {}): TabConfig => 
+  createComponentConfig(defaultTabConfig, config, 'tab') as TabConfig;
+
+
+export const getTabsElementConfig = (config) => {
+  const elementConfig = {
+    tag: 'div',
+    attrs: {
+      role: 'tablist',
+      'aria-orientation': 'horizontal'
+    },
+    className: [
+      `${config.prefix}-tabs`,
+      `${config.prefix}-tabs--${config.variant || TABS_VARIANTS.PRIMARY}`,
+      config.class
+    ]
   };
   
-  // Only add disabled attribute if it's explicitly true
-  if (config.disabled === true) {
-    attrs['aria-disabled'] = 'true';
-  }
-  
-  const extraClasses: string[] = [];
-  
-  if (config.scrollable) {
-    extraClasses.push('--scrollable');
-  }
-  
-  if (config.animated) {
-    extraClasses.push('--animated');
-  }
-  
-  return createElementConfig(config, {
-    tag: 'div',
-    attrs,
-    className: config.class,
-    extraClasses,
-    forwardEvents: {
-      keydown: true
-    }
-  });
+  return (component) => withElement(elementConfig)(component);
 };
 
 /**
- * Creates API configuration for the Tabs component
+ * Creates API configuration for the Tab component
  * @param {Object} comp - Component with disabled and lifecycle features
  * @returns {Object} API configuration object
  */
-export const getApiConfig = (comp) => ({
+export const getTabApiConfig = (comp) => ({
   disabled: {
     enable: () => comp.disabled.enable(),
-    disable: () => comp.disabled.disable()
+    disable: () => comp.disabled.disable(),
+    isDisabled: () => comp.disabled.isDisabled && comp.disabled.isDisabled()
   },
   lifecycle: {
     destroy: () => comp.lifecycle.destroy()
-  }
-});
-
-export default defaultConfig;
+  },
+  button: comp.button
+});

package/src/components/tabs/constants.ts

@@ -1,12 +1,89 @@
 // src/components/tabs/constants.ts
 
+/**
+ * Tab variants
+ */
 export const TABS_VARIANTS = {
+  /** Primary tabs (standard MD3 style) */
   PRIMARY: 'primary',
-  SECONDARY: 'secondary',
-  SEGMENTED: 'segmented',
-  NEUTRAL: 'neutral'
-}
-
-export const ANIMATION_DURATION = 250
-export const DEFAULT_TAB_MIN_WIDTH = 90
-export const DEFAULT_TAB_MAX_WIDTH = 360
+  /** Secondary tabs (less prominent variant) */
+  SECONDARY: 'secondary'
+};
+
+/**
+ * Tab states
+ */
+export const TAB_STATES = {
+  /** Active (selected) tab state */
+  ACTIVE: 'active',
+  /** Inactive (unselected) tab state */
+  INACTIVE: 'inactive',
+  /** Disabled tab state */
+  DISABLED: 'disabled'
+};
+
+/**
+ * Tab layout types
+ */
+export const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+};
+
+/**
+ * Tab interaction states (for styling)
+ */
+export const TAB_INTERACTION_STATES = {
+  /** Default enabled state */
+  ENABLED: 'enabled',
+  /** Hover state */
+  HOVER: 'hover',
+  /** Focus state */
+  FOCUS: 'focus',
+  /** Pressed/active state */
+  PRESSED: 'pressed'
+};
+
+/**
+ * Tab animation constants
+ */
+export const TAB_ANIMATION = {
+  /** Standard transition duration in ms */
+  TRANSITION_DURATION: 200,
+  /** Standard transition timing function */
+  TRANSITION_TIMING: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  /** Ripple animation duration in ms */
+  RIPPLE_DURATION: 400
+};
+
+/**
+ * Tab accessibility roles
+ */
+export const TAB_A11Y = {
+  /** Tab role */
+  TAB_ROLE: 'tab',
+  /** Tablist role */
+  TABLIST_ROLE: 'tablist',
+  /** Tabpanel role */
+  TABPANEL_ROLE: 'tabpanel'
+};
+
+/**
+ * MD3 tokens for tab colors
+ */
+export const TAB_COLORS = {
+  /** Surface color for container */
+  SURFACE: 'surface',
+  /** Primary color for active tab and indicator */
+  PRIMARY: 'primary',
+  /** On-surface color for active secondary tabs */
+  ON_SURFACE: 'on-surface',
+  /** On-surface-variant for inactive tabs */
+  ON_SURFACE_VARIANT: 'on-surface-variant',
+  /** Outline variant for divider */
+  OUTLINE_VARIANT: 'outline-variant'
+};

package/src/components/tabs/features.ts

@@ -0,0 +1,401 @@
+// src/components/tabs/features.ts
+import { createTab } from './tab';
+import { TabConfig, TabComponent } from './types';
+import { BaseComponent } from '../../core/compose/component';
+import { updateTabPanels, getActiveTab } from './utils';
+import { createTabIndicator, TabIndicator } from './indicator';
+
+/**
+ * Configuration for tabs management feature
+ */
+export interface TabsManagementConfig {
+  /** Initial tabs to create */
+  tabs?: TabConfig[];
+  /** Tab variant */
+  variant?: string;
+  /** Component prefix */
+  prefix?: string;
+  /** Other configuration properties */
+  [key: string]: any;
+}
+
+/**
+ * Component with tabs management capabilities
+ */
+export interface TabsManagementComponent {
+  /** Array of tab components */
+  tabs: TabComponent[];
+  
+  /** Target container for tabs */
+  tabsContainer: HTMLElement;
+  
+  /** Tab click handler */
+  handleTabClick: (event: Event, tab: TabComponent) => void;
+  
+  /** Get all tabs */
+  getTabs?: () => TabComponent[];
+  
+  /** Get the active tab */
+  getActiveTab?: () => TabComponent | null;
+}
+
+/**
+ * Adds tabs management capabilities to a component
+ * @param {TabsManagementConfig} config - Tabs configuration
+ * @returns {Function} Component enhancer with tabs management
+ */
+export const withTabsManagement = <T extends TabsManagementConfig>(config: T) => 
+  <C extends any>(component: C): C & TabsManagementComponent => {
+    const tabs: TabComponent[] = [];
+    
+    // Store the target container for tabs
+    const tabsContainer = component.scrollContainer || component.element;
+    
+    // Create initial tabs if provided in config
+    if (Array.isArray(config.tabs)) {
+      config.tabs.forEach(tabConfig => {
+        // Create a merged config that inherits from tabs component
+        const mergedConfig = {
+          ...tabConfig,
+          prefix: config.prefix,
+          variant: tabConfig.variant || config.variant
+        };
+        
+        // Create the tab
+        const tab = createTab(mergedConfig);
+        
+        // Add to internal tabs array
+        tabs.push(tab);
+        
+        // Add to DOM
+        tabsContainer.appendChild(tab.element);
+      });
+    }
+    
+    /**
+     * Gets all tabs
+     */
+    const getTabs = () => {
+      return [...tabs];
+    };
+    
+    /**
+     * Gets the active tab
+     */
+    const getActiveTab = () => {
+      return tabs.find(tab => tab.isActive()) || null;
+    };
+    
+    /**
+     * Handles tab click events
+     */
+    const handleTabClick = (event: any, tab: TabComponent) => {
+      // Check if event is a DOM event with preventDefault
+      if (event && typeof event.preventDefault === 'function') {
+        event.preventDefault();
+      }
+      
+      // Skip if tab is disabled
+      if (tab.disabled && tab.disabled.isDisabled && tab.disabled.isDisabled()) {
+        return;
+      }
+      
+      // Deactivate all tabs first
+      tabs.forEach(t => t.deactivate());
+      
+      // Activate the clicked tab
+      tab.activate();
+      
+      // Get the tab value
+      const value = tab.getValue();
+      
+      // Update tab panels
+      updateTabPanels({
+        tabs,
+        getActiveTab: () => tabs.find(t => t.isActive()) || null
+      });
+      
+      // Emit change event if component has emit method
+      if (typeof component['emit'] === 'function') {
+        component['emit']('change', {
+          tab,
+          value
+        });
+      }
+    };
+    
+    // Add click handlers to existing tabs
+    tabs.forEach(tab => {
+      // Add event listener directly and via API if available
+      if (tab.on && typeof tab.on === 'function') {
+        tab.on('click', (event) => handleTabClick(event, tab));
+      }
+      // Also add direct DOM event listener as a fallback
+      tab.element.addEventListener('click', (event) => handleTabClick(event, tab));
+    });
+    
+    return {
+      ...component,
+      tabs,
+      tabsContainer,
+      handleTabClick,
+      getTabs,
+      getActiveTab
+    };
+  };
+
+/**
+ * Configuration for scrollable feature
+ */
+export interface ScrollableConfig {
+  /** Whether tabs are scrollable horizontally */
+  scrollable?: boolean;
+  /** Other configuration properties */
+  [key: string]: any;
+}
+
+/**
+ * Component with scrollable capabilities
+ */
+export interface ScrollableComponent {
+  /** Scroll container element */
+  scrollContainer?: HTMLElement;
+}
+
+/**
+ * Adds scrollable capabilities to a component
+ * @param {ScrollableConfig} config - Scrollable configuration
+ * @returns {Function} Component enhancer with scrollable container
+ */
+export const withScrollable = <T extends ScrollableConfig>(config: T) => 
+  <C extends any>(component: C): C & ScrollableComponent => {
+    // Skip if scrollable is explicitly false
+    if (config.scrollable === false) {
+      return component as C & ScrollableComponent;
+    }
+    
+    // Add scrollable class
+    component.element.classList.add(`${component.getClass('tabs')}--scrollable`);
+    
+    // Create container for tabs that can scroll
+    const scrollContainer = document.createElement('div');
+    scrollContainer.className = `${component.getClass('tabs')}-scroll`;
+    
+    // Move any existing children to scroll container
+    while (component.element.firstChild) {
+      scrollContainer.appendChild(component.element.firstChild);
+    }
+    
+    // Add scroll container to the main element
+    component.element.appendChild(scrollContainer);
+    
+    return {
+      ...component,
+      scrollContainer
+    };
+  };
+
+/**
+ * Configuration for divider feature
+ */
+export interface DividerConfig {
+  /** Whether to show a divider below the tabs */
+  showDivider?: boolean;
+  /** Other configuration properties */
+  [key: string]: any;
+}
+
+/**
+ * Adds a divider to a component
+ * @param {DividerConfig} config - Divider configuration
+ * @returns {Function} Component enhancer with divider
+ */
+export const withDivider = <T extends DividerConfig>(config: T) => 
+  <C extends any>(component: C): C => {
+    // Skip if divider is explicitly disabled
+    if (config.showDivider === false) {
+      return component;
+    }
+    
+    // Create the divider element
+    const divider = document.createElement('div');
+    divider.className = `${component.getClass('tabs')}-divider`;
+    
+    // Add the divider to the main element
+    component.element.appendChild(divider);
+    
+    return component;
+  };
+
+/**
+ * Configuration for indicator feature
+ */
+export interface IndicatorFeatureConfig {
+  /** Component prefix */
+  prefix?: string;
+  /** Width strategy for the indicator */
+  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** Height of the indicator in pixels */
+  height?: number;
+  /** Fixed width in pixels (when using fixed strategy) */
+  fixedWidth?: number;
+  /** Animation duration in milliseconds */
+  animationDuration?: number;
+  /** Animation timing function */
+  animationTiming?: string;
+  /** Custom color for the indicator */
+  color?: string;
+  /** Legacy height property */
+  indicatorHeight?: number;
+  /** Legacy width strategy property */
+  indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** Indicator configuration object */
+  indicator?: {
+    widthStrategy?: 'fixed' | 'dynamic' | 'content';
+    height?: number;
+    fixedWidth?: number;
+    animationDuration?: number;
+    animationTiming?: string;
+    color?: string;
+  };
+}
+
+/**
+ * Component with indicator capability
+ */
+export interface IndicatorComponent {
+  /** The indicator instance */
+  indicator: TabIndicator;
+  /** Get the indicator instance */
+  getIndicator: () => TabIndicator;
+}
+
+/**
+ * Enhances a component with tab indicator functionality
+ * @param config - Indicator configuration
+ * @returns Component enhancer with indicator functionality
+ */
+export const withIndicator = <T extends IndicatorFeatureConfig>(config: T) => 
+  <C extends any>(component: C): C & IndicatorComponent => {
+    // Create indicator with proper config
+    const indicatorConfig = config.indicator || {};
+    const indicator: TabIndicator = createTabIndicator({
+      prefix: config.prefix,
+      // Support both new and legacy config
+      widthStrategy: indicatorConfig.widthStrategy || config.indicatorWidthStrategy || 'fixed',
+      height: indicatorConfig.height || config.indicatorHeight || 3,
+      fixedWidth: indicatorConfig.fixedWidth || 40,
+      animationDuration: indicatorConfig.animationDuration || 250,
+      animationTiming: indicatorConfig.animationTiming || 'cubic-bezier(0.4, 0, 0.2, 1)',
+      color: indicatorConfig.color
+    });
+    
+    // Find the scroll container and add the indicator to it
+    const scrollContainer = component.scrollContainer || component.element;
+    if (!scrollContainer) {
+      console.error('No scroll container found - cannot add indicator');
+      throw new Error('Failed to create tabs: No scroll container found');
+    }
+    
+    // Add the indicator to the scroll container
+    scrollContainer.appendChild(indicator.element);
+    
+    // Store the original handlers to enhance
+    const originalHandleTabClick = component.handleTabClick;
+    
+    // Replace tab click handler to ensure indicator updates
+    component.handleTabClick = function(event, tab) {
+      // Skip if tab is disabled
+      if (tab.disabled && tab.disabled.isDisabled && tab.disabled.isDisabled()) {
+        return;
+      }
+      
+      // Call original handler
+      originalHandleTabClick.call(this, event, tab);
+      
+      // Move indicator with a slight delay to ensure DOM updates
+      setTimeout(() => {
+        indicator.moveToTab(tab);
+      }, 10);
+    };
+    
+    // Position indicator on initial active tab
+    setTimeout(() => {
+      const activeTab = component.tabs.find(tab => tab.isActive());
+      if (activeTab) {
+        indicator.moveToTab(activeTab, true);
+      }
+    }, 50);
+    
+    // Add scroll event handling
+    const scrollHandler = () => {
+      const activeTab = component.tabs.find(tab => tab.isActive());
+      if (activeTab) {
+        indicator.moveToTab(activeTab, true);
+      }
+    };
+    
+    if (scrollContainer) {
+      scrollContainer.addEventListener('scroll', scrollHandler);
+    }
+    
+    // Watch for window resize to update indicator
+    const resizeObserver = new ResizeObserver(() => {
+      const activeTab = component.tabs.find(tab => tab.isActive());
+      if (activeTab) {
+        indicator.moveToTab(activeTab, true);
+      }
+    });
+    
+    resizeObserver.observe(scrollContainer);
+    
+    // Add MutationObserver to detect tab state changes
+    const mutationObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'attributes' && 
+            mutation.attributeName === 'class' && 
+            (mutation.target as HTMLElement).classList.contains(`${config.prefix}-tab--active`)) {
+          // Find the corresponding tab component
+          const tabElement = mutation.target as HTMLElement;
+          const activeTab = component.tabs.find(tab => tab.element === tabElement);
+          if (activeTab) {
+            indicator.moveToTab(activeTab);
+          }
+        }
+      }
+    });
+    
+    // Observe all tabs for class changes
+    if (Array.isArray(component.tabs)) {
+      component.tabs.forEach(tab => {
+        if (tab.element) {
+          mutationObserver.observe(tab.element, { attributes: true });
+        }
+      });
+    }
+    
+    // Enhance component's destroy method
+    const originalDestroy = component.destroy || (() => {});
+    
+    // Override destroy to clean up resources
+    (component as any).destroy = function() {
+      indicator.destroy();
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      
+      if (scrollContainer) {
+        scrollContainer.removeEventListener('scroll', scrollHandler);
+      }
+      
+      // Call original destroy if it exists
+      if (typeof originalDestroy === 'function') {
+        originalDestroy.call(this);
+      }
+    };
+    
+    return {
+      ...component,
+      indicator,
+      getIndicator: () => indicator
+    };
+  };

package/src/components/tabs/index.ts

@@ -1,4 +1,61 @@
 // src/components/tabs/index.ts
-export { default } from './tabs';
-export { TABS_VARIANTS } from './constants';
-export { TabsConfig, TabsComponent, TabItem, TabChangeEventData } from './types';
+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 { 
+  // Main component creators
+  createTabs,
+  createTab,
+  
+  // Constants
+  TABS_VARIANTS, 
+  TAB_STATES, 
+  TAB_LAYOUT,
+  TAB_INTERACTION_STATES,
+  TAB_ANIMATION,
+  TAB_A11Y,
+  TAB_COLORS
+} from './constants';
+
+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;