mtrl 0.3.8 → 0.4.0

package/src/components/tabs/state.ts

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

package/src/components/tabs/tab-api.ts

@@ -1,266 +0,0 @@
-// src/components/tabs/tab-api.ts
-import { TabComponent } from './types';
-import type { BadgeComponent } from '../badge';
-import createBadge from '../badge';
-
-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'
-}
-
-/**
- * API options for a Tab component
- */
-interface ApiOptions {
-  /** The button component's disabled API */
-  disabled: {
-    enable: () => void;
-    disable: () => void;
-    isDisabled?: () => boolean;
-  };
-  /** The component's lifecycle API */
-  lifecycle: {
-    destroy: () => void;
-  };
-  /** The button component (optional) */
-  button?: any;
-}
-
-/**
- * Component with required elements and methods
- */
-interface ComponentWithElements {
-  /** The DOM element */
-  element: HTMLElement;
-  /** The button component (optional) */
-  button?: any;
-  /** The badge component (optional) */
-  badge?: BadgeComponent;
-  /** Class name helper */
-  getClass: (name: string) => string;
-  /** Component configuration */
-  config: Record<string, any>;
-  /** Event emitter (optional) */
-  emit?: (event: string, data: any) => any;
-}
-
-/**
- * Enhances a tab component with API methods
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- */
-export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) => 
-  (component: ComponentWithElements): TabComponent => {
-    // Use the button component as a delegate for some methods
-    const buttonComponent = button || component.button;
-    
-    return {
-      ...component as any,
-      element: component.element,
-      
-      /**
-       * Gets the tab's value
-       */
-      getValue: () => {
-        if (buttonComponent && typeof buttonComponent.getValue === 'function') {
-          return buttonComponent.getValue();
-        }
-        const value = component.element.getAttribute('data-value');
-        return value !== null ? value : '';
-      },
-      
-      /**
-       * Sets the tab's value
-       */
-      setValue(value: string) {
-        const safeValue = value || '';
-        if (buttonComponent && typeof buttonComponent.setValue === 'function') {
-          buttonComponent.setValue(safeValue);
-        } else {
-          component.element.setAttribute('data-value', safeValue);
-        }
-        return this;
-      },
-      
-      /**
-       * Activates the tab
-       */
-      activate() {
-        component.element.classList.add(`${component.getClass('tab')}--active`);
-        component.element.setAttribute('aria-selected', 'true');
-        return this;
-      },
-      
-      /**
-       * Deactivates the tab
-       */
-      deactivate() {
-        component.element.classList.remove(`${component.getClass('tab')}--active`);
-        component.element.setAttribute('aria-selected', 'false');
-        return this;
-      },
-      
-      /**
-       * Checks if the tab is active
-       */
-      isActive() {
-        return component.element.classList.contains(`${component.getClass('tab')}--active`);
-      },
-      
-      /**
-       * Enables the tab
-       */
-      enable() {
-        if (disabled && typeof disabled.enable === 'function') {
-          disabled.enable();
-        }
-        return this;
-      },
-      
-      /**
-       * Disables the tab
-       */
-      disable() {
-        if (disabled && typeof disabled.disable === 'function') {
-          disabled.disable();
-        }
-        return this;
-      },
-      
-      /**
-       * Sets the tab's text content
-       */
-      setText(content: string) {
-        if (buttonComponent && typeof buttonComponent.setText === 'function') {
-          buttonComponent.setText(content);
-          this.updateLayoutStyle();
-        }
-        return this;
-      },
-      
-      /**
-       * Gets the tab's text content
-       */
-      getText() {
-        return buttonComponent && typeof buttonComponent.getText === 'function' 
-          ? buttonComponent.getText() 
-          : '';
-      },
-      
-      /**
-       * Sets the tab's icon
-       */
-      setIcon(icon: string) {
-        if (buttonComponent && typeof buttonComponent.setIcon === 'function') {
-          buttonComponent.setIcon(icon);
-          this.updateLayoutStyle();
-        }
-        return this;
-      },
-      
-      /**
-       * Gets the tab's icon
-       */
-      getIcon() {
-        return buttonComponent && typeof buttonComponent.getIcon === 'function'
-          ? buttonComponent.getIcon()
-          : '';
-      },
-      
-      /**
-       * Sets the tab's badge
-       */
-      setBadge(content: string | number) {
-        if (!component.badge) {
-          // Create badge on demand if it doesn't exist
-          const badgeConfig = {
-            content,
-            standalone: false,
-            target: component.element,
-            prefix: component.config.prefix
-          };
-          component.badge = createBadge(badgeConfig);
-        } else {
-          component.badge.setContent(content);
-          component.badge.show();
-        }
-        return this;
-      },
-      
-      /**
-       * Gets the tab's badge content
-       */
-      getBadge() {
-        return component.badge ? component.badge.getContent() : '';
-      },
-      
-      /**
-       * Shows the tab's badge
-       */
-      showBadge() {
-        if (component.badge) {
-          component.badge.show();
-        }
-        return this;
-      },
-      
-      /**
-       * Hides the tab's badge
-       */
-      hideBadge() {
-        if (component.badge) {
-          component.badge.hide();
-        }
-        return this;
-      },
-      
-      /**
-       * Gets the badge component
-       */
-      getBadgeComponent() {
-        return component.badge;
-      },
-      
-      /**
-       * Destroys the tab
-       */
-      destroy() {
-        if (component.badge) {
-          component.badge.destroy();
-        }
-        
-        if (lifecycle && typeof lifecycle.destroy === 'function') {
-          lifecycle.destroy();
-        }
-      },
-      
-      /**
-       * Updates tab layout classes based on content
-       */
-      updateLayoutStyle() {
-        const hasText = !!this.getText();
-        const hasIcon = !!this.getIcon();
-        let layoutClass = '';
-        
-        if (hasText && hasIcon) {
-          layoutClass = TAB_LAYOUT.ICON_AND_TEXT;
-        } else if (hasIcon) {
-          layoutClass = TAB_LAYOUT.ICON_ONLY;
-        } else {
-          layoutClass = TAB_LAYOUT.TEXT_ONLY;
-        }
-        
-        // Remove all existing layout classes
-        Object.values(TAB_LAYOUT).forEach(layout => {
-          component.element.classList.remove(`${component.getClass('tab')}--${layout}`);
-        });
-        
-        // Add the appropriate layout class
-        component.element.classList.add(`${component.getClass('tab')}--${layoutClass}`);
-      }
-    };
-  };

package/src/components/tabs/tab.ts

@@ -1,267 +0,0 @@
-// src/components/tabs/tab.ts
-import { pipe } from '../../core/compose';
-import { createBase } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { TabConfig, TabComponent } from './types';
-import { TAB_STATES, TAB_LAYOUT } from './constants';
-import { createTabConfig } from './config';
-import createButton from '../button';
-import createBadge from '../badge';
-
-/**
- * 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'
-};
-
-/**
- * Creates a new Tab component following MD3 guidelines
- * @param {TabConfig} config - Tab configuration object
- * @returns {TabComponent} Tab component instance
- */
-export const createTab = (config: TabConfig = {}): TabComponent => {
-  const baseConfig = createTabConfig(config);
-  
-  try {
-    // Create base component with events and lifecycle
-    const baseComponent = pipe(
-      createBase,
-      withEvents(),
-      withLifecycle()
-    )(baseConfig);
-    
-    // Create a button for the tab
-    const button = createButton({
-      text: baseConfig.text,
-      icon: baseConfig.icon,
-      iconSize: baseConfig.iconSize,
-      disabled: baseConfig.disabled,
-      ripple: baseConfig.ripple !== false, // Enable ripple by default
-      rippleConfig: {
-        duration: 400,
-        timing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-        opacity: ['0.2', '0'],
-        ...(baseConfig.rippleConfig || {})
-      },
-      value: baseConfig.value,
-      prefix: baseConfig.prefix,
-      variant: 'text', // MD3 tabs use text button style
-      class: `${baseConfig.prefix}-tab`
-    });
-    
-    // Use the button element as our element
-    baseComponent.element = button.element;
-    
-    // Set up tab accessibility attributes
-    baseComponent.element.setAttribute('role', 'tab');
-    baseComponent.element.setAttribute('aria-selected', 
-      baseConfig.state === 'active' ? 'true' : 'false');
-    
-    // For better accessibility
-    if (baseConfig.value) {
-      baseComponent.element.setAttribute('id', `tab-${baseConfig.value}`);
-      baseComponent.element.setAttribute('aria-controls', `tabpanel-${baseConfig.value}`);
-    }
-    
-    // Add active state if specified in config
-    if (baseConfig.state === 'active') {
-      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--active`);
-    }
-    
-    // Forward button events to our component
-    button.on('click', (event) => {
-      if (baseComponent.emit) {
-        baseComponent.emit('click', event);
-      }
-    });
-    
-    // Create the tab component with enhanced API
-    const tab: TabComponent = {
-      ...baseComponent,
-      button,
-      element: button.element,
-      
-      // Badge support
-      badge: null,
-      
-      // Tab state methods
-      getValue() {
-        return button.getValue();
-      },
-      
-      setValue(value) {
-        const safeValue = value || '';
-        button.setValue(safeValue);
-        
-        // Update accessibility attributes
-        this.element.setAttribute('id', `tab-${safeValue}`);
-        this.element.setAttribute('aria-controls', `tabpanel-${safeValue}`);
-        
-        return this;
-      },
-      
-      activate() {
-        this.element.classList.add(`${this.getClass('tab')}--active`);
-        this.element.setAttribute('aria-selected', 'true');
-        
-        // Dispatch event for screen readers
-        const event = new CustomEvent('tab:activated', { 
-          bubbles: true,
-          detail: { value: this.getValue() }
-        });
-        this.element.dispatchEvent(event);
-        
-        return this;
-      },
-      
-      deactivate() {
-        this.element.classList.remove(`${this.getClass('tab')}--active`);
-        this.element.setAttribute('aria-selected', 'false');
-        return this;
-      },
-      
-      isActive() {
-        return this.element.classList.contains(`${this.getClass('tab')}--active`);
-      },
-      
-      enable() {
-        button.enable();
-        this.element.removeAttribute('aria-disabled');
-        return this;
-      },
-      
-      disable() {
-        button.disable();
-        this.element.setAttribute('aria-disabled', 'true');
-        return this;
-      },
-      
-      setText(content) {
-        button.setText(content);
-        this.updateLayoutStyle();
-        return this;
-      },
-      
-      getText() {
-        return button.getText();
-      },
-      
-      setIcon(icon) {
-        button.setIcon(icon);
-        this.updateLayoutStyle();
-        return this;
-      },
-      
-      getIcon() {
-        return button.getIcon();
-      },
-      
-      // Badge methods
-      setBadge(content) {
-        if (!this.badge) {
-          const badgeConfig = {
-            content,
-            standalone: false,
-            target: this.element,
-            prefix: baseConfig.prefix,
-            ...(baseConfig.badgeConfig || {})
-          };
-          
-          this.badge = createBadge(badgeConfig);
-        } else {
-          this.badge.setContent(content);
-          this.badge.show();
-        }
-        
-        // Add badge presence attribute for potential styling
-        this.element.setAttribute('data-has-badge', 'true');
-        
-        return this;
-      },
-      
-      getBadge() {
-        return this.badge ? this.badge.getContent() : '';
-      },
-      
-      showBadge() {
-        if (this.badge) {
-          this.badge.show();
-          this.element.setAttribute('data-has-badge', 'true');
-        }
-        return this;
-      },
-      
-      hideBadge() {
-        if (this.badge) {
-          this.badge.hide();
-          this.element.setAttribute('data-has-badge', 'false');
-        }
-        return this;
-      },
-      
-      getBadgeComponent() {
-        return this.badge;
-      },
-      
-      destroy() {
-        if (this.badge) {
-          this.badge.destroy();
-        }
-        
-        if (button.destroy) {
-          button.destroy();
-        }
-        
-        baseComponent.lifecycle.destroy();
-      },
-      
-      updateLayoutStyle() {
-        const hasText = !!this.getText();
-        const hasIcon = !!this.getIcon();
-        let layoutClass = '';
-        
-        if (hasText && hasIcon) {
-          layoutClass = TAB_LAYOUT.ICON_AND_TEXT;
-        } else if (hasIcon) {
-          layoutClass = TAB_LAYOUT.ICON_ONLY;
-        } else {
-          layoutClass = TAB_LAYOUT.TEXT_ONLY;
-        }
-        
-        // Remove all existing layout classes
-        Object.values(TAB_LAYOUT).forEach(layout => {
-          this.element.classList.remove(`${this.getClass('tab')}--${layout}`);
-        });
-        
-        // Add the appropriate layout class
-        this.element.classList.add(`${this.getClass('tab')}--${layoutClass}`);
-        
-        // Set appropriate aria-label when icon-only
-        if (layoutClass === TAB_LAYOUT.ICON_ONLY && hasText) {
-          this.element.setAttribute('aria-label', this.getText());
-        } else {
-          this.element.removeAttribute('aria-label');
-        }
-      }
-    };
-    
-    // Add badge if specified in config
-    if (baseConfig.badge !== undefined) {
-      tab.setBadge(baseConfig.badge);
-    }
-    
-    // Initialize layout style based on content
-    tab.updateLayoutStyle();
-    
-    return tab;
-  } catch (error) {
-    console.error('Tab creation error:', error);
-    throw new Error(`Failed to create tab: ${(error as Error).message}`);
-  }
-};