mtrl 0.3.8 → 0.4.0

package/src/core/layout/result.ts

@@ -1,84 +0,0 @@
-// src/core/layout/result.ts
-/**
- * @module core/layout
- * @description Layout result creation and management
- */
-
-import { LayoutResult } from './types';
-import { isComponent, flattenLayout } from './utils';
-
-/**
- * Creates a result object with the layout and utility functions
- * 
- * @param layout - The raw layout object
- * @returns Result object with layout and utility functions
- */
-export function createLayoutResult(layout: Record<string, any>): LayoutResult {
-  // Pre-compute flattened layout for better performance
-  const flattenedComponents = flattenLayout(layout);
-  
-  // Create the result object with layout correctly exposed
-  const result: LayoutResult = {
-    // Raw layout object
-    layout,
-    
-    // Root element reference for convenience
-    element: layout.element,
-    
-    // Flattened component map
-    component: flattenedComponents,
-
-    /**
-     * Gets a component by name
-     * 
-     * @param name - Component name
-     * @returns Component if found, null otherwise
-     */
-    get(name: string): any {
-      return layout[name] ?? null;
-    },
-    
-    /**
-     * Gets all components in a flattened map
-     * 
-     * @returns Object with all components
-     */
-    getAll(): Record<string, any> {
-      return flattenedComponents;
-    },
-    
-    /**
-     * Destroys the layout, cleaning up all components
-     */
-    destroy(): void {
-      // Handle root element
-      const root = layout.element;
-      if (root) {
-        // Component with destroy method
-        if (isComponent(root) && typeof root.destroy === 'function') {
-          root.destroy();
-        } 
-        // Component without destroy method
-        else if (isComponent(root) && root.element?.parentNode) {
-          root.element.parentNode.removeChild(root.element);
-        }
-        // Direct DOM element
-        else if (root instanceof HTMLElement && root.parentNode) {
-          root.parentNode.removeChild(root);
-        }
-      }
-      
-      // Clean up other components that have a destroy method
-      for (const key in layout) {
-        if (key === 'element') continue;
-        
-        const item = layout[key];
-        if (isComponent(item) && typeof item.destroy === 'function') {
-          item.destroy();
-        }
-      }
-    }
-  };
-  
-  return result;
-}

package/src/core/layout/types.ts

@@ -1,180 +0,0 @@
-// src/core/layout/types.ts
-/**
- * @module core/layout
- * @description Type definitions for layout creation system
- */
-
-/**
- * Layout configuration options
- */
-export interface LayoutConfig {
-  /** Base layout type */
-  type?: 'stack' | 'row' | 'grid' | string;
-  
-  /** Spacing between elements */
-  gap?: number | string;
-  
-  /** Additional CSS classes */
-  class?: string;
-  
-  /** Alignment of items along the cross axis */
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  
-  /** Alignment of items along the main axis */
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-  
-  /** Whether and how items should wrap */
-  wrap?: boolean | 'reverse' | 'nowrap';
-  
-  /** Whether row items should stack vertically on mobile */
-  mobileStack?: boolean;
-  
-  /** Whether row items should scroll horizontally on mobile */
-  mobileScroll?: boolean;
-  
-  /** Number of columns or automatic sizing method */
-  columns?: number | 'auto-fit' | 'auto-fill';
-  
-  /** Minimum item width for grid layouts */
-  minWidth?: string | number;
-  
-  /** Whether to use dense packing algorithm for grid */
-  dense?: boolean;
-  
-  /** Whether grid items should adjust height automatically */
-  autoHeight?: boolean;
-}
-
-/**
- * Configuration for individual layout items
- */
-export interface LayoutItemConfig {
-  /** Column width in a 12-column grid */
-  width?: number;
-  
-  /** Width on small screens */
-  sm?: number;
-  
-  /** Width on medium screens */
-  md?: number;
-  
-  /** Width on large screens */
-  lg?: number;
-  
-  /** Width on extra-large screens */
-  xl?: number;
-  
-  /** Number of grid columns to span */
-  span?: number;
-  
-  /** Number of grid rows to span */
-  rowSpan?: number;
-  
-  /** Display order */
-  order?: number | 'first' | 'last';
-  
-  /** Self-alignment within container */
-  align?: 'start' | 'center' | 'end' | 'stretch';
-  
-  /** Whether item should automatically size */
-  auto?: boolean;
-}
-
-/**
- * Interface for component-like objects
- */
-export interface ComponentLike {
-  /** DOM element reference */
-  element: HTMLElement;
-  
-  /** Optional method to clean up resources */
-  destroy?: () => void;
-  
-  /** Allow additional properties */
-  [key: string]: any;
-}
-
-/**
- * Extended options for element creation
- */
-export interface ElementOptions extends Record<string, any> {
-  /** Layout configuration for the element */
-  layout?: LayoutConfig;
-  
-  /** Layout item configuration */
-  layoutItem?: LayoutItemConfig;
-}
-
-/**
- * Definition for a single element in the layout
- */
-export interface ElementDefinition {
-  /** Optional name to reference the element */
-  name?: string;
-  
-  /** Creator function that produces an HTMLElement or ComponentLike */
-  creator?: (options?: Record<string, any>) => HTMLElement | ComponentLike;
-  
-  /** Options to pass to the creator function */
-  options?: ElementOptions;
-  
-  /** Child elements to create and attach */
-  children?: Record<string, ElementDefinition>;
-}
-
-/**
- * Schema for layout creation
- */
-export interface Schema {
-  /** Root element definition */
-  element?: ElementDefinition;
-  
-  /** Additional elements */
-  [key: string]: ElementDefinition | undefined;
-}
-
-/**
- * Options for layout creation
- */
-export interface LayoutOptions {
-  /** Default creator function to use if not specified in schema */
-  creator?: (options?: Record<string, any>) => HTMLElement | ComponentLike;
-  
-  /** Whether to apply CSS class prefix @default true */
-  prefix?: boolean;
-  
-  /** Additional options */
-  [key: string]: any;
-}
-
-/**
- * Result object returned after creating a layout
- */
-export interface LayoutResult {
-  /** The raw layout object with all components */
-  layout: Record<string, any>;
-  
-  /** Reference to the root element for convenience */
-  element: HTMLElement | ComponentLike;
-  
-  /** Flattened component map */
-  component: Record<string, any>;
-  
-  /**
-   * Gets a component by name
-   * @param name - Component name
-   * @returns Component if found, null otherwise
-   */
-  get(name: string): any;
-  
-  /**
-   * Gets all components in a flattened map
-   * @returns Object with all components
-   */
-  getAll(): Record<string, any>;
-  
-  /**
-   * Destroys the layout, cleaning up all components
-   */
-  destroy(): void;
-}

package/src/core/layout/utils.ts

@@ -1,144 +0,0 @@
-// src/core/layout/utils.ts
-/**
- * @module core/layout
- * @description Utility functions for layout creation
- */
-
-import { PREFIX } from '../config';
-import { ComponentLike } from './types';
-import { normalizeClasses as normalizeClassesUtil } from '../utils';
-
-/**
- * Checks if a value is a component object (has an element property)
- * 
- * @param value - Value to check
- * @returns True if the value is a component-like object
- */
-export function isComponent(value: any): value is ComponentLike {
-  return value && 
-         typeof value === 'object' && 
-         'element' in value;
-}
-
-/**
- * Creates a document fragment for faster DOM operations
- * 
- * @returns New DocumentFragment
- */
-export function createFragment(): DocumentFragment {
-  return document.createDocumentFragment();
-}
-
-/**
- * Normalizes class values into an array of strings
- */
-export function normalizeClasses(...classes: (string | string[])[]): string[] {
-  return normalizeClassesUtil(...classes);
-}
-
-// Constant for prefix with dash
-const PREFIX_WITH_DASH = `${PREFIX}-`;
-
-/**
- * Processes className options to add prefix if needed
- * 
- * @param options - Element options
- * @param skipPrefix - Whether to skip adding prefixes
- * @param useBEM - Whether to respect BEM naming conventions
- * @returns Updated options with prefixed classNames
- */
-export function processClassNames(
-  options: Record<string, any>, 
-  skipPrefix: boolean = false,
-  useBEM: boolean = false
-): Record<string, any> {
-  // Fast path - if no options or skipping prefix, return a new object
-  if (!options || skipPrefix) return { ...options };
-  
-  // Avoid unnecessary clone if no class properties exist
-  const hasClassProps = options.class || options.className || options.rawClass;
-  if (!hasClassProps) return { ...options };
-  
-  // Create clone only once
-  const processed = { ...options };
-  
-  // Unify class and className as aliases
-  if (processed.className) {
-    if (!processed.class) {
-      // Simple transfer if only className exists
-      processed.class = processed.className;
-    } else {
-      // Merge if both exist
-      const classNames = normalizeClasses([processed.class, processed.className]);
-      processed.class = classNames.join(' ');
-    }
-    // Always remove className after processing
-    delete processed.className;
-  }
-  
-  // Process prefixed classes
-  if (processed.class && !skipPrefix) {
-    // Handle string format
-    if (typeof processed.class === 'string') {
-      const classes = processed.class.split(/\s+/).filter(Boolean);
-      
-      if (useBEM) {
-        // Handle BEM notation with special prefixing rules
-        processed.class = classes.map(cls => {
-          if (!cls || cls.startsWith(PREFIX_WITH_DASH)) return cls;
-          
-          if (cls.includes('__')) {
-            const [block, element] = cls.split('__');
-            return `${PREFIX_WITH_DASH}${block}__${element}`;
-          } else if (cls.includes('--')) {
-            const [block, modifier] = cls.split('--');
-            return `${PREFIX_WITH_DASH}${block}--${modifier}`;
-          }
-          
-          return `${PREFIX_WITH_DASH}${cls}`;
-        }).join(' ');
-      } else {
-        // Standard prefix handling
-        processed.class = classes.map(cls => 
-          cls && !cls.startsWith(PREFIX_WITH_DASH) ? `${PREFIX_WITH_DASH}${cls}` : cls
-        ).filter(Boolean).join(' ');
-      }
-    } 
-    // Handle array format
-    else if (Array.isArray(processed.class)) {
-      processed.class = processed.class
-        .filter(Boolean)
-        .map(cls => typeof cls === 'string' && !cls.startsWith(PREFIX_WITH_DASH) ? 
-          `${PREFIX_WITH_DASH}${cls}` : cls)
-        .join(' ');
-    }
-  }
-  
-  return processed;
-}
-
-/**
- * Flattens a nested layout into a simple object with element and component references
- * 
- * @param layout - Layout object
- * @returns Flattened layout with all elements and components
- */
-export function flattenLayout(layout: Record<string, any>): Record<string, any> {
-  const flattened: Record<string, any> = {};
-  
-  // Fast path - return empty object for empty layout
-  if (!layout || typeof layout !== 'object') return flattened;
-  
-  for (const key in layout) {
-    const value = layout[key];
-    
-    // Only include components, elements, and non-functions
-    if (value && 
-        typeof value !== 'function' && 
-        (value instanceof HTMLElement || isComponent(value))) {
-      flattened[key] = value;
-    }
-  }
-  
-  return flattened;
-}

package/src/core/state/disabled.ts

@@ -1,81 +0,0 @@
-// src/core/state/disabled.ts
-
-/**
- * Disabled state manager interface
- */
-export interface DisabledState {
-  /**
-   * Enables the element
-   * @returns DisabledState instance for chaining
-   */
-  enable(): DisabledState;
-  
-  /**
-   * Disables the element
-   * @returns DisabledState instance for chaining
-   */
-  disable(): DisabledState;
-  
-  /**
-   * Toggles the disabled state
-   * @returns DisabledState instance for chaining
-   */
-  toggle(): DisabledState;
-  
-  /**
-   * Checks if the element is disabled
-   * @returns true if disabled
-   */
-  isDisabled(): boolean;
-}
-
-/**
- * Creates a controller for managing the disabled state of an element
- * 
- * @param element - The element to control
- * @returns Disabled state controller
- */
-export const createDisabled = (element: HTMLElement): DisabledState => {
-  return {
-    /**
-     * Enables the element
-     * @returns DisabledState instance for chaining
-     */
-    enable() {
-      (element as HTMLButtonElement | HTMLInputElement).disabled = false;
-      element.removeAttribute('disabled');
-      return this;
-    },
-
-    /**
-     * Disables the element
-     * @returns DisabledState instance for chaining
-     */
-    disable() {
-      (element as HTMLButtonElement | HTMLInputElement).disabled = true;
-      element.setAttribute('disabled', 'true');
-      return this;
-    },
-
-    /**
-     * Toggles the disabled state
-     * @returns DisabledState instance for chaining
-     */
-    toggle() {
-      if ((element as HTMLButtonElement | HTMLInputElement).disabled) {
-        this.enable();
-      } else {
-        this.disable();
-      }
-      return this;
-    },
-
-    /**
-     * Checks if the element is disabled
-     * @returns true if disabled
-     */
-    isDisabled() {
-      return (element as HTMLButtonElement | HTMLInputElement).disabled === true;
-    }
-  };
-};

package/src/core/state/emitter.ts

@@ -1,94 +0,0 @@
-// src/core/state/emitter.ts
-/**
- * @module core/state
- */
-
-/**
- * Type definition for event callback functions
- */
-export type EventCallback = (...args: any[]) => void;
-
-/**
- * Interface for the event emitter
- */
-export interface Emitter {
-  /**
-   * Subscribe to an event
-   * @param event - Event name
-   * @param callback - Event handler
-   * @returns Unsubscribe function
-   */
-  on(event: string, callback: EventCallback): () => void;
-  
-  /**
-   * Unsubscribe from an event
-   * @param event - Event name
-   * @param callback - Event handler to remove
-   */
-  off(event: string, callback: EventCallback): void;
-  
-  /**
-   * Emit an event
-   * @param event - Event name
-   * @param args - Event arguments
-   */
-  emit(event: string, ...args: any[]): void;
-  
-  /**
-   * Clear all event listeners
-   */
-  clear(): void;
-}
-
-/**
- * Creates an event emitter with subscription management
- * @returns Event emitter interface
- */
-export const createEmitter = (): Emitter => {
-  const events = new Map<string, EventCallback[]>();
-
-  return {
-    /**
-     * Subscribe to an event
-     * @param event - Event name
-     * @param callback - Event handler
-     * @returns Unsubscribe function
-     */
-    on: (event: string, callback: EventCallback): (() => void) => {
-      const callbacks = events.get(event) || [];
-      events.set(event, [...callbacks, callback]);
-
-      return () => {
-        const callbacks = events.get(event) || [];
-        events.set(event, callbacks.filter(cb => cb !== callback));
-      };
-    },
-
-    /**
-     * Unsubscribe from an event
-     * @param event - Event name 
-     * @param callback - Event handler to remove
-     */
-    off(event: string, callback: EventCallback): void {
-      const callbacks = events.get(event) || [];
-      events.set(event, callbacks.filter(cb => cb !== callback));
-    },
-
-    /**
-     * Emit an event
-     * @param event - Event name
-     * @param args - Event arguments
-     */
-    emit: (event: string, ...args: any[]): void => {
-      const callbacks = events.get(event) || [];
-      callbacks.forEach(cb => cb(...args));
-    },
-
-    /**
-     * Clear all event listeners
-     */
-    clear: (): void => {
-      events.clear();
-    }
-  };
-};

package/src/core/state/events.ts

@@ -1,88 +0,0 @@
-// src/core/state/events.ts
-
-/**
- * Event manager interface for handling component events
- */
-export interface EventManagerState {
-  /**
-   * Adds an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns EventManagerState instance for chaining
-   */
-  on: (event: string, handler: (...args: any[]) => void) => EventManagerState;
-  
-  /**
-   * Removes an event listener
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns EventManagerState instance for chaining
-   */
-  off: (event: string, handler: (...args: any[]) => void) => EventManagerState;
-  
-  /**
-   * Removes all event listeners and cleans up
-   */
-  destroy: () => void;
-  
-  /**
-   * Gets all active handlers
-   * @returns Map of event names to handlers
-   */
-  getHandlers: () => Map<(...args: any[]) => void, string>;
-}
-
-/**
- * Creates an event manager for a component
- * Simple event handling mechanism for components
- * 
- * @param element - Component's DOM element
- * @returns Event manager interface
- */
-export const createEventManager = (element: HTMLElement): EventManagerState => {
-  const handlers = new Map<(...args: any[]) => void, string>();
-
-  return {
-    /**
-     * Adds an event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns EventManagerState instance for chaining
-     */
-    on(event: string, handler: (...args: any[]) => void): EventManagerState {
-      element.addEventListener(event, handler as EventListener);
-      handlers.set(handler, event);
-      return this;
-    },
-
-    /**
-     * Removes an event listener
-     * @param event - Event name
-     * @param handler - Event handler
-     * @returns EventManagerState instance for chaining
-     */
-    off(event: string, handler: (...args: any[]) => void): EventManagerState {
-      element.removeEventListener(event, handler as EventListener);
-      handlers.delete(handler);
-      return this;
-    },
-
-    /**
-     * Removes all event listeners and cleans up
-     */
-    destroy(): void {
-      handlers.forEach((event, handler) => {
-        element.removeEventListener(event, handler as EventListener);
-      });
-      handlers.clear();
-    },
-
-    /**
-     * Gets all active handlers
-     * @returns Map of handlers to event names
-     */
-    getHandlers(): Map<(...args: any[]) => void, string> {
-      return new Map(handlers);
-    }
-  };
-};