mtrl 0.2.4 → 0.2.6

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

@@ -0,0 +1,258 @@
+// src/components/tabs/tab-api.ts
+import { TabComponent } from './types';
+import { TAB_STATES, TAB_LAYOUT } from './constants';
+import { BadgeComponent } from '../badge/types';
+import createBadge from '../badge';
+
+/**
+ * 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')}--${TAB_STATES.ACTIVE}`);
+        component.element.setAttribute('aria-selected', 'true');
+        return this;
+      },
+      
+      /**
+       * Deactivates the tab
+       */
+      deactivate() {
+        component.element.classList.remove(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.setAttribute('aria-selected', 'false');
+        return this;
+      },
+      
+      /**
+       * Checks if the tab is active
+       */
+      isActive() {
+        return component.element.classList.contains(`${component.getClass('tab')}--${TAB_STATES.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

@@ -0,0 +1,255 @@
+// 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';
+
+/**
+ * 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 === TAB_STATES.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 === TAB_STATES.ACTIVE) {
+      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--${TAB_STATES.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')}--${TAB_STATES.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')}--${TAB_STATES.ACTIVE}`);
+        this.element.setAttribute('aria-selected', 'false');
+        return this;
+      },
+      
+      isActive() {
+        return this.element.classList.contains(`${this.getClass('tab')}--${TAB_STATES.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}`);
+  }
+};

package/src/components/tabs/tabs.ts

@@ -1,48 +1,67 @@
 // src/components/tabs/tabs.ts
-import { PREFIX } from '../../core/config';
 import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withVariant,
-  withDisabled,
-  withLifecycle
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { TabsConfig } from './types';
-import { TABS_VARIANTS } from './constants';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+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
+ * 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 = {}) => {
-  const baseConfig = createBaseConfig(config);
+const createTabs = (config: TabsConfig = {}): TabsComponent => {
+  const baseConfig = createTabsConfig(config);
+  
+  // Add ripple styles for state transitions
+  addTabStateStyles();
 
   try {
-    const tabs = pipe(
+    // Build the tabs component with all features
+    const component = pipe(
       createBase,
       withEvents(),
-      withElement(getElementConfig(baseConfig)),
-      withVariant(baseConfig),
-      withDisabled(baseConfig),
+      getTabsElementConfig(baseConfig),
+      withScrollable(baseConfig),
+      withTabsManagement(baseConfig),
+      withDivider(baseConfig),
+      withIndicator(baseConfig),  // Add indicator feature
       withLifecycle(),
       comp => withAPI(getApiConfig(comp))(comp)
     )(baseConfig);
-
-    // Initialize tabs
-    if (baseConfig.items && baseConfig.items.length > 0) {
-      tabs.setItems(baseConfig.items);
-    }
-
-    // Set active tab if specified
-    if (baseConfig.activeIndex !== undefined) {
-      tabs.setActiveTab(baseConfig.activeIndex);
-    }
-
-    return tabs;
+    
+    // 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}`);