mtrl 0.2.4 → 0.2.6

package/src/components/tabs/types.ts

@@ -1,36 +1,140 @@
 // 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 */
+  widthStrategy?: 'fixed' | 'dynamic' | 'content';
+  /** 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 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 +143,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;
 }

package/src/components/tabs/utils.ts

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