mtrl 0.3.8 → 0.4.0

package/src/core/compose/features/textlabel.ts

@@ -1,113 +0,0 @@
-// src/core/compose/features/textlabel.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for text label feature
- */
-export interface TextLabelConfig {
-  /**
-   * Label text
-   */
-  label?: string;
-  
-  /**
-   * Label position ('start' or 'end')
-   */
-  labelPosition?: 'start' | 'end';
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name for class generation
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Label manager interface
- */
-export interface LabelManager {
-  /**
-   * Sets the label text
-   * @param text - Text to set
-   * @returns LabelManager instance for chaining
-   */
-  setText: (text: string) => LabelManager;
-  
-  /**
-   * Gets the current label text
-   * @returns Current text
-   */
-  getText: () => string;
-  
-  /**
-   * Gets the label element
-   * @returns Label element
-   */
-  getElement: () => HTMLElement;
-}
-
-/**
- * Component with label capabilities
- */
-export interface LabelComponent extends BaseComponent {
-  label: LabelManager;
-}
-
-/**
- * Adds a text label to a component
- * 
- * @param config - Configuration object containing label information
- * @returns Function that enhances a component with a label
- */
-export const withTextLabel = <T extends TextLabelConfig>(config: T = {} as T) => 
-  <C extends ElementComponent>(component: C): C & LabelComponent => {
-    if (!config.label) return component as C & LabelComponent;
-
-    const labelElement = document.createElement('label');
-    labelElement.className = `${config.prefix}-${config.componentName}-label`;
-    labelElement.textContent = config.label;
-
-    // Position the label based on labelPosition (default to 'start')
-    const position = config.labelPosition || 'start';
-    
-    if (position === 'start') {
-      // Insert label as the first child
-      if (component.element.firstChild) {
-        component.element.insertBefore(labelElement, component.element.firstChild);
-      } else {
-        component.element.appendChild(labelElement);
-      }
-    } else {
-      // Insert label at the end (default behavior)
-      component.element.appendChild(labelElement);
-    }
-
-    if (position && component.componentName !== 'slider') {
-      component.element.classList.add(`${config.prefix}-${config.componentName}--label-${position}`);
-    }
-
-    const label: LabelManager = {
-      setText(text: string) {
-        labelElement.textContent = text;
-        return this;
-      },
-      getText() {
-        return labelElement.textContent || '';
-      },
-      getElement() {
-        return labelElement;
-      }
-    };
-
-    return {
-      ...component,
-      label
-    };
-  };

package/src/core/compose/features/track.ts

@@ -1,84 +0,0 @@
-// src/core/compose/features/track.ts
-/**
- * @module core/compose/features
- */
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for track feature
- */
-export interface TrackConfig {
-  /**
-   * CSS class prefix
-   */
-  prefix: string;
-  
-  /**
-   * Component name for class generation
-   */
-  componentName: string;
-  
-  /**
-   * Custom icon HTML or 'none'
-   */
-  icon?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Component with track and thumb elements
- */
-export interface TrackComponent extends BaseComponent {
-  /**
-   * Track element
-   */
-  track: HTMLElement;
-  
-  /**
-   * Thumb element
-   */
-  thumb: HTMLElement;
-}
-
-/**
- * Default checkmark icon SVG
- * @private
- */
-const DEFAULT_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <polyline points="20 6 9 17 4 12"></polyline>
-</svg>`;
-
-/**
- * Adds track and thumb elements to a component
- * 
- * @param config - Track configuration
- * @returns Function that enhances a component with track and thumb elements
- */
-export const withTrack = <T extends TrackConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & TrackComponent => {
-    const track = document.createElement('span');
-    track.className = `${config.prefix}-${config.componentName}-track`;
-
-    const thumb = document.createElement('span');
-    thumb.className = `${config.prefix}-${config.componentName}-thumb`;
-    track.appendChild(thumb);
-
-    // Add icon inside thumb if provided or use default
-    if (config.icon !== 'none') {
-      const icon = document.createElement('span');
-      icon.className = `${config.prefix}-${config.componentName}-thumb-icon`;
-      icon.innerHTML = config.icon || DEFAULT_ICON;
-      thumb.appendChild(icon);
-    }
-
-    component.element.appendChild(track);
-
-    return {
-      ...component,
-      track,
-      thumb
-    };
-  };

package/src/core/compose/features/variant.ts

@@ -1,29 +0,0 @@
-// src/core/compose/features/variant.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for variant feature
- */
-export interface VariantConfig {
-  variant?: string;
-  prefix?: string;
-  componentName?: string;
-  [key: string]: any;
-}
-
-/**
- * Adds a variant class to a component
- * 
- * @param config - Configuration object containing variant information
- * @returns Function that enhances a component with the variant class
- */
-export const withVariant = <T extends VariantConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C => {
-    if (config.variant && component.element) {
-      // Use config.componentName since we know it's there
-      const className = `${config.prefix}-${config.componentName}--${config.variant}`;
-      component.element.classList.add(className);
-    }
-    return component;
-  };

package/src/core/compose/features/withEvents.ts

@@ -1,137 +0,0 @@
-// src/core/compose/features/withEvents.ts
-
-import { createEventManager } from '../../state/events';
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Event manager interface
- */
-export interface EnhancedEventManager {
-  /**
-   * Add an event listener
-   */
-  on: (event: string, handler: Function) => EnhancedEventManager;
-  
-  /**
-   * Remove an event listener
-   */
-  off: (event: string, handler: Function) => EnhancedEventManager;
-  
-  /**
-   * Add multiple event listeners at once
-   */
-  addListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
-  
-  /**
-   * Remove multiple event listeners at once
-   */
-  removeListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
-  
-  /**
-   * One-time event handler
-   */
-  once: (event: string, handler: Function) => EnhancedEventManager;
-  
-  /**
-   * Clean up all event listeners
-   */
-  destroy: () => void;
-}
-
-/**
- * Component with enhanced event capabilities
- */
-export interface EnhancedEventComponent extends BaseComponent {
-  events: EnhancedEventManager;
-  on: (event: string, handler: Function) => EnhancedEventComponent;
-  off: (event: string, handler: Function) => EnhancedEventComponent;
-}
-
-/**
- * Adds enhanced event handling capabilities to a component
- * 
- * @param target - Optional custom event target
- * @returns Function that enhances a component with event capabilities
- */
-export const withEvents = (target?: HTMLElement) => 
-  <C extends ElementComponent>(component: C): C & EnhancedEventComponent => {
-    const events = createEventManager(target || component.element);
-
-    // Enhanced event methods
-    const enhancedEvents: EnhancedEventManager = {
-      /**
-       * Add multiple event listeners at once
-       * @param listeners - Map of event types to handlers
-       */
-      addListeners(listeners: Record<string, Function>) {
-        Object.entries(listeners).forEach(([event, handler]) => {
-          events.on(event, handler as any);
-        });
-        return this;
-      },
-
-      /**
-       * Remove multiple event listeners at once
-       * @param listeners - Map of event types to handlers
-       */
-      removeListeners(listeners: Record<string, Function>) {
-        Object.entries(listeners).forEach(([event, handler]) => {
-          events.off(event, handler as any);
-        });
-        return this;
-      },
-
-      /**
-       * One-time event handler
-       * @param event - Event name
-       * @param handler - Event handler
-       */
-      once(event: string, handler: Function) {
-        const wrappedHandler = (e: Event) => {
-          handler(e);
-          events.off(event, wrappedHandler as any);
-        };
-        events.on(event, wrappedHandler as any);
-        return this;
-      },
-
-      /**
-       * Add an event listener
-       */
-      on(event: string, handler: Function) {
-        events.on(event, handler as any);
-        return this;
-      },
-
-      /**
-       * Remove an event listener
-       */
-      off(event: string, handler: Function) {
-        events.off(event, handler as any);
-        return this;
-      },
-
-      /**
-       * Clean up all event listeners
-       */
-      destroy() {
-        events.destroy();
-      }
-    };
-
-    // Add lifecycle integration
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        events.destroy();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      events: enhancedEvents,
-      on: enhancedEvents.on.bind(enhancedEvents),
-      off: enhancedEvents.off.bind(enhancedEvents)
-    };
-  };

package/src/core/compose/index.ts

@@ -1,54 +0,0 @@
-// src/core/compose/index.ts
-/**
- * @module core/compose
- * @description Core composition utilities for creating and combining components
- */
-
-export { pipe, compose, transform } from './pipe';
-export { createComponent } from './base';
-export { createBase, withElement } from './component';
-export {
-  withEvents,
-  withIcon,
-  withSize,
-  withPosition,
-  withText,
-  withVariant,
-  withDisabled,
-  withLifecycle,
-  withRipple,
-  withInput,
-  withCheckable,
-  withStyle,
-  withTextInput,
-  withTextLabel,
-  withTrack,
-  withEnhancedEvents
-} from './features';
-
-// Component feature interfaces
-export type { Component } from './base';
-export type { 
-  BaseComponent, 
-  ElementComponent, 
-  TouchState,
-  WithElementOptions
-} from './component';
-
-export type {
-  EventComponent,
-  TextComponent,
-  IconComponent,
-  LifecycleComponent,
-  Lifecycle,
-  DisabledComponent,
-  DisabledManager,
-  RippleComponent,
-  InputComponent,
-  CheckableComponent,
-  CheckableManager,
-  TextInputComponent,
-  LabelComponent,
-  TrackComponent,
-  EnhancedEventComponent
-} from './features';

package/src/core/composition/features/dom.ts

@@ -1,45 +0,0 @@
-// src/core/composition/features/dom.ts
-import createLayout from '../../layout';
-
-/**
- * Creates DOM elements from component schema using the core createLayout utility
- * This is a key feature that bridges the gap between declarative schema and actual DOM
- * 
- * @returns Component enhancer that creates DOM structure from schema
- * 
- * @example
- * ```ts
- * // Materialize component schema into DOM
- * const component = pipe(
- *   createBase,
- *   withLayout(config),
- *   withIcon(config),
- *   withLabel(config),
- *   withDom()
- * )(config);
- * ```
- */
-export const withDom = () => component => {
-  // Return unmodified component if no schema
-  if (!component.schema) {
-    return component;
-  }
-  
-  try {
-    // Use the createLayout function to build the DOM from schema
-    const layout = createLayout(component.schema);
-    
-    // Use the layout's utility functions to get components
-    const components = layout.getAll();
-
-    // Return enhanced component with DOM layout
-    return {
-      ...component,
-      element: layout.element, // Root element
-      components               // All component elements
-    };
-  } catch (error) {
-    console.error('Failed to create DOM structure:', error);
-    throw new Error(`Failed to create component DOM: ${error.message}`);
-  }
-};

package/src/core/composition/features/icon.ts

@@ -1,131 +0,0 @@
-// src/core/composition/features/icon.ts
-import { createElement } from '../../dom/create';
-
-/**
- * Configuration for icon feature
- */
-export interface IconConfig {
-  /**
-   * Icon HTML content
-   */
-  icon?: string;
-  
-  /**
-   * Position of the icon ('start' or 'end')
-   */
-  iconPosition?: 'start' | 'end';
-  
-  /**
-   * Size variant for the icon
-   */
-  iconSize?: string;
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name for class generation
-   */
-  componentName?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Enhances component schema with an icon element
- * Unlike the traditional withIcon, this modifies the schema
- * without creating actual DOM elements.
- * 
- * @param config Configuration containing icon information
- * @returns Component enhancer that adds icon to schema
- * 
- * @example
- * ```ts
- * // Add icon to a component schema
- * const component = pipe(
- *   createBase,
- *   withLayout(config),
- *   withIcon(config)
- * )(config);
- * ```
- */
-export const withIcon = (config: IconConfig) => component => {
-  // If no icon or missing schema, return unmodified
-  if (!config.icon || !component.schema) {
-    return component;
-  }
-  
-  try {
-    // Get component details for class names
-    const prefix = config.prefix || component.config?.prefix || 'mtrl';
-    const componentName = config.componentName || component.componentName || 'component';
-    
-    // Clone the schema
-    const schema = JSON.parse(JSON.stringify(component.schema));
-    
-    // Determine icon position
-    const position = config.iconPosition || 'start';
-    
-    // Add the --icon modifier class to the main element
-    const elementClasses = schema.element.options.className || [];
-    const iconModifierClass = `${prefix}-${componentName}--icon`;
-    
-    if (Array.isArray(elementClasses)) {
-      if (!elementClasses.includes(iconModifierClass)) {
-        elementClasses.push(iconModifierClass);
-      }
-    } else if (typeof elementClasses === 'string') {
-      if (!elementClasses.includes(iconModifierClass)) {
-        schema.element.options.className = `${elementClasses} ${iconModifierClass}`.trim();
-      }
-    } else {
-      schema.element.options.className = [iconModifierClass];
-    }
-    
-    // Create icon element definition with component-specific class
-    const iconDef = {
-      name: 'icon',
-      creator: createElement,
-      options: {
-        tag: 'span',
-        className: [
-          `${prefix}-${componentName}-icon`,
-          `${prefix}-${componentName}-icon--${position}`
-        ],
-        html: config.icon
-      }
-    };
-    
-    // Add size class if specified
-    if (config.iconSize) {
-      const classes = iconDef.options.className;
-      if (Array.isArray(classes)) {
-        classes.push(`${prefix}-${componentName}-icon--${config.iconSize}`);
-      }
-    }
-    
-    // Add icon directly to the main element's children
-    if (position === 'start') {
-      // Create new children object with icon first
-      const existingChildren = { ...schema.element.children };
-      schema.element.children = {
-        icon: iconDef,
-        ...existingChildren
-      };
-    } else {
-      // Add icon after existing children
-      schema.element.children.icon = iconDef;
-    }
-    
-    // Return component with updated schema
-    return {
-      ...component,
-      schema
-    };
-  } catch (error) {
-    console.warn('Error enhancing schema with icon:', error);
-    return component;
-  }
-};