mtrl 0.1.2 → 0.2.0

package/src/components/card/content.ts

@@ -0,0 +1,48 @@
+// src/components/card/content.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { CardContentConfig } from './types';
+
+/**
+ * Creates a card content component
+ * @param {CardContentConfig} config - Content configuration
+ * @returns {HTMLElement} Card content element
+ */
+export const createCardContent = (config: CardContentConfig = {}): HTMLElement => {
+  const baseConfig = {
+    ...config,
+    componentName: 'card-content',
+    prefix: PREFIX
+  };
+
+  try {
+    const content = pipe(
+      createBase,
+      withElement({
+        tag: 'div',
+        componentName: 'card-content',
+        className: [
+          config.class,
+          config.padding === false ? `${PREFIX}-card-content--no-padding` : null
+        ],
+        html: config.html,
+        text: config.text
+      })
+    )(baseConfig);
+
+    // Add children if provided
+    if (Array.isArray(config.children)) {
+      config.children.forEach(child => {
+        if (child instanceof HTMLElement) {
+          content.element.appendChild(child);
+        }
+      });
+    }
+
+    return content.element;
+  } catch (error) {
+    console.error('Card content creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card content: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};

package/src/components/card/features.ts

@@ -0,0 +1,228 @@
+// src/components/card/features.ts
+import { PREFIX } from '../../core/config';
+import { createElement } from '../../core/dom/create';
+import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+
+interface LoadingConfig {
+  initialState?: boolean;
+}
+
+interface ExpandableConfig {
+  initialExpanded?: boolean;
+  expandableContent?: HTMLElement;
+}
+
+interface SwipeableConfig {
+  onSwipeLeft?: (component: CardComponent) => void;
+  onSwipeRight?: (component: CardComponent) => void;
+  threshold?: number;
+}
+
+/**
+ * Higher-order function to add loading state to a card
+ * @param {LoadingConfig} config - Loading state configuration
+ * @returns {Function} Card component enhancer
+ */
+export const withLoading = (config: LoadingConfig = {}) => (component: BaseComponent): BaseComponent & { loading: LoadingFeature } => {
+  const initialState = config.initialState || false;
+  let loadingElement: HTMLElement | null = null;
+  let isLoading = initialState;
+
+  function setLoading(loading: boolean): void {
+    isLoading = loading;
+
+    if (loading && !loadingElement) {
+      // Create and add loading overlay
+      loadingElement = createElement({
+        tag: 'div',
+        className: `${PREFIX}-card-loading-overlay`,
+        container: component.element
+      });
+
+      // Add spinner
+      createElement({
+        tag: 'div',
+        className: `${PREFIX}-card-loading-spinner`,
+        container: loadingElement
+      });
+
+      component.element.classList.add(`${PREFIX}-card--state-loading`);
+    } else if (!loading && loadingElement) {
+      // Remove loading overlay
+      loadingElement.remove();
+      loadingElement = null;
+      component.element.classList.remove(`${PREFIX}-card--state-loading`);
+    }
+  }
+
+  if (initialState) {
+    setLoading(true);
+  }
+
+  return {
+    ...component,
+    loading: {
+      isLoading: () => isLoading,
+      setLoading
+    }
+  };
+};
+
+/**
+ * Higher-order function to add expandable behavior to a card
+ * @param {ExpandableConfig} config - Expandable configuration
+ * @returns {Function} Card component enhancer
+ */
+export const withExpandable = (config: ExpandableConfig = {}) => (component: BaseComponent): BaseComponent & { expandable: ExpandableFeature } => {
+  const initialExpanded = config.initialExpanded || false;
+  let isExpanded = initialExpanded;
+  const expandableContent = config.expandableContent;
+  let expandButton: HTMLButtonElement;
+
+  // Create expand/collapse button
+  expandButton = createElement({
+    tag: 'button',
+    className: `${PREFIX}-card-expand-button`,
+    attrs: {
+      'aria-expanded': isExpanded ? 'true' : 'false',
+      'aria-label': isExpanded ? 'Collapse' : 'Expand'
+    }
+  }) as HTMLButtonElement;
+
+  // Add to card as action if not already present
+  const actionsContainer = component.element.querySelector(`.${PREFIX}-card-actions`);
+  if (actionsContainer) {
+    actionsContainer.appendChild(expandButton);
+  } else {
+    // Create actions container if not present
+    const newActionsContainer = createElement({
+      tag: 'div',
+      className: `${PREFIX}-card-actions`,
+      container: component.element
+    });
+    newActionsContainer.appendChild(expandButton);
+  }
+
+  // Set initial state
+  if (expandableContent) {
+    expandableContent.classList.add(`${PREFIX}-card-expandable-content`);
+    if (!initialExpanded) {
+      expandableContent.style.display = 'none';
+    }
+    component.element.appendChild(expandableContent);
+  }
+
+  // Set expanded state
+  function setExpanded(expanded: boolean): void {
+    isExpanded = expanded;
+
+    if (expandableContent) {
+      expandableContent.style.display = expanded ? 'block' : 'none';
+    }
+
+    expandButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+    expandButton.setAttribute('aria-label', expanded ? 'Collapse' : 'Expand');
+
+    if (expanded) {
+      component.element.classList.add(`${PREFIX}-card--expanded`);
+    } else {
+      component.element.classList.remove(`${PREFIX}-card--expanded`);
+    }
+
+    component.emit?.('expandedChanged', { expanded });
+  }
+
+  // Toggle expanded state
+  function toggleExpanded(): void {
+    setExpanded(!isExpanded);
+  }
+
+  // Add click handler to toggle button
+  expandButton.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleExpanded();
+  });
+
+  return {
+    ...component,
+    expandable: {
+      isExpanded: () => isExpanded,
+      setExpanded,
+      toggleExpanded
+    }
+  };
+};
+
+/**
+ * Higher-order function to add swipeable behavior to a card
+ * @param {SwipeableConfig} config - Swipeable configuration
+ * @returns {Function} Card component enhancer
+ */
+export const withSwipeable = (config: SwipeableConfig = {}) => (component: BaseComponent): BaseComponent & { swipeable: SwipeableFeature } => {
+  const threshold = config.threshold || 100;
+  let startX = 0;
+  let currentX = 0;
+
+  function handleTouchStart(e: TouchEvent): void {
+    startX = e.touches[0].clientX;
+    component.element.style.transition = 'none';
+  }
+
+  function handleTouchMove(e: TouchEvent): void {
+    if (!startX) return;
+
+    currentX = e.touches[0].clientX;
+    const diffX = currentX - startX;
+
+    // Apply transform to move card
+    component.element.style.transform = `translateX(${diffX}px)`;
+  }
+
+  function handleTouchEnd(): void {
+    if (!startX) return;
+
+    component.element.style.transition = 'transform 0.3s ease';
+    const diffX = currentX - startX;
+
+    if (Math.abs(diffX) >= threshold) {
+      // Swipe threshold reached
+      if (diffX > 0 && config.onSwipeRight) {
+        // Swipe right
+        component.element.style.transform = 'translateX(100%)';
+        config.onSwipeRight(component as CardComponent);
+      } else if (diffX < 0 && config.onSwipeLeft) {
+        // Swipe left
+        component.element.style.transform = 'translateX(-100%)';
+        config.onSwipeLeft(component as CardComponent);
+      } else {
+        // Reset if no handler
+        component.element.style.transform = 'translateX(0)';
+      }
+    } else {
+      // Reset if below threshold
+      component.element.style.transform = 'translateX(0)';
+    }
+
+    startX = 0;
+    currentX = 0;
+  }
+
+  // Add event listeners
+  component.element.addEventListener('touchstart', handleTouchStart as EventListener);
+  component.element.addEventListener('touchmove', handleTouchMove as EventListener);
+  component.element.addEventListener('touchend', handleTouchEnd);
+
+  // Add swipeable class
+  component.element.classList.add(`${PREFIX}-card--swipeable`);
+
+  // Return enhanced component
+  return {
+    ...component,
+    swipeable: {
+      reset: () => {
+        component.element.style.transition = 'transform 0.3s ease';
+        component.element.style.transform = 'translateX(0)';
+      }
+    }
+  };
+};

package/src/components/card/header.ts

@@ -0,0 +1,88 @@
+// src/components/card/header.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { createElement } from '../../core/dom/create';
+import { CardHeaderConfig } from './types';
+
+/**
+ * Creates a card header component
+ * @param {CardHeaderConfig} config - Header configuration
+ * @returns {HTMLElement} Card header element
+ */
+export const createCardHeader = (config: CardHeaderConfig = {}): HTMLElement => {
+  const baseConfig = {
+    ...config,
+    componentName: 'card-header',
+    prefix: PREFIX
+  };
+
+  try {
+    const header = pipe(
+      createBase,
+      withElement({
+        tag: 'div',
+        componentName: 'card-header',
+        className: config.class
+      })
+    )(baseConfig);
+
+    // Create text container
+    const textContainer = createElement({
+      tag: 'div',
+      className: `${PREFIX}-card-header-text`,
+      container: header.element
+    });
+
+    // Add title if provided
+    if (config.title) {
+      createElement({
+        tag: 'h3',
+        className: `${PREFIX}-card-header-title`,
+        text: config.title,
+        container: textContainer
+      });
+    }
+
+    // Add subtitle if provided
+    if (config.subtitle) {
+      createElement({
+        tag: 'h4',
+        className: `${PREFIX}-card-header-subtitle`,
+        text: config.subtitle,
+        container: textContainer
+      });
+    }
+
+    // Add avatar if provided
+    if (config.avatar) {
+      const avatarElement = typeof config.avatar === 'string'
+        ? createElement({
+          tag: 'div',
+          className: `${PREFIX}-card-header-avatar`,
+          html: config.avatar
+        })
+        : config.avatar;
+
+      header.element.insertBefore(avatarElement, header.element.firstChild);
+    }
+
+    // Add action if provided
+    if (config.action) {
+      const actionElement = typeof config.action === 'string'
+        ? createElement({
+          tag: 'div',
+          className: `${PREFIX}-card-header-action`,
+          html: config.action
+        })
+        : config.action;
+
+      header.element.appendChild(actionElement);
+    }
+
+    return header.element;
+  } catch (error) {
+    console.error('Card header creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card header: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};

package/src/components/card/index.ts

@@ -0,0 +1,19 @@
+// src/components/card/index.ts
+export { default } from './card'
+export { createCardContent } from './content'
+export { createCardHeader } from './header'
+export { createCardActions } from './actions'
+export { createCardMedia } from './media'
+export {
+  CardVariant,
+  CardElevation,
+  CardSchema,
+  CardHeaderConfig,
+  CardContentConfig,
+  CardActionsConfig,
+  CardMediaConfig,
+  CardComponent
+} from './types'
+
+// Export constants for backward compatibility
+export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_SCHEMA } from './constants'

package/src/components/card/media.ts

@@ -0,0 +1,52 @@
+// src/components/card/media.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { CardMediaConfig } from './types';
+
+/**
+ * Creates a card media component
+ * @param {CardMediaConfig} config - Media configuration
+ * @returns {HTMLElement} Card media element
+ */
+export const createCardMedia = (config: CardMediaConfig = {}): HTMLElement => {
+  const baseConfig = {
+    ...config,
+    componentName: 'card-media',
+    prefix: PREFIX
+  };
+
+  try {
+    const media = pipe(
+      createBase,
+      withElement({
+        tag: 'div',
+        componentName: 'card-media',
+        className: [
+          config.class,
+          config.aspectRatio ? `${PREFIX}-card-media--${config.aspectRatio.replace(':', '-')}` : null,
+          config.contain ? `${PREFIX}-card-media--contain` : null
+        ]
+      })
+    )(baseConfig);
+
+    // If custom element is provided, use it
+    if (config.element instanceof HTMLElement) {
+      media.element.appendChild(config.element);
+    }
+
+    // Otherwise create an image if src is provided
+    else if (config.src) {
+      const img = document.createElement('img');
+      img.src = config.src;
+      if (config.alt) img.alt = config.alt;
+      img.className = `${PREFIX}-card-media-img`;
+      media.element.appendChild(img);
+    }
+
+    return media.element;
+  } catch (error) {
+    console.error('Card media creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card media: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};

package/src/components/card/types.ts

@@ -0,0 +1,174 @@
+// src/components/card/types.ts
+
+/**
+ * Card variant types following Material Design 3
+ */
+export enum CardVariant {
+  ELEVATED = 'elevated',
+  FILLED = 'filled',
+  OUTLINED = 'outlined'
+}
+
+/**
+ * Card elevation levels
+ */
+export enum CardElevation {
+  RESTING = 1,
+  HOVERED = 2,
+  DRAGGED = 4
+}
+
+/**
+ * Interface for card configuration
+ */
+export interface CardSchema {
+  variant?: CardVariant;
+  interactive?: boolean;
+  fullWidth?: boolean;
+  clickable?: boolean;
+  draggable?: boolean;
+  class?: string;
+  headerConfig?: CardHeaderConfig;
+  contentConfig?: CardContentConfig;
+  actionsConfig?: CardActionsConfig;
+  mediaConfig?: CardMediaConfig;
+}
+
+/**
+ * Interface for card header configuration
+ */
+export interface CardHeaderConfig {
+  title?: string;
+  subtitle?: string;
+  avatar?: HTMLElement | string;
+  action?: HTMLElement | string;
+  class?: string;
+}
+
+/**
+ * Interface for card content configuration
+ */
+export interface CardContentConfig {
+  text?: string;
+  html?: string;
+  children?: HTMLElement[];
+  padding?: boolean;
+  class?: string;
+}
+
+/**
+ * Interface for card actions configuration
+ */
+export interface CardActionsConfig {
+  actions?: HTMLElement[];
+  fullBleed?: boolean;
+  vertical?: boolean;
+  align?: 'start' | 'center' | 'end' | 'space-between';
+  class?: string;
+}
+
+/**
+ * Interface for card media configuration
+ */
+export interface CardMediaConfig {
+  src?: string;
+  alt?: string;
+  element?: HTMLElement;
+  aspectRatio?: '16:9' | '4:3' | '1:1' | string;
+  contain?: boolean;
+  class?: string;
+}
+
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+  element: HTMLElement;
+  getClass: (name?: string) => string;
+  getModifierClass: (base: string, modifier: string) => string;
+  getElementClass: (base: string, element: string) => string;
+  addClass: (...classes: string[]) => BaseComponent;
+  emit?: (event: string, data?: any) => void;
+  config: CardComponentConfig;
+  touchState?: TouchState;
+  updateTouchState?: (event: TouchEvent | MouseEvent, status: 'start' | 'end') => void;
+  lifecycle?: ComponentLifecycle;
+}
+
+/**
+ * Touch state interface
+ */
+export interface TouchState {
+  startTime: number;
+  startPosition: { x: number; y: number };
+  isTouching: boolean;
+  activeTarget: EventTarget | null;
+}
+
+/**
+ * Component lifecycle interface
+ */
+export interface ComponentLifecycle {
+  mount?: () => void;
+  update?: () => void;
+  destroy: () => void;
+}
+
+/**
+ * Card component configuration
+ */
+export interface CardComponentConfig extends CardSchema {
+  componentName: string;
+  prefix: string;
+}
+
+/**
+ * Card component interface
+ */
+export interface CardComponent extends BaseComponent {
+  // Card-specific methods
+  addContent: (contentElement: HTMLElement) => CardComponent;
+  setHeader: (headerElement: HTMLElement) => CardComponent;
+  addMedia: (mediaElement: HTMLElement, position?: 'top' | 'bottom') => CardComponent;
+  setActions: (actionsElement: HTMLElement) => CardComponent;
+  makeDraggable: (dragStartCallback?: (event: DragEvent) => void) => CardComponent;
+  destroy: () => void;
+  
+  // Optional feature interfaces
+  loading?: LoadingFeature;
+  expandable?: ExpandableFeature;
+  swipeable?: SwipeableFeature;
+}
+
+/**
+ * Loading feature interface
+ */
+export interface LoadingFeature {
+  isLoading: () => boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+/**
+ * Expandable feature interface
+ */
+export interface ExpandableFeature {
+  isExpanded: () => boolean;
+  setExpanded: (expanded: boolean) => void;
+  toggleExpanded: () => void;
+}
+
+/**
+ * Swipeable feature interface
+ */
+export interface SwipeableFeature {
+  reset: () => void;
+}
+
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+  lifecycle: {
+    destroy: () => void;
+  };
+}

package/src/components/checkbox/api.ts

@@ -0,0 +1,82 @@
+// src/components/checkbox/api.ts
+import { BaseComponent, CheckboxComponent, ApiOptions } from './types';
+
+/**
+ * Enhances checkbox component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export const withAPI = ({ disabled, lifecycle, checkable }: ApiOptions) => 
+  (component: BaseComponent): CheckboxComponent => ({
+    ...component as any,
+    element: component.element,
+    input: component.input as HTMLInputElement,
+
+    // Value management
+    getValue: component.getValue || (() => ''),
+    setValue(value: string): CheckboxComponent {
+      component.setValue?.(value);
+      return this;
+    },
+
+    // State management
+    check(): CheckboxComponent {
+      checkable.check();
+      return this;
+    },
+    
+    uncheck(): CheckboxComponent {
+      checkable.uncheck();
+      return this;
+    },
+    
+    toggle(): CheckboxComponent {
+      checkable.toggle();
+      return this;
+    },
+    
+    isChecked(): boolean {
+      return checkable.isChecked();
+    },
+    
+    setIndeterminate(state: boolean): CheckboxComponent {
+      component.setIndeterminate?.(state);
+      return this;
+    },
+
+    // Label management
+    setLabel(text: string): CheckboxComponent {
+      component.text?.setText(text);
+      return this;
+    },
+    
+    getLabel(): string {
+      return component.text?.getText() || '';
+    },
+
+    // Event handling
+    on(event: string, handler: Function): CheckboxComponent {
+      component.on?.(event, handler);
+      return this;
+    },
+    
+    off(event: string, handler: Function): CheckboxComponent {
+      component.off?.(event, handler);
+      return this;
+    },
+
+    // State management
+    enable(): CheckboxComponent {
+      disabled.enable();
+      return this;
+    },
+    
+    disable(): CheckboxComponent {
+      disabled.disable();
+      return this;
+    },
+    
+    destroy(): void {
+      lifecycle.destroy();
+    }
+  });