mtrl 0.2.5 → 0.2.7

package/src/components/fab/types.ts

@@ -0,0 +1,234 @@
+// src/components/fab/types.ts
+import { FAB_VARIANTS, FAB_SIZES } from './constants';
+
+/**
+ * Configuration interface for the FAB component
+ * @category Components
+ */
+export interface FabConfig {
+  /** 
+   * FAB variant that determines visual styling
+   * @default 'primary'
+   */
+  variant?: keyof typeof FAB_VARIANTS | string;
+  
+  /** 
+   * FAB size variant
+   * @default 'default'
+   */
+  size?: keyof typeof FAB_SIZES | string;
+  
+  /** 
+   * Whether the FAB is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /** 
+   * FAB icon HTML content
+   * @example '<svg>...</svg>'
+   */
+  icon?: string;
+  
+  /** 
+   * Icon size in pixels or other CSS units
+   * @example '24px'
+   */
+  iconSize?: string;
+  
+  /** 
+   * Additional CSS classes to add to the FAB
+   * @example 'home-fab bottom-right'
+   */
+  class?: string;
+  
+  /** 
+   * Button value attribute
+   */
+  value?: string;
+  
+  /**
+   * Position of the FAB on the screen
+   * @example 'bottom-right'
+   */
+  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+  
+  /** 
+   * Button type attribute
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+  
+  /**
+   * Accessible label for screen readers
+   */
+  ariaLabel?: 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];
+  };
+
+  /**
+   * Whether to show the FAB with an entrance animation
+   * @default false
+   */
+  animate?: boolean;
+}
+
+/**
+ * FAB component interface
+ * @category Components
+ */
+export interface FabComponent {
+  /** The FAB's DOM element */
+  element: HTMLButtonElement;
+  
+  /** API for managing FAB icons */
+  icon: {
+    /** Sets the icon HTML content */
+    setIcon: (html: string) => any;
+    /** Gets the current icon HTML content */
+    getIcon: () => string;
+    /** Gets the icon DOM element */
+    getElement: () => HTMLElement | null;
+  };
+  
+  /** API for managing disabled state */
+  disabled: {
+    /** Enables the FAB */
+    enable: () => void;
+    /** Disables the FAB */
+    disable: () => void;
+    /** Checks if the FAB is disabled */
+    isDisabled: () => boolean;
+  };
+  
+  /** API for managing component lifecycle */
+  lifecycle: {
+    /** Destroys the component and cleans up resources */
+    destroy: () => void;
+  };
+  
+  /**
+   * Gets a class name with the component's prefix
+   * @param name - Base class name
+   * @returns Prefixed class name
+   */
+  getClass: (name: string) => string;
+  
+  /**
+   * Gets the FAB's value attribute
+   * @returns FAB value
+   */
+  getValue: () => string;
+  
+  /**
+   * Sets the FAB's value attribute
+   * @param value - New value
+   * @returns The FAB component for chaining
+   */
+  setValue: (value: string) => FabComponent;
+  
+  /**
+   * Enables the FAB (removes disabled attribute)
+   * @returns The FAB component for chaining
+   */
+  enable: () => FabComponent;
+  
+  /**
+   * Disables the FAB (adds disabled attribute)
+   * @returns The FAB component for chaining
+   */
+  disable: () => FabComponent;
+  
+  /**
+   * Sets the FAB's icon
+   * @param icon - Icon HTML content
+   * @returns The FAB component for chaining
+   */
+  setIcon: (icon: string) => FabComponent;
+  
+  /**
+   * Gets the FAB's icon HTML content
+   * @returns Icon HTML
+   */
+  getIcon: () => string;
+  
+  /**
+   * Sets the FAB's position
+   * @param position - Position value ('top-right', 'bottom-left', etc.)
+   * @returns The FAB component for chaining
+   */
+  setPosition: (position: string) => FabComponent;
+  
+  /**
+   * Gets the current position of the FAB
+   * @returns Current position
+   */
+  getPosition: () => string | null;
+
+  /**
+   * Lowers the FAB (useful for pressed state)
+   * @returns The FAB component for chaining
+   */
+  lower: () => FabComponent;
+  
+  /**
+   * Raises the FAB back to its default elevation
+   * @returns The FAB component for chaining
+   */
+  raise: () => FabComponent;
+  
+  /**
+   * Destroys the FAB component and cleans up resources
+   */
+  destroy: () => void;
+  
+  /**
+   * Adds an event listener to the FAB
+   * @param event - Event name ('click', 'focus', etc.)
+   * @param handler - Event handler function
+   * @returns The FAB component for chaining
+   */
+  on: (event: string, handler: Function) => FabComponent;
+  
+  /**
+   * Removes an event listener from the FAB
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The FAB component for chaining
+   */
+  off: (event: string, handler: Function) => FabComponent;
+  
+  /**
+   * Adds CSS classes to the FAB element
+   * @param classes - One or more class names to add
+   * @returns The FAB component for chaining
+   */
+  addClass: (...classes: string[]) => FabComponent;
+}

package/src/components/navigation/_styles.scss

@@ -249,6 +249,7 @@ $component: '#{base.$prefix}-nav';
     padding: 12px 0;
     transition: transform v.motion('duration-short2') v.motion('easing-standard');
     transform: translateX(0);
+    overflow-y: auto;
 
     // Hidden state
     &.#{$component}--hidden {

package/src/components/navigation/api.ts

@@ -1,79 +1,107 @@
-// src/components/navigation/api.ts
-import { 
-  BaseComponent, 
-  NavigationComponent, 
-  ApiOptions, 
-  NavItemConfig,
-  NavItemData
-} from './types';
+// src/components/button/api.ts
+import { ButtonComponent } from './types';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  text: {
+    setText: (content: string) => any;
+    getText: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  icon: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+}
 
 /**
- * Enhances navigation component with API methods
- * @param {ApiOptions} options - API configuration
+ * Enhances a button component with API methods
+ * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Button component
  */
 export const withAPI = ({ disabled, lifecycle }: ApiOptions) => 
-  (component: BaseComponent): NavigationComponent => ({
+  (component: ComponentWithElements): ButtonComponent => ({
     ...component as any,
-    element: component.element,
-    items: component.items as Map<string, NavItemData>,
-
-    // Item management
-    addItem(config: NavItemConfig): NavigationComponent {
-      component.addItem?.(config);
-      return this;
-    },
+    element: component.element as HTMLButtonElement,
+    
+    getValue: () => component.element.value,
     
-    removeItem(id: string): NavigationComponent {
-      component.removeItem?.(id);
+    setValue(value: string) {
+      component.element.value = value;
       return this;
     },
     
-    getItem(id: string): NavItemData | undefined {
-      return component.getItem?.(id);
+    enable() {
+      disabled.enable();
+      return this;
     },
     
-    getAllItems(): NavItemData[] {
-      return component.getAllItems?.() || [];
+    disable() {
+      disabled.disable();
+      return this;
     },
     
-    getItemPath(id: string): string[] {
-      return component.getItemPath?.(id) || [];
-    },
-
-    // Active state management
-    setActive(id: string): NavigationComponent {
-      component.setActive?.(id);
+    setText(content: string) {
+      component.text.setText(content);
+      this.updateCircularStyle();
+      
+      // If removing text from a button with an icon, ensure it has an accessible name
+      if (!content && component.icon.getElement()) {
+        if (!this.element.getAttribute('aria-label')) {
+          const className = this.element.className.split(' ')
+            .find(cls => !cls.startsWith(`${component.getClass('button')}`));
+          
+          if (className) {
+            this.element.setAttribute('aria-label', className);
+          }
+        }
+      }
+      
       return this;
     },
     
-    getActive(): NavItemData | null {
-      return component.getActive?.() || null;
-    },
-
-    // Event handling
-    on(event: string, handler: Function): NavigationComponent {
-      component.on?.(event, handler);
-      return this;
+    getText() {
+      return component.text.getText();
     },
     
-    off(event: string, handler: Function): NavigationComponent {
-      component.off?.(event, handler);
+    setIcon(icon: string) {
+      component.icon.setIcon(icon);
+      this.updateCircularStyle();
       return this;
     },
-
-    // State management
-    enable(): NavigationComponent {
-      disabled.enable();
-      return this;
+    
+    getIcon() {
+      return component.icon.getIcon();
     },
     
-    disable(): NavigationComponent {
-      disabled.disable();
+    setAriaLabel(label: string) {
+      component.element.setAttribute('aria-label', label);
       return this;
     },
     
-    destroy(): void {
+    destroy() {
       lifecycle.destroy();
+    },
+    
+    updateCircularStyle() {
+      const hasText = component.text.getText();
+      if (!hasText && component.icon.getElement()) {
+        component.element.classList.add(`${component.getClass('button')}--circular`);
+      } else {
+        component.element.classList.remove(`${component.getClass('button')}--circular`);
+      }
     }
   });

package/src/components/navigation/features/items.ts

@@ -0,0 +1,280 @@
+// src/components/navigation/features/items.ts
+import { createNavItem, getAllNestedItems } from '../nav-item';
+import { NavItemConfig, NavItemData } from '../types';
+
+// Type definitions to help with TypeScript conversion
+interface Component {
+  element: HTMLElement;
+  emit?: (event: string, data: any) => void;
+  lifecycle?: {
+    destroy: () => void;
+  };
+  [key: string]: any;
+}
+
+interface ItemsComponent extends Component {
+  items: Map<string, NavItemData>;
+  addItem: (config: NavItemConfig) => ItemsComponent;
+  removeItem: (id: string) => ItemsComponent;
+  getItem: (id: string) => NavItemData | undefined;
+  getAllItems: () => NavItemData[];
+  getActive: () => NavItemData | null;
+  getItemPath: (id: string) => string[];
+  setActive: (id: string) => ItemsComponent;
+}
+
+interface NavigationConfig {
+  prefix?: string;
+  items?: NavItemConfig[];
+  [key: string]: any;
+}
+
+export const withNavItems = (config: NavigationConfig) => (component: Component): ItemsComponent => {
+  const items = new Map<string, NavItemData>();
+  let activeItem: NavItemData | null = null;
+
+  /**
+   * Recursively stores items in the items Map
+   * @param {NavItemConfig} itemConfig - Item configuration
+   * @param {HTMLElement} item - Created item element
+   */
+  const storeItem = (itemConfig: NavItemConfig, item: HTMLElement): void => {
+    items.set(itemConfig.id, { element: item, config: itemConfig });
+
+    if (itemConfig.items?.length) {
+      itemConfig.items.forEach(nestedConfig => {
+        const container = item.closest(`.${config.prefix}-nav-item-container`);
+        if (container) {
+          const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`);
+          if (nestedContainer) {
+            const nestedItem = nestedContainer.querySelector(`[data-id="${nestedConfig.id}"]`) as HTMLElement;
+            if (nestedItem) {
+              storeItem(nestedConfig, nestedItem);
+            }
+          }
+        }
+      });
+    }
+  };
+
+  /**
+   * Updates the active state for an item
+   * @param {HTMLElement} item - Item element to activate
+   * @param {NavItemData} itemData - Item data
+   * @param {boolean} active - Whether to make active or inactive
+   */
+  const updateActiveState = (item: HTMLElement, itemData: NavItemData, active: boolean): void => {
+    // Determine the correct active attribute based on role
+    const role = item.getAttribute('role');
+    
+    if (active) {
+      item.classList.add(`${config.prefix}-nav-item--active`);
+      
+      // Set appropriate attribute based on role
+      if (role === 'tab') {
+        item.setAttribute('aria-selected', 'true');
+        item.setAttribute('tabindex', '0');
+      } else if (!item.getAttribute('aria-haspopup')) {
+        // Use aria-current for navigation items that aren't expandable
+        item.setAttribute('aria-current', 'page');
+      }
+    } else {
+      item.classList.remove(`${config.prefix}-nav-item--active`);
+      
+      // Remove appropriate attribute based on role
+      if (role === 'tab') {
+        item.setAttribute('aria-selected', 'false');
+        item.setAttribute('tabindex', '-1');
+      } else if (item.hasAttribute('aria-current')) {
+        item.removeAttribute('aria-current');
+      }
+    }
+  };
+
+  // Create initial items
+  if (config.items) {
+    config.items.forEach(itemConfig => {
+      const item = createNavItem(itemConfig, component.element, config.prefix || 'mtrl');
+      storeItem(itemConfig, item);
+
+      if (itemConfig.active) {
+        activeItem = { element: item, config: itemConfig };
+        updateActiveState(item, activeItem, true);
+      }
+    });
+  }
+
+  // Handle item clicks
+  component.element.addEventListener('click', (event: Event) => {
+    const item = (event.target as HTMLElement).closest(`.${config.prefix}-nav-item`) as HTMLElement;
+    if (!item || (item as any).disabled || item.getAttribute('aria-haspopup') === 'menu') return;
+
+    const id = item.dataset.id;
+    if (!id) return;
+    
+    const itemData = items.get(id);
+    if (!itemData) return;
+
+    // Skip if this is an expandable item
+    if (item.getAttribute('aria-expanded') !== null) return;
+
+    // Store previous item before updating
+    const previousItem = activeItem;
+
+    // Update active state
+    if (activeItem) {
+      updateActiveState(activeItem.element, activeItem, false);
+    }
+
+    updateActiveState(item, itemData, true);
+    activeItem = itemData;
+
+    // Emit change event with item data
+    if (component.emit) {
+      component.emit('change', {
+        id,
+        item: itemData,
+        previousItem,
+        path: getItemPath(id)
+      });
+    }
+  });
+
+  /**
+   * Gets the path to an item (parent IDs)
+   * @param {string} id - Item ID to get path for
+   * @returns {Array<string>} Array of parent item IDs
+   */
+  const getItemPath = (id: string): string[] => {
+    const path: string[] = [];
+    let currentItem = items.get(id);
+
+    if (!currentItem) return path;
+
+    let parentContainer = currentItem.element.closest(`.${config.prefix}-nav-nested-container`);
+    while (parentContainer) {
+      const parentItemContainer = parentContainer.parentElement;
+      if (!parentItemContainer) break;
+
+      const parentItem = parentItemContainer.querySelector(`.${config.prefix}-nav-item`);
+      if (!parentItem) break;
+
+      const parentId = parentItem.getAttribute('data-id');
+      if (!parentId) break;
+
+      path.unshift(parentId);
+      
+      // Move up to next level
+      parentContainer = parentItemContainer.closest(`.${config.prefix}-nav-nested-container`);
+    }
+
+    return path;
+  };
+
+  // Clean up when component is destroyed
+  if (component.lifecycle) {
+    const originalDestroy = component.lifecycle.destroy;
+    component.lifecycle.destroy = () => {
+      items.clear();
+      if (originalDestroy) {
+        originalDestroy();
+      }
+    };
+  }
+
+  return {
+    ...component,
+    items,
+
+    addItem(itemConfig: NavItemConfig) {
+      if (items.has(itemConfig.id)) return this;
+
+      const item = createNavItem(itemConfig, component.element, config.prefix || 'mtrl');
+      storeItem(itemConfig, item);
+
+      if (itemConfig.active) {
+        this.setActive(itemConfig.id);
+      }
+
+      if (component.emit) {
+        component.emit('itemAdded', {
+          id: itemConfig.id,
+          item: { element: item, config: itemConfig }
+        });
+      }
+      return this;
+    },
+
+    removeItem(id: string) {
+      const item = items.get(id);
+      if (!item) return this;
+
+      // Remove all nested items first
+      const nestedItems = getAllNestedItems(item.element, config.prefix || 'mtrl');
+      nestedItems.forEach(nestedItem => {
+        const nestedId = nestedItem.dataset.id;
+        if (nestedId) items.delete(nestedId);
+      });
+
+      if (activeItem?.config.id === id) {
+        activeItem = null;
+      }
+
+      // Remove the entire item container
+      const container = item.element.closest(`.${config.prefix}-nav-item-container`);
+      if (container) {
+        container.remove();
+      }
+      items.delete(id);
+
+      if (component.emit) {
+        component.emit('itemRemoved', { id, item });
+      }
+      return this;
+    },
+
+    getItem: (id: string) => items.get(id),
+    getAllItems: () => Array.from(items.values()),
+    getActive: () => activeItem,
+    getItemPath: (id: string) => getItemPath(id),
+
+    setActive(id: string) {
+      const item = items.get(id);
+      if (!item || item.config.disabled) return this;
+
+      if (activeItem) {
+        updateActiveState(activeItem.element, activeItem, false);
+      }
+
+      updateActiveState(item.element, item, true);
+      activeItem = item;
+
+      // Ensure all parent items are expanded
+      const path = getItemPath(id);
+      path.forEach(parentId => {
+        const parentItem = items.get(parentId);
+        if (parentItem) {
+          const parentButton = parentItem.element;
+          const container = parentButton.closest(`.${config.prefix}-nav-item-container`);
+          if (container) {
+            const nestedContainer = container.querySelector(`.${config.prefix}-nav-nested-container`);
+            if (nestedContainer) {
+              parentButton.setAttribute('aria-expanded', 'true');
+              nestedContainer.hidden = false;
+            }
+          }
+        }
+      });
+
+      if (component.emit) {
+        component.emit('activeChanged', {
+          id,
+          item,
+          previousItem: activeItem,
+          path: getItemPath(id)
+        });
+      }
+      return this;
+    }
+  };
+};