mtrl 0.3.8 → 0.4.0

package/src/components/card/api.ts

@@ -1,222 +0,0 @@
-// src/components/card/api.ts
-import { BaseComponent, CardComponent, ApiOptions } from './types';
-
-/**
- * Enhances a card component with API methods.
- * This follows the higher-order function pattern to add public API methods
- * to the component, making them available to the end user.
- * 
- * @param {ApiOptions} options - API configuration options
- * @returns {Function} Higher-order function that adds API methods to component
- * @category Components
- */
-export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent): CardComponent => ({
-  ...component,
-  element: component.element,
-
-  /**
-   * Adds content to the card.
-   * This method appends content to the card component.
-   * 
-   * @param {HTMLElement} contentElement - The content element to add
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * const content = document.createElement('div');
-   * content.className = 'mtrl-card-content';
-   * content.textContent = 'Card content goes here';
-   * card.addContent(content);
-   * ```
-   */
-  addContent(contentElement: HTMLElement): CardComponent {
-    if (contentElement && contentElement.classList.contains(`${component.getClass('card')}-content`)) {
-      component.element.appendChild(contentElement);
-    }
-    return this;
-  },
-
-  /**
-   * Sets the card header
-   * 
-   * Places the header element in the card. When media elements exist,
-   * the header is placed after the last media element to ensure proper 
-   * visual hierarchy following Material Design guidelines.
-   * 
-   * @param {HTMLElement} headerElement - The header element to add
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * // Add a header after media
-   * card.setHeader(headerElement);
-   * ```
-   */
-  setHeader(headerElement: HTMLElement): CardComponent {
-    if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
-      // Remove existing header if present
-      const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`);
-      if (existingHeader) {
-        existingHeader.remove();
-      }
-
-      // Look for media element
-      const mediaElement = component.element.querySelector(`.${component.getClass('card')}-media`);
-      
-      if (mediaElement) {
-        // If media exists, insert after the LAST media element
-        // Find all media elements
-        const mediaElements = component.element.querySelectorAll(`.${component.getClass('card')}-media`);
-        const lastMedia = mediaElements[mediaElements.length - 1];
-        
-        // Insert after the last media element
-        if (lastMedia.nextSibling) {
-          component.element.insertBefore(headerElement, lastMedia.nextSibling);
-        } else {
-          component.element.appendChild(headerElement);
-        }
-      } else {
-        // No media, insert at the beginning
-        component.element.insertBefore(headerElement, component.element.firstChild);
-      }
-    }
-    return this;
-  },
-
-  /**
-   * Adds media to the card.
-   * Places media elements at the specified position in the card.
-   * 
-   * @param {HTMLElement} mediaElement - The media element to add
-   * @param {string} [position='top'] - Position to place media ('top', 'bottom')
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * // Creating media element
-   * const media = document.createElement('div');
-   * media.className = 'mtrl-card-media';
-   * 
-   * // Adding at the top (default)
-   * card.addMedia(media);
-   * 
-   * // Or adding at the bottom
-   * card.addMedia(media, 'bottom');
-   * ```
-   */
-  addMedia(mediaElement: HTMLElement, position: 'top' | 'bottom' = 'top'): CardComponent {
-    if (mediaElement && mediaElement.classList.contains(`${component.getClass('card')}-media`)) {
-      if (position === 'top') {
-        component.element.insertBefore(mediaElement, component.element.firstChild);
-      } else {
-        component.element.appendChild(mediaElement);
-      }
-    }
-    return this;
-  },
-
-  /**
-   * Sets the card actions section.
-   * Replaces any existing actions with the provided actions element.
-   * Actions typically contain buttons or other interactive controls,
-   * and are placed at the bottom of the card.
-   * 
-   * @param {HTMLElement} actionsElement - The actions element to add
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * // Create actions container
-   * const actions = document.createElement('div');
-   * actions.className = 'mtrl-card-actions';
-   * 
-   * // Add buttons to actions
-   * const button = document.createElement('button');
-   * button.textContent = 'Action';
-   * actions.appendChild(button);
-   * 
-   * // Set actions on card
-   * card.setActions(actions);
-   * ```
-   */
-  setActions(actionsElement: HTMLElement): CardComponent {
-    if (actionsElement && actionsElement.classList.contains(`${component.getClass('card')}-actions`)) {
-      // Remove existing actions if present
-      const existingActions = component.element.querySelector(`.${component.getClass('card')}-actions`);
-      if (existingActions) {
-        existingActions.remove();
-      }
-
-      // Add actions at the end
-      component.element.appendChild(actionsElement);
-    }
-    return this;
-  },
-
-  /**
-   * Makes the card draggable.
-   * Sets up native HTML5 drag and drop functionality and adds appropriate
-   * accessibility attributes. Automatically updates ARIA attributes during drag.
-   * 
-   * @param {Function} [dragStartCallback] - Callback for drag start event
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * // Basic draggable card
-   * card.makeDraggable();
-   * 
-   * // With custom drag start handler
-   * card.makeDraggable((event) => {
-   *   // Set custom data or perform other actions on drag start
-   *   event.dataTransfer.setData('text/plain', 'Card data');
-   * });
-   * ```
-   */
-  makeDraggable(dragStartCallback?: (event: DragEvent) => void): CardComponent {
-    component.element.setAttribute('draggable', 'true');
-    component.element.setAttribute('aria-grabbed', 'false');
-
-    if (typeof dragStartCallback === 'function') {
-      component.element.addEventListener('dragstart', (e: DragEvent) => {
-        component.element.setAttribute('aria-grabbed', 'true');
-        dragStartCallback(e);
-      });
-      
-      component.element.addEventListener('dragend', () => {
-        component.element.setAttribute('aria-grabbed', 'false');
-      });
-    }
-
-    return this;
-  },
-
-  /**
-   * Sets focus to the card.
-   * Useful for programmatic focus management, especially in keyboard navigation
-   * scenarios or after dynamic content changes.
-   * 
-   * @returns {CardComponent} The card instance for chaining
-   * @example
-   * ```typescript
-   * // Focus the card
-   * card.focus();
-   * 
-   * // Can be chained with other methods
-   * card.setHeader(headerElement).focus();
-   * ```
-   */
-  focus(): CardComponent {
-    component.element.focus();
-    return this;
-  },
-
-  /**
-   * Destroys the card component and removes event listeners.
-   * Call this method when the card is no longer needed to prevent memory leaks.
-   * 
-   * @example
-   * ```typescript
-   * // Clean up resources when done with the card
-   * card.destroy();
-   * ```
-   */
-  destroy(): void {
-    lifecycle.destroy();
-  }
-});

package/src/components/card/config.ts

@@ -1,304 +0,0 @@
-// src/components/card/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig
-} from '../../core/config/component-config';
-import { 
-  createCardHeader, 
-  createCardContent, 
-  createCardMedia, 
-  createCardActions 
-} from './content';
-import { CardComponent, CardSchema, ButtonConfig, BaseComponent } from './types';
-
-/**
- * Default configuration for the Card component.
- * These values are used when no configuration is provided.
- * 
- * @const {CardSchema}
- * @category Components
- */
-export const defaultConfig: CardSchema = {
-  variant: 'elevated',
-  interactive: false,
-  fullWidth: false,
-  clickable: false,
-  draggable: false
-};
-
-/**
- * Processes inline configuration options into standard config format.
- * Maps shorthand properties to their proper config counterparts for ease of use.
- * 
- * @param {CardSchema} config - Raw card configuration
- * @returns {CardSchema} Processed configuration
- * @category Components
- * @example
- * ```typescript
- * // Before processing, these are equivalent:
- * { header: { title: 'Example' } }
- * { headerConfig: { title: 'Example' } }
- * ```
- */
-export const processInlineConfig = (config: CardSchema): CardSchema => {
-  const processedConfig: CardSchema = { ...config };
-  
-  // Map inline properties to their *Config counterparts
-  if (config.header) {
-    processedConfig.headerConfig = config.header;
-  }
-  
-  if (config.content) {
-    processedConfig.contentConfig = config.content;
-  }
-  
-  if (config.media) {
-    processedConfig.mediaConfig = config.media;
-  }
-  
-  if (config.actions) {
-    processedConfig.actionsConfig = config.actions;
-  }
-  
-  return processedConfig;
-};
-
-/**
- * Applies inline configuration to a card component.
- * Adds configured elements to the card in the correct order following
- * Material Design layout guidelines. Handles media, header, content, and actions placement.
- * 
- * @param {CardComponent} card - Card component to configure
- * @param {CardSchema} config - Processed configuration
- * @category Components
- */
-export const applyInlineConfiguration = (card: CardComponent, config: CardSchema): void => {
-  // Add media (top position) if configured
-  if (config.mediaConfig && (!config.mediaConfig.position || config.mediaConfig.position === 'top')) {
-    const { position, ...mediaConfigWithoutPosition } = config.mediaConfig;
-    const mediaElement = createCardMedia(mediaConfigWithoutPosition);
-    card.addMedia(mediaElement, 'top');
-  }
-  
-  // Add header if configured
-  if (config.headerConfig) {
-    const headerElement = createCardHeader(config.headerConfig);
-    card.setHeader(headerElement);
-  }
-  
-  // Add content if configured
-  if (config.contentConfig) {
-    const contentElement = createCardContent(config.contentConfig);
-    card.addContent(contentElement);
-  }
-  
-  // Add media (bottom position) if configured
-  if (config.mediaConfig && config.mediaConfig.position === 'bottom') {
-    const { position, ...mediaConfigWithoutPosition } = config.mediaConfig;
-    const mediaElement = createCardMedia(mediaConfigWithoutPosition);
-    card.addMedia(mediaElement, 'bottom');
-  }
-  
-  // Add actions if configured
-  if (config.actionsConfig) {
-    const actionsElement = createCardActions(config.actionsConfig);
-    card.setActions(actionsElement);
-  }
-  
-  // Process buttons if provided (asynchronously)
-  if (Array.isArray(config.buttons) && config.buttons.length > 0) {
-    import('../button').then(({ default: createButton }) => {
-      // Create buttons from configuration
-      const actionButtons = config.buttons!.map(buttonConfig => 
-        createButton(buttonConfig).element
-      );
-      
-      // Create actions container
-      const actionsElement = createCardActions({
-        actions: actionButtons,
-        align: config.actionsConfig?.align || 'end'
-      });
-      
-      // Add the actions to the card
-      card.setActions(actionsElement);
-    }).catch(error => {
-      console.error('Error processing buttons:', error);
-    });
-  }
-};
-
-/**
- * Creates the base configuration for Card component.
- * Merges user-provided configuration with default values,
- * ensuring all required properties are set.
- * 
- * @param {CardSchema} config - User provided configuration
- * @returns {CardSchema} Complete configuration with defaults applied
- * @category Components
- * 
- */
-export const createBaseConfig = (config: CardSchema = {}): CardSchema => 
-  createComponentConfig(defaultConfig, config, 'card') as CardSchema;
-
-/**
- * Generates element configuration for the Card component.
- * Sets up DOM attributes, accessibility features, and event forwarding
- * based on the card's configuration.
- * 
- * @param {CardSchema} config - Card configuration
- * @returns {Object} Element configuration object for withElement
- * @category Components
- * 
- */
-export const getElementConfig = (config: CardSchema) => {
-  const isInteractive = config.interactive || config.clickable;
-  const defaultRole = isInteractive ? 'button' : 'region';
-  
-  // Prepare ARIA attributes
-  const ariaAttrs: Record<string, string> = {};
-  if (config.aria) {
-    // Add all ARIA attributes from config
-    Object.entries(config.aria).forEach(([key, value]) => {
-      if (value !== undefined) {
-        // Convert attribute name to aria-* format if not already
-        const attrName = key.startsWith('aria-') ? key : `aria-${key}`;
-        ariaAttrs[attrName] = value;
-      }
-    });
-  }
-  
-  // Set default ARIA role if not specified
-  if (!ariaAttrs['role'] && !config.aria?.role) {
-    ariaAttrs['role'] = defaultRole;
-  }
-  
-  // Add tabindex for interactive cards if not specified
-  if (isInteractive && !ariaAttrs['tabindex']) {
-    ariaAttrs['tabindex'] = '0';
-  }
-  
-  return createElementConfig(config, {
-    tag: 'div',
-    className: [
-      config.class,
-      config.fullWidth ? `${config.prefix}-card--full-width` : null,
-      isInteractive ? `${config.prefix}-card--interactive` : null
-    ],
-    attrs: ariaAttrs,
-    forwardEvents: {
-      click: (component: BaseComponent) => !!config.clickable,
-      mouseenter: (component: BaseComponent) => !!isInteractive,
-      mouseleave: (component: BaseComponent) => !!isInteractive,
-      keydown: (component: BaseComponent) => !!isInteractive,
-      focus: (component: BaseComponent) => !!isInteractive,
-      blur: (component: BaseComponent) => !!isInteractive
-    },
-    interactive: isInteractive
-  });
-};
-
-/**
- * Creates API configuration for the Card component.
- * Prepares the configuration needed for the card's public API methods.
- * 
- * @param {Object} comp - Component with lifecycle feature
- * @returns {Object} API configuration object
- * @category Components
- * 
- */
-export const getApiConfig = (comp: any) => ({
-  lifecycle: {
-    destroy: () => comp.lifecycle?.destroy?.()
-  }
-});
-
-/**
- * Card elevation levels in density-independent pixels (dp).
- * Following Material Design 3 elevation system guidelines.
- * 
- * @category Components
- */
-export const CARD_ELEVATION_LEVELS = {
-  LEVEL0: 0,
-  LEVEL1: 1,
-  LEVEL2: 2,
-  LEVEL4: 4
-};
-
-/**
- * Adds interactive behavior to card component.
- * Uses the mtrl elevation system for proper elevation levels according to Material Design 3
- * guidelines. Implements mouse, keyboard, and touch interactions with appropriate
- * visual feedback and accessibility support.
- * 
- * @param {BaseComponent} comp - Card component
- * @returns {BaseComponent} Enhanced card component
- * @category Components
- * 
- */
-export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
-  const config = comp.config;
-  const isInteractive = config.interactive || config.clickable;
-  
-  // Implement MD3 elevation changes for interactive cards
-  if (isInteractive) {
-    // Mouse interactions
-    comp.element.addEventListener('mouseenter', () => {
-      if (config.variant === 'elevated') {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL2));
-      }
-    });
-
-    comp.element.addEventListener('mouseleave', () => {
-      if (config.variant === 'elevated') {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
-      }
-    });
-    
-    // Keyboard interactions for accessibility
-    comp.element.addEventListener('keydown', (e: KeyboardEvent) => {
-      // Activate on Enter or Space
-      if ((e.key === 'Enter' || e.key === ' ') && config.clickable) {
-        e.preventDefault();
-        comp.element.click();
-      }
-    });
-    
-    // Focus state handling
-    comp.element.addEventListener('focus', () => {
-      comp.element.classList.add(`${comp.getClass('card')}--focused`);
-    });
-    
-    comp.element.addEventListener('blur', () => {
-      comp.element.classList.remove(`${comp.getClass('card')}--focused`);
-    });
-  }
-
-  // Set up draggable behavior
-  if (config.draggable) {
-    comp.element.setAttribute('draggable', 'true');
-    
-    comp.element.addEventListener('dragstart', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL4));
-      comp.element.classList.add(`${comp.getClass('card')}--dragging`);
-      comp.emit?.('dragstart', { event: e });
-      
-      // Ensure keyboard users can see what's being dragged
-      if (e.dataTransfer) {
-        // Set drag image and data
-        const cardTitle = comp.element.querySelector(`.${comp.getClass('card')}-header-title`)?.textContent || 'Card';
-        e.dataTransfer.setData('text/plain', cardTitle);
-      }
-    });
-
-    comp.element.addEventListener('dragend', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
-      comp.element.classList.remove(`${comp.getClass('card')}--dragging`);
-      comp.emit?.('dragend', { event: e });
-    });
-  }
-
-  return comp;
-};
-
-export default defaultConfig;