mtrl 0.3.8 → 0.4.0

package/src/components/top-app-bar/types.ts

@@ -1,140 +0,0 @@
-// src/components/top-app-bar/types.ts
-/**
- * @module components/top-app-bar
- * @description Type definitions for Top App Bar component
- */
-
-import { ElementComponent } from '../../core/compose';
-
-/**
- * Top App Bar types
- * @category Components
- */
-export type TopAppBarType = 'small' | 'medium' | 'large' | 'center';
-
-/**
- * Configuration options for Top App Bar component
- * @category Components
- */
-export interface TopAppBarConfig {
-  /**
-   * Element to use for the container
-   * @default 'header'
-   */
-  tag?: string;
-  
-  /**
-   * Type of top app bar to display
-   * @default 'small'
-   */
-  type?: TopAppBarType;
-  
-  /**
-   * Title text to display in the app bar
-   */
-  title?: string;
-  
-  /**
-   * Whether to enable scrolling behavior
-   * @default true
-   */
-  scrollable?: boolean;
-  
-  /**
-   * Whether to compress medium/large variants to small on scroll
-   * @default true
-   */
-  compressible?: boolean;
-  
-  /**
-   * Scroll threshold in pixels to trigger the scrolled state
-   * @default 4
-   */
-  scrollThreshold?: number;
-  
-  /**
-   * Additional CSS classes to apply
-   */
-  class?: string;
-
-  /**
-   * Optional callback when scrolling changes the bar appearance
-   */
-  onScroll?: (scrolled: boolean) => void;
-
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-
-  /**
-   * Component name for class generation
-   */
-  componentName?: string;
-}
-
-/**
- * Top App Bar component interface
- * @category Components
- */
-export interface TopAppBar extends ElementComponent {
-  /**
-   * Sets the title of the top app bar
-   * @param {string} title - Title text
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setTitle: (title: string) => TopAppBar;
-  
-  /**
-   * Gets the current title
-   * @returns {string} Current title text
-   */
-  getTitle: () => string;
-  
-  /**
-   * Adds a leading navigation icon or element
-   * @param {HTMLElement} element - Element to add to the leading section
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  addLeadingElement: (element: HTMLElement) => TopAppBar;
-  
-  /**
-   * Adds a trailing action icon or element
-   * @param {HTMLElement} element - Element to add to the trailing section
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  addTrailingElement: (element: HTMLElement) => TopAppBar;
-  
-  /**
-   * Changes the top app bar type
-   * @param {TopAppBarType} type - New app bar type
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setType: (type: TopAppBarType) => TopAppBar;
-  
-  /**
-   * Manually sets the scrolled state
-   * @param {boolean} scrolled - Whether to show the scrolled state
-   * @returns {TopAppBar} TopAppBar instance for chaining
-   */
-  setScrollState: (scrolled: boolean) => TopAppBar;
-  
-  /**
-   * Gets the headline element
-   * @returns {HTMLElement} Headline element
-   */
-  getHeadlineElement: () => HTMLElement;
-  
-  /**
-   * Gets the leading container element
-   * @returns {HTMLElement} Leading container element
-   */
-  getLeadingContainer: () => HTMLElement;
-  
-  /**
-   * Gets the trailing container element
-   * @returns {HTMLElement} Trailing container element
-   */
-  getTrailingContainer: () => HTMLElement;
-}

package/src/core/build/constants.ts

@@ -1,48 +0,0 @@
-// src/core/build/constants.ts
-
-/**
- * Animation timing functions for ripple effect
- */
-export enum RIPPLE_TIMING {
-  LINEAR = 'linear',
-  EASE = 'ease',
-  EASE_IN = 'ease-in',
-  EASE_OUT = 'ease-out',
-  EASE_IN_OUT = 'ease-in-out',
-  MATERIAL = 'cubic-bezier(0.4, 0.0, 0.2, 1)'
-}
-
-/**
- * Default configuration for ripple effect
- */
-export const RIPPLE_CONFIG = {
-  duration: 375,
-  timing: RIPPLE_TIMING.LINEAR,
-  opacity: ['1', '0.3'] as [string, string]
-};
-
-/**
- * Validation schema for ripple configuration
- */
-export const RIPPLE_SCHEMA = {
-  duration: {
-    type: 'number',
-    minimum: 0,
-    default: RIPPLE_CONFIG.duration
-  },
-  timing: {
-    type: 'string',
-    enum: Object.values(RIPPLE_TIMING),
-    default: RIPPLE_CONFIG.timing
-  },
-  opacity: {
-    type: 'array',
-    items: {
-      type: 'string',
-      pattern: '^[0-1](\\.\\d+)?$'
-    },
-    minItems: 2,
-    maxItems: 2,
-    default: RIPPLE_CONFIG.opacity
-  }
-};

package/src/core/build/icon.ts

@@ -1,137 +0,0 @@
-// src/core/build/icon.ts
-/**
- * @module core/build
- */
-
-/**
- * Options for creating an icon element
- */
-export interface IconElementOptions {
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Additional CSS class
-   */
-  class?: string;
-  
-  /**
-   * Icon size variant
-   */
-  size?: string;
-}
-
-/**
- * Configuration for icon manager
- */
-export interface IconConfig {
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component type
-   */
-  type?: string;
-  
-  /**
-   * Icon position ('start' or 'end')
-   */
-  position?: 'start' | 'end';
-  
-  /**
-   * Icon size
-   */
-  iconSize?: string;
-}
-
-/**
- * Icon manager interface
- */
-export interface IconManager {
-  /**
-   * Sets icon HTML content
-   * @param html - Icon HTML content
-   * @returns IconManager instance for chaining
-   */
-  setIcon: (html: string) => IconManager;
-  
-  /**
-   * Gets current icon HTML content
-   * @returns Current icon HTML
-   */
-  getIcon: () => string;
-  
-  /**
-   * Gets icon element
-   * @returns Icon element or null if not created
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Creates an icon DOM element
- * 
- * @param html - Icon HTML content
- * @param options - Icon options
- * @returns Icon element
- * @private
- */
-const createIconElement = (html: string, options: IconElementOptions = {}): HTMLElement => {
-  const PREFIX = options.prefix || 'mtrl';
-  const element = document.createElement('span');
-  element.className = `${PREFIX}-icon`;
-
-  if (options.class) {
-    element.classList.add(options.class);
-  }
-  if (options.size) {
-    element.classList.add(`${PREFIX}-icon--${options.size}`);
-  }
-
-  element.innerHTML = html;
-  return element;
-};
-
-/**
- * Creates an icon manager for a component
- * 
- * @param element - Parent element
- * @param config - Icon configuration
- * @returns Icon manager interface
- */
-export const createIcon = (element: HTMLElement, config: IconConfig = {}): IconManager => {
-  let iconElement: HTMLElement | null = null;
-  const PREFIX = config.prefix || 'mtrl';
-
-  return {
-    setIcon(html: string): IconManager {
-      if (!iconElement && html) {
-        iconElement = createIconElement(html, {
-          prefix: PREFIX,
-          class: `${PREFIX}-${config.type || 'component'}-icon`,
-          size: config.iconSize
-        });
-        if (config.position === 'end') {
-          element.appendChild(iconElement);
-        } else {
-          element.insertBefore(iconElement, element.firstChild);
-        }
-      } else if (iconElement && html) {
-        iconElement.innerHTML = html;
-      }
-      return this;
-    },
-
-    getIcon(): string {
-      return iconElement ? iconElement.innerHTML : '';
-    },
-
-    getElement(): HTMLElement | null {
-      return iconElement;
-    }
-  };
-};

package/src/core/build/ripple.ts

@@ -1,193 +0,0 @@
-// src/core/build/ripple.ts
-import { RIPPLE_CONFIG, RIPPLE_TIMING } from './constants';
-import { PREFIX } from '../config';
-
-// ... existing interfaces ...
-
-export const createRipple = (config: RippleConfig = {}): RippleController => {
-  const options = {
-    ...RIPPLE_CONFIG,
-    ...config,
-    opacity: config.opacity || RIPPLE_CONFIG.opacity
-  };
-
-  const getEndCoordinates = (bounds: DOMRect): EndCoordinates => {
-    const size = Math.max(bounds.width, bounds.height);
-    const top = bounds.height > bounds.width
-      ? -bounds.height / 2
-      : -(bounds.width - bounds.height / 2);
-
-    return {
-      size: `${size * 2}px`,
-      top: `${top}px`,
-      left: `${size / -2}px`
-    };
-  };
-
-  // Track active ripples for proper cleanup
-  const activeRipples = new WeakMap<HTMLElement, Set<HTMLElement>>();
-
-  const createRippleElement = (): HTMLDivElement => {
-    const ripple = document.createElement('div');
-    ripple.className = `${PREFIX}-ripple-wave`;
-    // No inline transition style - let CSS handle it
-    return ripple;
-  };
-
-  let documentListeners: DocumentListener[] = [];
-
-  const addDocumentListener = (event: string, handler: EventListener): void => {
-    if (typeof document.addEventListener === 'function') {
-      document.addEventListener(event, handler);
-      documentListeners.push({ event, handler });
-    }
-  };
-
-  const removeDocumentListener = (event: string, handler: EventListener): void => {
-    if (typeof document.removeEventListener === 'function') {
-      document.removeEventListener(event, handler);
-      documentListeners = documentListeners.filter(
-        listener => !(listener.event === event && listener.handler === handler)
-      );
-    }
-  };
-
-  const animate = (event: MouseEvent, container: HTMLElement): void => {
-    if (!container || !container.__rippleContainer) return;
-
-    const rippleContainer = container.__rippleContainer;
-    const bounds = container.getBoundingClientRect();
-    const ripple = createRippleElement();
-
-    // Calculate ripple size - should be larger than the container
-    // Use the maximum dimension of the container multiplied by 2
-    const size = Math.max(bounds.width, bounds.height) * 2;
-    
-    // Calculate position to center the ripple on the click point
-    const x = event.clientX - bounds.left - (size / 2);
-    const y = event.clientY - bounds.top - (size / 2);
-
-    // Set explicit size and position
-    Object.assign(ripple.style, {
-      width: `${size}px`,
-      height: `${size}px`,
-      left: `${x}px`,
-      top: `${y}px`
-    });
-
-    // Append to container
-    rippleContainer.appendChild(ripple);
-
-    // Force reflow
-    ripple.offsetHeight;
-
-    // Add active class to trigger animation
-    requestAnimationFrame(() => {
-      ripple.classList.add('active');
-    });
-
-    const cleanup = () => {
-      // Remove document listeners
-      removeDocumentListener('mouseup', cleanup);
-      removeDocumentListener('mouseleave', cleanup);
-
-      // Remove active class and add fade-out class
-      ripple.classList.remove('active');
-      ripple.classList.add('fade-out');
-      
-      // Remove after animation
-      setTimeout(() => {
-        if (ripple.parentNode) {
-          ripple.parentNode.removeChild(ripple);
-        }
-        // Remove from tracking
-        activeRipples.get(container)?.delete(ripple);
-      }, options.duration);
-    };
-
-    addDocumentListener('mouseup', cleanup);
-    addDocumentListener('mouseleave', cleanup);
-  };
-
-  return {
-    mount: (element: HTMLElement): void => {
-      if (!element) return;
-
-      // Ensure proper positioning context
-      const currentPosition = window.getComputedStyle(element).position;
-      if (currentPosition === 'static') {
-        element.style.position = 'relative';
-      }
-      
-      // Create ripple container if it doesn't exist
-      let rippleContainer = element.querySelector(`.${PREFIX}-ripple`);
-      if (!rippleContainer) {
-        rippleContainer = document.createElement('div');
-        rippleContainer.className = `${PREFIX}-ripple`;
-        element.appendChild(rippleContainer);
-      }
-
-      // Store reference to container
-      element.__rippleContainer = rippleContainer as HTMLElement;
-      
-      // Initialize ripple tracking
-      activeRipples.set(element, new Set());
-      
-      // Store the mousedown handler to be able to remove it later
-      const mousedownHandler = (e: MouseEvent) => animate(e, element);
-
-      // Store handler reference on the element
-      if (!element.__rippleHandlers) {
-        element.__rippleHandlers = [];
-      }
-      element.__rippleHandlers.push(mousedownHandler);
-
-      element.addEventListener('mousedown', mousedownHandler);
-    },
-
-    unmount: (element: HTMLElement): void => {
-      if (!element) return;
-
-      // Clear document event listeners
-      documentListeners.forEach(({ event, handler }) => {
-        removeDocumentListener(event, handler);
-      });
-      documentListeners = [];
-
-      // Remove event listeners
-      if (element.__rippleHandlers) {
-        element.__rippleHandlers.forEach(handler => {
-          element.removeEventListener('mousedown', handler);
-        });
-        element.__rippleHandlers = [];
-      }
-
-      // Remove all active ripples immediately
-      if (activeRipples.has(element)) {
-        const ripples = activeRipples.get(element);
-        if (ripples) {
-          ripples.forEach(ripple => {
-            if (ripple.parentNode) {
-              ripple.parentNode.removeChild(ripple);
-            }
-          });
-        }
-        activeRipples.delete(element);
-      }
-
-      // Remove ripple container
-      if (element.__rippleContainer && element.__rippleContainer.parentNode) {
-        element.__rippleContainer.parentNode.removeChild(element.__rippleContainer);
-        delete element.__rippleContainer;
-      }
-    }
-  };
-};
-
-// Extend the HTMLElement interface
-declare global {
-  interface HTMLElement {
-    __rippleHandlers?: Array<(e: MouseEvent) => void>;
-    __rippleContainer?: HTMLElement;
-  }
-}

package/src/core/build/text.ts

@@ -1,91 +0,0 @@
-// src/core/build/text.ts
-/**
- * @module core/build
- */
-
-/**
- * Configuration for text manager
- */
-export interface TextConfig {
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component type
-   */
-  type?: string;
-  
-  /**
-   * Element to insert before
-   */
-  beforeElement?: HTMLElement;
-}
-
-/**
- * Text manager interface
- */
-export interface TextManager {
-  /**
-   * Sets text content
-   * @param text - Text content to set
-   * @returns TextManager instance for chaining
-   */
-  setText: (text: string) => TextManager;
-  
-  /**
-   * Gets current text content
-   * @returns Current text
-   */
-  getText: () => string;
-  
-  /**
-   * Gets text element
-   * @returns Text element or null if not created
-   */
-  getElement: () => HTMLElement | null;
-}
-
-/**
- * Creates a text manager for a component
- * 
- * @param element - Parent element
- * @param config - Text configuration
- * @returns Text manager interface
- */
-export const createText = (element: HTMLElement, config: TextConfig = {}): TextManager => {
-  let textElement: HTMLElement | null = null;
-  const PREFIX = config.prefix || 'mtrl';
-
-  const createElement = (content: string): HTMLElement => {
-    const span = document.createElement('span');
-    span.className = `${PREFIX}-${config.type || 'component'}-text`;
-    span.textContent = content;
-    return span;
-  };
-
-  return {
-    setText(text: string): TextManager {
-      if (!textElement && text) {
-        textElement = createElement(text);
-        if (config.beforeElement) {
-          element.insertBefore(textElement, config.beforeElement);
-        } else {
-          element.appendChild(textElement);
-        }
-      } else if (textElement) {
-        textElement.textContent = text;
-      }
-      return this;
-    },
-
-    getText(): string {
-      return textElement ? textElement.textContent || '' : '';
-    },
-
-    getElement(): HTMLElement | null {
-      return textElement;
-    }
-  };
-};

package/src/core/collection/adapters/base.ts

@@ -1,62 +0,0 @@
-// src/core/collection/adapters/base.ts
-
-/**
- * Query operators for filtering data
- */
-export const OPERATORS = {
-  EQ: 'eq',
-  NE: 'ne',
-  GT: 'gt',
-  GTE: 'gte',
-  LT: 'lt',
-  LTE: 'lte',
-  IN: 'in',
-  NIN: 'nin',
-  CONTAINS: 'contains',
-  STARTS_WITH: 'startsWith',
-  ENDS_WITH: 'endsWith'
-} as const;
-
-/**
- * Type for query operators
- */
-export type Operator = keyof typeof OPERATORS;
-
-/**
- * Configuration for base adapter
- */
-export interface BaseAdapterConfig {
-  /**
-   * Error handler function
-   */
-  onError?: (error: Error, context?: any) => void;
-}
-
-/**
- * Base adapter interface
- */
-export interface BaseAdapter {
-  /**
-   * Handles errors in adapter operations
-   * @param error - The error that occurred
-   * @param context - Optional context information about the error
-   * @throws The original error after processing
-   */
-  handleError(error: Error, context?: any): never;
-}
-
-/**
- * Creates a base adapter with error handling
- * @param config - Adapter configuration
- * @returns Base adapter with error handling
- */
-export const createBaseAdapter = (config: BaseAdapterConfig = {}): BaseAdapter => {
-  const handleError = (error: Error, context?: any): never => {
-    config.onError?.(error, context);
-    throw error;
-  };
-
-  return {
-    handleError
-  };
-};