mtrl 0.3.7 → 0.3.9

package/src/components/extended-fab/api.ts

@@ -1,193 +0,0 @@
-// src/components/extended-fab/api.ts
-import { ExtendedFabComponent } from './types';
-
-/**
- * API configuration options for the Extended FAB component
- * 
- * @category Components
- * @internal
- */
-interface ApiOptions {
-  /**
-   * Disabled state management API
-   */
-  disabled: {
-    /** Enables the component */
-    enable: () => void;
-    /** Disables the component */
-    disable: () => void;
-  };
-  
-  /**
-   * Lifecycle management API
-   */
-  lifecycle: {
-    /** Destroys the component */
-    destroy: () => void;
-  };
-  
-  /**
-   * Text content management API
-   */
-  text: {
-    /** Sets text content */
-    setText: (text: string) => any;
-    /** Gets text content */
-    getText: () => string;
-  };
-  
-  /**
-   * Base class name for the Extended FAB
-   */
-  className: string;
-}
-
-/**
- * Base component with element properties
- * 
- * @category Components
- * @internal
- */
-interface ComponentWithElements {
-  /** The DOM element */
-  element: HTMLElement;
-  
-  /** Icon management */
-  icon: {
-    /** Sets icon HTML content */
-    setIcon: (html: string) => any;
-    /** Gets icon HTML content */
-    getIcon: () => string;
-    /** Gets icon DOM element */
-    getElement: () => HTMLElement | null;
-  };
-  
-  /** Text management */
-  text: {
-    /** Sets text content */
-    setText: (text: string) => any;
-    /** Gets text content */
-    getText: () => string;
-    /** Gets text DOM element */
-    getElement: () => HTMLElement | null;
-  };
-  
-  /** Gets a class name with component's prefix */
-  getClass: (name: string) => string;
-}
-
-/**
- * Enhances an Extended FAB component with public API methods
- * 
- * Higher-order function that adds the full public API to the Extended FAB component,
- * exposing methods for changing appearance, handling state, managing position,
- * and controlling the collapse/expand behavior.
- * 
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * 
- * @category Components
- * @internal This is an internal utility for the Extended FAB component
- */
-export const withAPI = ({ disabled, lifecycle, text, className }: ApiOptions) => 
-  (component: ComponentWithElements): ExtendedFabComponent => ({
-    ...component as any,
-    element: component.element as HTMLButtonElement,
-    
-    getValue: () => component.element.value,
-    
-    setValue(value: string) {
-      component.element.value = value;
-      return this;
-    },
-    
-    enable() {
-      disabled.enable();
-      return this;
-    },
-    
-    disable() {
-      disabled.disable();
-      return this;
-    },
-    
-    setIcon(icon: string) {
-      component.icon.setIcon(icon);
-      return this;
-    },
-    
-    getIcon() {
-      return component.icon.getIcon();
-    },
-    
-    setText(newText: string) {
-      text.setText(newText);
-      return this;
-    },
-    
-    getText() {
-      return text.getText();
-    },
-    
-    setPosition(position: string) {
-      // First remove any existing position classes
-      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
-      positions.forEach(pos => {
-        component.element.classList.remove(`${className}--${pos}`);
-      });
-      
-      // Add new position class
-      component.element.classList.add(`${className}--${position}`);
-      return this;
-    },
-    
-    getPosition() {
-      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
-      for (const pos of positions) {
-        if (component.element.classList.contains(`${className}--${pos}`)) {
-          return pos;
-        }
-      }
-      return null;
-    },
-    
-    lower() {
-      component.element.classList.add(`${className}--lowered`);
-      return this;
-    },
-    
-    raise() {
-      component.element.classList.remove(`${className}--lowered`);
-      return this;
-    },
-    
-    collapse() {
-      component.element.classList.add(`${className}--collapsed`);
-      
-      // Emit a custom event that can be listened to
-      const event = new CustomEvent('collapse', { 
-        bubbles: true, 
-        cancelable: true 
-      });
-      component.element.dispatchEvent(event);
-      
-      return this;
-    },
-    
-    expand() {
-      component.element.classList.remove(`${className}--collapsed`);
-      
-      // Emit a custom event that can be listened to
-      const event = new CustomEvent('expand', { 
-        bubbles: true, 
-        cancelable: true 
-      });
-      component.element.dispatchEvent(event);
-      
-      return this;
-    },
-    
-    destroy() {
-      lifecycle.destroy();
-    }
-  });

package/src/components/extended-fab/config.ts

@@ -1,140 +0,0 @@
-// src/components/extended-fab/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { ExtendedFabConfig } from './types';
-
-/**
- * Default configuration for the Extended FAB component
- * 
- * Provides reasonable defaults for creating Extended FABs
- * according to Material Design 3 guidelines.
- * 
- * @category Components
- * @internal
- */
-export const defaultConfig: ExtendedFabConfig = {
-  variant: 'primary',
-  type: 'button',
-  ripple: true,
-  iconPosition: 'start',
-  width: 'fixed'
-};
-
-/**
- * Creates the base configuration for Extended FAB component
- * 
- * Merges user-provided configuration with default values and validates
- * the configuration to ensure all required properties have values.
- * 
- * @param {ExtendedFabConfig} config - User provided configuration
- * @returns {ExtendedFabConfig} Complete configuration with defaults applied
- * 
- * @category Components
- * @internal
- */
-export const createBaseConfig = (config: ExtendedFabConfig = {}): ExtendedFabConfig => 
-  createComponentConfig(defaultConfig, config, 'extended-fab') as ExtendedFabConfig;
-
-/**
- * Generates element configuration for the Extended FAB component
- * 
- * Transforms the user-friendly ExtendedFabConfig into the internal format required
- * by the withElement function. Creates all the appropriate CSS classes and attributes
- * needed to properly render the Extended FAB in the DOM.
- * 
- * @param {ExtendedFabConfig} config - Extended FAB configuration
- * @returns {Object} Element configuration object for withElement
- * 
- * @category Components
- * @internal
- */
-export const getElementConfig = (config: ExtendedFabConfig) => {
-  // Create the attributes object
-  const attrs: Record<string, any> = {
-    type: config.type || 'button',
-    'aria-label': config.ariaLabel || config.text || (config.icon ? 'action' : undefined)
-  };
-  
-  // Build class list
-  let classNames = [`${config.prefix}-extended-fab`];
-  
-  // Add variant class
-  if (config.variant) {
-    classNames.push(`${config.prefix}-extended-fab--${config.variant}`);
-  }
-  
-  // Add width class
-  if (config.width) {
-    classNames.push(`${config.prefix}-extended-fab--${config.width}`);
-  }
-  
-  // Add animation class if specified
-  if (config.animate) {
-    classNames.push(`${config.prefix}-extended-fab--animate-enter`);
-  }
-  
-  // Add position class if specified
-  if (config.position) {
-    classNames.push(`${config.prefix}-extended-fab--${config.position}`);
-  }
-  
-  // Add collapse-on-scroll class if specified
-  if (config.collapseOnScroll) {
-    classNames.push(`${config.prefix}-extended-fab--collapsible`);
-  }
-  
-  // Add user classes
-  if (config.class) {
-    classNames.push(config.class);
-  }
-  
-  // Only add disabled attribute if it's explicitly true
-  if (config.disabled === true) {
-    attrs.disabled = true;
-    classNames.push(`${config.prefix}-extended-fab--disabled`);
-  }
-  
-  return createElementConfig(config, {
-    tag: 'button',
-    attrs,
-    className: classNames,
-    forwardEvents: {
-      click: (component) => !component.element.disabled,
-      focus: true,
-      blur: true
-    },
-    interactive: true
-  });
-};
-
-/**
- * Creates API configuration for the Extended FAB component
- * 
- * Provides access to various component sub-features like disabled state,
- * lifecycle management, and text content.
- * 
- * @param {Object} comp - Component with disabled and lifecycle features
- * @returns {Object} API configuration object for withAPI
- * 
- * @category Components
- * @internal
- */
-export const getApiConfig = (comp: any) => ({
-  disabled: {
-    enable: () => comp.disabled.enable(),
-    disable: () => comp.disabled.disable()
-  },
-  lifecycle: {
-    destroy: () => comp.lifecycle.destroy()
-  },
-  className: comp.getClass('extended-fab'),
-  text: {
-    setText: (text: string) => comp.text.setText(text),
-    getText: () => comp.text.getText()
-  }
-});
-
-export default defaultConfig;

package/src/components/extended-fab/extended-fab.ts

@@ -1,153 +0,0 @@
-// src/components/extended-fab/extended-fab.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withIcon,
-  withVariant,
-  withRipple,
-  withDisabled,
-  withLifecycle,
-  withText
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { ExtendedFabConfig, ExtendedFabComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
-/**
- * Creates a new Extended Floating Action Button (Extended FAB) component
- * 
- * Extended FABs are a variant of the standard Floating Action Button that include
- * both an icon and text label. They're designed for primary actions that need
- * more description than just an icon, and can be positioned in various corners
- * of the interface.
- * 
- * Extended FABs follow Material Design 3 guidelines with support for:
- * - Multiple color variants (primary, secondary, tertiary, surface)
- * - Icon and text label configuration
- * - Fixed or fluid width
- * - Automatic collapse on scroll
- * - Various positioning options
- * 
- * @param {ExtendedFabConfig} config - Extended FAB configuration object
- * @returns {ExtendedFabComponent} Extended FAB component instance
- * 
- * @throws {Error} If the Extended FAB cannot be created due to invalid configuration
- * 
- * @category Components
- * 
- * @example
- * ```typescript
- * // Create a basic Extended FAB with icon and text
- * const extendedFab = createExtendedFab({
- *   icon: '<svg>...</svg>',
- *   text: 'Create',
- *   ariaLabel: 'Create new item'
- * });
- * 
- * // Create a tertiary Extended FAB with a custom position
- * const customExtendedFab = createExtendedFab({
- *   text: 'Add to cart',
- *   icon: '<svg>...</svg>',
- *   variant: 'tertiary',
- *   position: 'bottom-right',
- *   collapseOnScroll: true
- * });
- * 
- * // Add click handler
- * extendedFab.on('click', () => {
- *   console.log('Extended FAB clicked');
- * });
- * 
- * // Attach to DOM
- * document.body.appendChild(extendedFab.element);
- * 
- * // Programmatically collapse and expand
- * document.querySelector('#collapseBtn').addEventListener('click', () => {
- *   extendedFab.collapse();
- * });
- * 
- * document.querySelector('#expandBtn').addEventListener('click', () => {
- *   extendedFab.expand();
- * });
- * ```
- */
-const createExtendedFab = (config: ExtendedFabConfig = {}): ExtendedFabComponent => {
-  const fabConfig = createBaseConfig(config);
-
-  // Set up scroll collapse handler if needed
-  const setupScrollCollapse = (component: ExtendedFabComponent): void => {
-    if (fabConfig.collapseOnScroll) {
-      let lastScrollY = window.scrollY;
-      let ticking = false;
-      const scrollThreshold = 10; // Minimum scroll amount to trigger collapse/expand
-      
-      const handleScroll = () => {
-        if (!ticking) {
-          window.requestAnimationFrame(() => {
-            const currentScrollY = window.scrollY;
-            const scrollDelta = currentScrollY - lastScrollY;
-            
-            // If scrolling down beyond threshold, collapse
-            if (scrollDelta > scrollThreshold) {
-              component.collapse();
-            } 
-            // If scrolling up beyond threshold, expand
-            else if (scrollDelta < -scrollThreshold) {
-              component.expand();
-            }
-            // If at the top of the page, ensure expanded
-            if (currentScrollY <= 0) {
-              component.expand();
-            }
-            
-            lastScrollY = currentScrollY;
-            ticking = false;
-          });
-          
-          ticking = true;
-        }
-      };
-      
-      // Add scroll listener
-      window.addEventListener('scroll', handleScroll, { passive: true });
-      
-      // Ensure it's expanded by default
-      requestAnimationFrame(() => {
-        component.expand();
-      });
-      
-      // Clean up on destroy
-      const originalDestroy = component.destroy;
-      component.destroy = () => {
-        window.removeEventListener('scroll', handleScroll);
-        originalDestroy.call(component);
-      };
-    }
-  };
-
-  try {
-    const extendedFab = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(fabConfig)),
-      withVariant(fabConfig),
-      withIcon(fabConfig),
-      withText(fabConfig),
-      withDisabled(fabConfig),
-      withRipple(fabConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(fabConfig);
-    
-    // Set up scroll collapse after component is created
-    setupScrollCollapse(extendedFab);
-    
-    return extendedFab;
-  } catch (error) {
-    console.error('Extended FAB creation error:', error);
-    throw new Error(`Failed to create Extended FAB: ${(error as Error).message}`);
-  }
-};
-
-export default createExtendedFab;