mtrl 0.3.8 → 0.4.0

package/src/components/tabs/tabs.ts

@@ -1,71 +0,0 @@
-// src/components/tabs/tabs.ts
-import { pipe } from '../../core/compose';
-import { createBase } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { withAPI, getApiConfig } from './api';
-import { 
-  withTabsManagement, 
-  withScrollable, 
-  withDivider,
-  withIndicator
-} from './features';
-import { createTabsConfig, getTabsElementConfig } from './config';
-import { TabsConfig, TabsComponent } from './types';
-import { addTabStateStyles } from './state';
-import { setupKeyboardNavigation } from './utils';
-
-/**
- * Creates a new Tabs component following MD3 guidelines
- * @param {TabsConfig} config - Tabs configuration object
- * @returns {TabsComponent} Tabs component instance
- * @example
- * ```typescript
- * // Create basic tabs with three items
- * const tabs = createTabs({
- *   tabs: [
- *     { text: 'Home', value: 'home', state: 'active' },
- *     { text: 'Products', value: 'products' },
- *     { text: 'About', value: 'about' }
- *   ]
- * });
- * 
- * // Add tabs to DOM
- * document.body.appendChild(tabs.element);
- * 
- * // Listen for tab changes
- * tabs.on('change', (e) => {
- *   console.log(`Active tab: ${e.value}`);
- * });
- * ```
- */
-const createTabs = (config: TabsConfig = {}): TabsComponent => {
-  const baseConfig = createTabsConfig(config);
-  
-  // Add ripple styles for state transitions
-  addTabStateStyles();
-
-  try {
-    // Build the tabs component with all features
-    const component = pipe(
-      createBase,
-      withEvents(),
-      getTabsElementConfig(baseConfig),
-      withScrollable(baseConfig),
-      withTabsManagement(baseConfig),
-      withDivider(baseConfig),
-      withIndicator(baseConfig),  // Add indicator feature
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(baseConfig);
-    
-    // Set up keyboard navigation
-    setupKeyboardNavigation(component);
-    
-    return component;
-  } catch (error) {
-    console.error('Tabs creation error:', error);
-    throw new Error(`Failed to create tabs: ${(error as Error).message}`);
-  }
-};
-
-export default createTabs;

package/src/components/tabs/types.ts

@@ -1,461 +0,0 @@
-// src/components/tabs/types.ts
-import type { BadgeComponent } from '../badge';
-import { TabIndicator } from './indicator';
-
-/**
- * Available tabs variants
- */
-export type TabsVariant = 'primary' | 'secondary';
-
-/**
- * Available tabs states
- */
-
-export type TabStates = 'active' | 'inactive' | 'disabled';
-
-/**
- * Configuration for the tab indicator
- * @category Components
- */
-export interface IndicatorConfig {
-  /** Height of the indicator in pixels */
-  height?: number;
-  /** 
-   * Width strategy for the indicator
-   * - 'fixed': Uses a fixed width defined by fixedWidth
-   * - 'dynamic': Uses half the tab width
-   * - 'content': Uses the text content width
-   * - 'auto': Adapts based on variant (primary: text width, secondary: full 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;
-  /** Custom color for the indicator */
-  color?: string;
-  /** Tab variant (primary or secondary) */
-  variant?: string;
-}
-
-/**
- * Tab change event data interface
- * @category Events
- */
-export interface TabChangeEventData {
-  /**
-   * The tab component that was activated
-   */
-  tab: TabComponent;
-  
-  /**
-   * The value of the activated tab
-   */
-  value: string;
-}
-
-/**
- * Configuration interface for a single Tab
- * @category Components
- */
-export interface TabConfig {
-  /** 
-   * Tab state that determines if it's the active destination
-   * @default 'inactive'
-   */
-  state?: TabStates | string;
-  
-  /** 
-   * Whether the tab is initially disabled
-   * @default false
-   */
-  disabled?: boolean;
-  
-  /** 
-   * Initial tab text content (label)
-   * @example 'Home'
-   */
-  text?: string;
-  
-  /** 
-   * Initial tab icon HTML content
-   * @example '<svg>...</svg>'
-   */
-  icon?: string;
-  
-  /** 
-   * Badge text or value to display (if applicable)
-   * @example '5'
-   */
-  badge?: string | number;
-  
-  /**
-   * Badge configuration object
-   * Pass additional options for the badge component
-   */
-  badgeConfig?: {
-    variant?: string;
-    color?: string;
-    size?: string;
-    position?: string;
-    max?: number;
-  };
-  
-  /** 
-   * Icon size in pixels or other CSS units
-   * @default '24px'
-   */
-  iconSize?: string;
-  
-  /** 
-   * Additional CSS classes to add to the tab
-   * @example 'home-tab main-navigation'
-   */
-  class?: string;
-  
-  /** 
-   * Tab value attribute for identifying the selected tab
-   */
-  value?: string;
-  
-  /** 
-   * Whether to enable ripple effect
-   * @default true
-   */
-  ripple?: boolean;
-
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   */
-  componentName?: string;
-  
-  /** 
-   * Ripple effect configuration
-   */
-  rippleConfig?: {
-    /** Duration of the ripple animation in milliseconds */
-    duration?: number;
-    /** Timing function for the ripple animation */
-    timing?: string;
-    /** Opacity values for ripple start and end [start, end] */
-    opacity?: [string, string];
-  };
-  
-  /**
-   * Variant of the tab
-   */
-  variant?: string;
-}
-
-/**
- * Configuration interface for the Tabs component
- * @category Components
- */
-export interface TabsConfig {
-  /**
-   * Tabs variant (primary or secondary)
-   * @default 'primary'
-   */
-  variant?: TabsVariant | string;
-  
-  /**
-   * Initial tabs to create
-   */
-  tabs?: TabConfig[];
-  
-  /**
-   * Whether to show the divider
-   * @default true
-   */
-  showDivider?: boolean;
-  
-  /**
-   * Whether to enable horizontal scrolling
-   * @default true
-   */
-  scrollable?: boolean;
-  
-  /**
-   * Additional CSS classes for the container
-   */
-  class?: string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-  
-  /**
-   * Event handlers configuration
-   */
-  on?: {
-    /**
-     * Tab change event handler
-     */
-    change?: (event: TabChangeEventData) => void;
-    
-    /**
-     * Event handlers for other events
-     */
-    [key: string]: Function | undefined;
-  };
-  
-  /**
-   * Tab indicator configuration
-   */
-  indicator?: IndicatorConfig;
-  
-  /**
-   * Tab indicator height in pixels
-   * @deprecated Use indicator.height instead
-   */
-  indicatorHeight?: number;
-  
-  /**
-   * Tab indicator width strategy
-   * @deprecated Use indicator.widthStrategy instead
-   */
-  indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
-}
-
-/**
- * Icon API interface for managing tab icons
- * @category Components
- */
-export interface IconAPI {
-  /**
-   * Sets the icon HTML content
-   * @param html - HTML string for the icon
-   * @returns The icon API for chaining
-   */
-  setIcon: (html: string) => IconAPI;
-  
-  /**
-   * Gets the current icon HTML content
-   * @returns HTML string for the icon
-   */
-  getIcon: () => string;
-  
-  /**
-   * Gets the icon DOM element
-   * @returns The icon element or null if not present
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Text API interface for managing tab text
- * @category Components
- */
-export interface TextAPI {
-  /**
-   * Sets the text content
-   * @param content - Text content
-   * @returns The text API for chaining
-   */
-  setText: (content: string) => TextAPI;
-  
-  /**
-   * Gets the current text content
-   * @returns Tab text content
-   */
-  getText: () => string;
-  
-  /**
-   * Gets the text DOM element
-   * @returns The text element or null if not present
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Tab component interface
- * @category Components
- */
-export interface TabComponent {
-  /** The tab's DOM element */
-  element: HTMLElement;
-  
-  /** The tab's badge component (if any) */
-  badge?: BadgeComponent;
-  
-  /** Gets a class name with the component's prefix */
-  getClass: (name: string) => string;
-  
-  /** Gets the tab's value attribute */
-  getValue: () => string;
-  
-  /** Sets the tab's value attribute */
-  setValue: (value: string) => TabComponent;
-  
-  /** Activates the tab (sets active state) */
-  activate: () => TabComponent;
-  
-  /** Deactivates the tab (sets inactive state) */
-  deactivate: () => TabComponent;
-  
-  /** Checks if the tab is active */
-  isActive: () => boolean;
-  
-  /** Enables the tab (removes disabled attribute) */
-  enable: () => TabComponent;
-  
-  /** Disables the tab (adds disabled attribute) */
-  disable: () => TabComponent;
-  
-  /** Sets the tab's text content */
-  setText: (content: string) => TabComponent;
-  
-  /** Gets the tab's text content */
-  getText: () => string;
-  
-  /** Sets the tab's icon */
-  setIcon: (icon: string) => TabComponent;
-  
-  /** Gets the tab's icon HTML content */
-  getIcon: () => string;
-  
-  /** Sets the tab's badge */
-  setBadge: (content: string | number) => TabComponent;
-  
-  /** Gets the tab's badge content */
-  getBadge: () => string;
-  
-  /** Shows the tab's badge */
-  showBadge: () => TabComponent;
-  
-  /** Hides the tab's badge */
-  hideBadge: () => TabComponent;
-  
-  /** Gets the badge component instance */
-  getBadgeComponent: () => BadgeComponent | undefined;
-  
-  /** Updates the tab's layout style based on content */
-  updateLayoutStyle: () => void;
-  
-  /** Adds an event listener to the tab */
-  on: (event: string, handler: Function) => TabComponent;
-  
-  /** Removes an event listener from the tab */
-  off: (event: string, handler: Function) => TabComponent;
-  
-  /** Destroys the tab component and cleans up resources */
-  destroy: () => void;
-  
-  /** API for managing disabled state */
-  disabled?: {
-    enable: () => void;
-    disable: () => void;
-    isDisabled: () => boolean;
-  };
-  
-  /** API for managing component lifecycle */
-  lifecycle?: {
-    destroy: () => void;
-  };
-}
-
-/**
- * Tabs component interface
- * @category Components
- */
-export interface TabsComponent {
-  /**
-   * Container element
-   */
-  element: HTMLElement;
-  
-  /**
-   * Creates and adds a new tab to the tabs component
-   * @param config - Tab configuration
-   * @returns The created tab component
-   */
-  addTab: (config: TabConfig) => TabComponent;
-  
-  /**
-   * Adds a pre-created tab to the tabs component
-   * @param tab - Tab component to add
-   * @returns Tabs component for chaining
-   */
-  add: (tab: TabComponent) => TabsComponent;
-  
-  /**
-   * Gets all tabs in the container
-   * @returns Array of tab components
-   */
-  getTabs: () => TabComponent[];
-  
-  /**
-   * Gets the active tab
-   * @returns Active tab or null if none
-   */
-  getActiveTab: () => TabComponent | null;
-  
-  /**
-   * Gets the indicator component
-   * @returns Tab indicator component
-   */
-  getIndicator?: () => TabIndicator;
-  
-  /**
-   * Sets a tab as active
-   * @param tabOrValue - Tab component or tab value
-   * @returns Tabs component for chaining
-   */
-  setActiveTab: (tabOrValue: TabComponent | string) => TabsComponent;
-  
-  /**
-   * Removes a tab from the container
-   * @param tabOrValue - Tab component or tab value
-   * @returns Tabs component for chaining
-   */
-  removeTab: (tabOrValue: TabComponent | string) => TabsComponent;
-  
-  /**
-   * Adds an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Tabs component for chaining
-   */
-  on: (event: string, handler: Function) => TabsComponent;
-  
-  /**
-   * Removes an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Tabs component for chaining
-   */
-  off: (event: string, handler: Function) => TabsComponent;
-  
-  /**
-   * Emit an event
-   * @param event - Event name
-   * @param data - Event data
-   * @returns Tabs component for chaining
-   */
-  emit?: (event: string, data: any) => TabsComponent;
-  
-  /**
-   * Destroys the tabs component and all tabs
-   */
-  destroy: () => void;
-  
-  /**
-   * Tab click event handler
-   */
-  handleTabClick: (event: any, tab: TabComponent) => void;
-  
-  /**
-   * Scroll container for scrollable tabs
-   */
-  scrollContainer?: HTMLElement;
-}

package/src/components/tabs/utils.ts

@@ -1,107 +0,0 @@
-// src/components/tabs/utils.ts
-import { TabsComponent, TabComponent } from './types';
-
-/**
- * Gets the active tab from a component
- * @param component - Component with tabs
- * @returns Active tab or null
- */
-export function getActiveTab(component: any): TabComponent | null {
-  // First try the standard method
-  if (typeof component.getActiveTab === 'function') {
-    return component.getActiveTab();
-  }
-  
-  // Fallback: check if component has tabs array
-  if (Array.isArray(component.tabs)) {
-    return component.tabs.find(tab => tab.isActive && tab.isActive());
-  }
-  
-  // If all else fails, return null
-  return null;
-}
-
-/**
- * Updates tab panels based on active tab
- * @param component - Component with tabs
- */
-export function updateTabPanels(component: any): void {
-  // Get active tab using our helper function
-  const activeTab = getActiveTab(component);
-  if (!activeTab) return;
-  
-  // Make sure getValue exists
-  if (typeof activeTab.getValue !== 'function') return;
-  
-  const activeValue = activeTab.getValue();
-  
-  // Find all tab panels in the document
-  const tabPanels = document.querySelectorAll(`[role="tabpanel"]`);
-  
-  tabPanels.forEach(panel => {
-    // Get the associated tab value
-    const forTab = panel.getAttribute('aria-labelledby')?.replace('tab-', '');
-    
-    if (forTab === activeValue) {
-      panel.removeAttribute('hidden');
-      panel.setAttribute('tabindex', '0');
-    } else {
-      panel.setAttribute('hidden', 'true');
-      panel.setAttribute('tabindex', '-1');
-    }
-  });
-}
-
-/**
- * Sets up keyboard navigation for tabs
- * @param component - Tabs component
- */
-export function setupKeyboardNavigation(component: any): void {
-  // Skip if element is missing
-  if (!component.element) return;
-  
-  component.element.addEventListener('keydown', (event: KeyboardEvent) => {
-    // Only handle arrow keys when tabs container has focus
-    if (event.target !== event.currentTarget) return;
-    
-    // Skip if getTabs or setActiveTab don't exist
-    if (typeof component.getTabs !== 'function' || 
-        typeof component.setActiveTab !== 'function') return;
-    
-    const tabs = component.getTabs();
-    const currentTab = getActiveTab(component);
-    const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;
-    
-    let newIndex = currentIndex;
-    
-    switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
-        newIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
-        break;
-        
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        newIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
-        break;
-        
-      case 'Home':
-        newIndex = 0;
-        break;
-        
-      case 'End':
-        newIndex = tabs.length - 1;
-        break;
-        
-      default:
-        return; // Don't handle other keys
-    }
-    
-    // If a new tab should be focused
-    if (newIndex !== currentIndex && tabs[newIndex]) {
-      event.preventDefault();
-      tabs[newIndex].element.focus();
-      component.setActiveTab(tabs[newIndex]);
-    }
-  });
-}