mtrl 0.2.5 → 0.2.7

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}`);

package/src/components/tabs/types.ts

@@ -1,36 +1,148 @@
 // src/components/tabs/types.ts
-import { TABS_VARIANTS } from './constants';
+import { TABS_VARIANTS, TAB_STATES, TAB_LAYOUT } from './constants';
+import { BadgeComponent } from '../badge/types';
+import { TabIndicator } from './indicator';
 
 /**
- * Tab item configuration
+ * Configuration for the tab indicator
  * @category Components
  */
-export interface TabItem {
+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 {
   /**
-   * Unique identifier for the tab
+   * The tab component that was activated
    */
-  id: string;
+  tab: TabComponent;
   
   /**
-   * Display label for the tab
+   * The value of the activated tab
    */
-  label: string;
+  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?: keyof typeof TAB_STATES | string;
   
-  /**
-   * Optional icon HTML content
+  /** 
+   * 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;
+  
   /**
-   * Whether the tab is disabled
-   * @default false
+   * Badge configuration object
+   * Pass additional options for the badge component
    */
-  disabled?: boolean;
+  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];
+  };
   
   /**
-   * Additional data to associate with this tab
+   * Variant of the tab
    */
-  data?: any;
+  variant?: string;
 }
 
 /**
@@ -39,209 +151,301 @@ export interface TabItem {
  */
 export interface TabsConfig {
   /**
-   * Tabs variant that determines visual styling
+   * Tabs variant (primary or secondary)
    * @default 'primary'
    */
   variant?: keyof typeof TABS_VARIANTS | string;
   
   /**
-   * Initial tab items
+   * Initial tabs to create
    */
-  items?: TabItem[];
+  tabs?: TabConfig[];
   
   /**
-   * Index of the initially active tab
-   * @default 0
+   * Whether to show the divider
+   * @default true
    */
-  activeIndex?: number;
+  showDivider?: boolean;
   
   /**
-   * Whether the tabs component is initially disabled
-   * @default false
+   * Whether to enable horizontal scrolling
+   * @default true
    */
-  disabled?: boolean;
+  scrollable?: boolean;
   
   /**
-   * Whether to show tab indicator
-   * @default true 
+   * Additional CSS classes for the container
    */
-  showIndicator?: boolean;
+  class?: string;
   
   /**
-   * Whether to enable animated transitions
-   * @default true
+   * Component prefix for class names
+   * @default 'mtrl'
    */
-  animated?: boolean;
+  prefix?: string;
   
   /**
-   * Whether tabs should be scrollable when they overflow
-   * @default true
+   * Event handlers configuration
    */
-  scrollable?: boolean;
+  on?: {
+    /**
+     * Tab change event handler
+     */
+    change?: (event: TabChangeEventData) => void;
+    
+    /**
+     * Event handlers for other events
+     */
+    [key: string]: Function | undefined;
+  };
   
   /**
-   * Additional CSS classes to add to the tabs component
+   * Tab indicator configuration
    */
-  class?: string;
+  indicator?: IndicatorConfig;
   
   /**
-   * Component prefix for class names
-   * @default 'mtrl'
+   * Tab indicator height in pixels
+   * @deprecated Use indicator.height instead
    */
-  prefix?: string;
+  indicatorHeight?: number;
   
   /**
-   * Component name used in class generation
+   * Tab indicator width strategy
+   * @deprecated Use indicator.widthStrategy instead
    */
-  componentName?: string;
+  indicatorWidthStrategy?: 'fixed' | 'dynamic' | 'content';
 }
 
 /**
- * Tabs component interface
+ * Icon API interface for managing tab icons
  * @category Components
  */
-export interface TabsComponent {
-  /** The tabs container DOM element */
-  element: HTMLElement;
-  
-  /** The tabs list DOM element */
-  tabsListElement: HTMLElement;
-  
-  /** The tab indicator DOM element */
-  indicatorElement: HTMLElement;
-  
-  /** API for managing disabled state */
-  disabled: {
-    /** Enables the tabs component */
-    enable: () => void;
-    /** Disables the tabs component */
-    disable: () => void;
-    /** Checks if the tabs component is disabled */
-    isDisabled: () => boolean;
-  };
-  
-  /** API for managing component lifecycle */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
+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 a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
+   * Gets the current icon HTML content
+   * @returns HTML string for the icon
    */
-  getClass: (name: string) => string;
+  getIcon: () => string;
   
   /**
-   * Enables the tabs component
-   * @returns The tabs component for chaining
+   * Gets the icon DOM element
+   * @returns The icon element or null if not present
    */
-  enable: () => TabsComponent;
+  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;
   
   /**
-   * Disables the tabs component
-   * @returns The tabs component for chaining
+   * Gets the current text content
+   * @returns Tab text content
    */
-  disable: () => TabsComponent;
+  getText: () => string;
   
   /**
-   * Gets all tab items
-   * @returns Array of tab items
+   * Gets the text DOM element
+   * @returns The text element or null if not present
    */
-  getItems: () => TabItem[];
+  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 {
   /**
-   * Sets tab items, replacing any existing tabs
-   * @param items - Array of tab items
-   * @returns The tabs component for chaining
+   * Container element
    */
-  setItems: (items: TabItem[]) => TabsComponent;
+  element: HTMLElement;
   
   /**
-   * Adds a new tab
-   * @param item - Tab item configuration
-   * @param index - Optional index to insert at (appends if omitted)
-   * @returns The tabs component for chaining
+   * Creates and adds a new tab to the tabs component
+   * @param config - Tab configuration
+   * @returns The created tab component
    */
-  addTab: (item: TabItem, index?: number) => TabsComponent;
+  addTab: (config: TabConfig) => TabComponent;
   
   /**
-   * Removes a tab by ID or index
-   * @param idOrIndex - Tab ID or index
-   * @returns The tabs component for chaining
+   * Adds a pre-created tab to the tabs component
+   * @param tab - Tab component to add
+   * @returns Tabs component for chaining
    */
-  removeTab: (idOrIndex: string | number) => TabsComponent;
+  add: (tab: TabComponent) => TabsComponent;
   
   /**
-   * Gets the currently active tab
-   * @returns The active tab item or null if none active
+   * Gets all tabs in the container
+   * @returns Array of tab components
    */
-  getActiveTab: () => TabItem | null;
+  getTabs: () => TabComponent[];
   
   /**
-   * Gets the index of the currently active tab
-   * @returns The active tab index or -1 if none active
+   * Gets the active tab
+   * @returns Active tab or null if none
    */
-  getActiveIndex: () => number;
+  getActiveTab: () => TabComponent | null;
   
   /**
-   * Sets the active tab by index
-   * @param index - Index of the tab to activate
-   * @returns The tabs component for chaining
+   * Gets the indicator component
+   * @returns Tab indicator component
    */
-  setActiveTab: (index: number) => TabsComponent;
+  getIndicator?: () => TabIndicator;
   
   /**
-   * Sets the active tab by ID
-   * @param id - ID of the tab to activate
-   * @returns The tabs component for chaining
+   * Sets a tab as active
+   * @param tabOrValue - Tab component or tab value
+   * @returns Tabs component for chaining
    */
-  setActiveTabById: (id: string) => TabsComponent;
+  setActiveTab: (tabOrValue: TabComponent | string) => TabsComponent;
   
   /**
-   * Destroys the tabs component and cleans up resources
+   * Removes a tab from the container
+   * @param tabOrValue - Tab component or tab value
+   * @returns Tabs component for chaining
    */
-  destroy: () => void;
+  removeTab: (tabOrValue: TabComponent | string) => TabsComponent;
   
   /**
-   * Adds an event listener to the tabs component
-   * @param event - Event name ('change', 'click', etc.)
-   * @param handler - Event handler function
-   * @returns The tabs component for chaining
+   * 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 from the tabs component
+   * Removes an event listener
    * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The tabs component for chaining
+   * @param handler - Event handler
+   * @returns Tabs component for chaining
    */
   off: (event: string, handler: Function) => TabsComponent;
-}
-
-/**
- * Event data for tab change events
- */
-export interface TabChangeEventData {
+  
   /**
-   * Index of the newly activated tab
+   * Emit an event
+   * @param event - Event name
+   * @param data - Event data
+   * @returns Tabs component for chaining
    */
-  index: number;
+  emit?: (event: string, data: any) => TabsComponent;
   
   /**
-   * The newly activated tab item
+   * Destroys the tabs component and all tabs
    */
-  tab: TabItem;
+  destroy: () => void;
   
   /**
-   * Index of the previously active tab or -1
+   * Tab click event handler
    */
-  previousIndex: number;
+  handleTabClick: (event: any, tab: TabComponent) => void;
   
   /**
-   * The previously active tab item or null
+   * Scroll container for scrollable tabs
    */
-  previousTab: TabItem | null;
+  scrollContainer?: HTMLElement;
 }