mtrl 0.3.8 → 0.4.0

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

@@ -1,139 +0,0 @@
-// src/core/compose/features/lifecycle.ts
-
-import { createEmitter, Emitter } from '../../state/emitter';
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Component managers that can be passed to lifecycle
- */
-export interface ComponentManagers {
-  events?: {
-    destroy: () => void;
-  };
-  text?: {
-    getElement: () => HTMLElement | null;
-  };
-  icon?: {
-    getElement: () => HTMLElement | null;
-  };
-  [key: string]: any;
-}
-
-/**
- * Lifecycle methods interface
- */
-export interface Lifecycle {
-  /**
-   * Registers a handler for mount event
-   * @param handler - Function to call when component is mounted
-   * @returns Unsubscribe function
-   */
-  onMount: (handler: () => void) => () => void;
-  
-  /**
-   * Registers a handler for unmount event
-   * @param handler - Function to call when component is unmounted
-   * @returns Unsubscribe function
-   */
-  onUnmount: (handler: () => void) => () => void;
-  
-  /**
-   * Mounts the component
-   */
-  mount: () => void;
-  
-  /**
-   * Unmounts the component
-   */
-  unmount: () => void;
-  
-  /**
-   * Checks if component is mounted
-   */
-  isMounted: () => boolean;
-  
-  /**
-   * Destroys the component
-   */
-  destroy: () => void;
-}
-
-/**
- * Component with lifecycle capabilities
- */
-export interface LifecycleComponent extends BaseComponent {
-  lifecycle: Lifecycle;
-}
-
-/**
- * Adds lifecycle management to a component
- * 
- * @returns Function that enhances a component with lifecycle management
- */
-export const withLifecycle = () => 
-  <T extends ElementComponent>(component: T): T & LifecycleComponent => {
-    let mounted = false;
-    const emitter: Emitter = createEmitter();
-    
-    const lifecycle: Lifecycle = {
-      // Mount/Unmount state management
-      onMount: (handler: () => void) => emitter.on('mount', handler),
-      onUnmount: (handler: () => void) => emitter.on('unmount', handler),
-      
-      mount: () => {
-        if (!mounted) {
-          mounted = true;
-          emitter.emit('mount');
-        }
-      },
-
-      unmount: () => {
-        if (mounted) {
-          mounted = false;
-          emitter.emit('unmount');
-          emitter.clear();
-        }
-      },
-
-      isMounted: () => mounted,
-
-      // Cleanup and destruction
-      destroy() {
-        // First trigger unmount
-        if (mounted) {
-          this.unmount();
-        }
-
-        // Clean up all event listeners
-        if ('events' in component && component.events?.destroy) {
-          component.events.destroy();
-        }
-        
-        // Clean up text element
-        if ('text' in component && component.text?.getElement) {
-          const textElement = component.text.getElement();
-          if (textElement) {
-            textElement.remove();
-          }
-        }
-        
-        // Clean up icon element
-        if ('icon' in component && component.icon?.getElement) {
-          const iconElement = component.icon.getElement();
-          if (iconElement) {
-            iconElement.remove();
-          }
-        }
-        
-        // Remove the main element
-        if (component.element) {
-          component.element.remove();
-        }
-      }
-    };
-
-    return {
-      ...component,
-      lifecycle
-    };
-  };

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

@@ -1,94 +0,0 @@
-// src/core/compose/features/position.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Available position values
- */
-export enum POSITIONS {
-  LEFT = 'left',
-  RIGHT = 'right',
-  TOP = 'top',
-  BOTTOM = 'bottom',
-  START = 'start',
-  END = 'end',
-  CENTER = 'center'
-}
-
-/**
- * Configuration for position feature
- */
-export interface PositionConfig {
-  position?: string;
-  prefix?: string;
-  componentName?: string;
-  [key: string]: any;
-}
-
-/**
- * Position manager interface
- */
-export interface PositionManager {
-  /**
-   * Sets the component's position
-   * @param newPosition - New position value
-   * @returns Position manager for chaining
-   */
-  setPosition: (newPosition: string) => PositionManager;
-  
-  /**
-   * Gets the current position
-   * @returns Current position
-   */
-  getPosition: () => string;
-}
-
-/**
- * Component with position capabilities
- */
-export interface PositionComponent extends BaseComponent {
-  position: PositionManager;
-}
-
-/**
- * Adds positioning functionality to a component
- * 
- * @param config - Configuration object containing position information
- * @returns Function that enhances a component with position capabilities
- */
-export const withPosition = <T extends PositionConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & PositionComponent => {
-    if (!config.position || !component.element) {
-      return component as C & PositionComponent;
-    }
-
-    // Get the position value, normalizing from enum if provided as uppercase
-    const position = 
-      POSITIONS[config.position.toUpperCase() as keyof typeof POSITIONS] || 
-      config.position;
-      
-    const className = `${config.prefix}-${config.componentName}--${position}`;
-    component.element.classList.add(className);
-
-    const positionManager: PositionManager = {
-      setPosition(newPosition: string) {
-        const oldPosition = position;
-        const oldClassName = `${config.prefix}-${config.componentName}--${oldPosition}`;
-        const newClassName = `${config.prefix}-${config.componentName}--${newPosition}`;
-
-        component.element.classList.remove(oldClassName);
-        component.element.classList.add(newClassName);
-
-        return this;
-      },
-
-      getPosition() {
-        return position;
-      }
-    };
-
-    return {
-      ...component,
-      position: positionManager
-    };
-  };

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

@@ -1,58 +0,0 @@
-// src/core/compose/features/ripple.ts
-
-import { createRipple, RippleController, RippleConfig } from '../../build/ripple';
-import { BaseComponent, ElementComponent } from '../component';
-import { LifecycleComponent } from './lifecycle';
-
-/**
- * Configuration for ripple feature
- */
-export interface RippleFeatureConfig {
-  ripple?: boolean;
-  rippleConfig?: RippleConfig;
-  [key: string]: any;
-}
-
-/**
- * Component with ripple capabilities
- */
-export interface RippleComponent extends BaseComponent {
-  ripple: RippleController;
-}
-
-/**
- * Adds ripple effect functionality to a component
- * 
- * @param config - Configuration object
- * @returns Function that enhances a component with ripple effect
- */
-export const withRipple = <T extends RippleFeatureConfig>(config: T) => 
-  <C extends ElementComponent & Partial<LifecycleComponent>>(component: C): C & RippleComponent => {
-    if (!config.ripple) return component as C & RippleComponent;
-
-    const rippleInstance = createRipple(config.rippleConfig);
-    
-    // Immediately mount ripple to ensure it's available right away
-    rippleInstance.mount(component.element);
-
-    // If component has lifecycle methods, integrate ripple with them
-    if (component.lifecycle) {
-      const originalMount = component.lifecycle.mount;
-      const originalDestroy = component.lifecycle.destroy;
-
-      component.lifecycle.mount = () => {
-        originalMount.call(component.lifecycle);
-        // We don't need to mount again here since we already did it above
-      };
-
-      component.lifecycle.destroy = () => {
-        rippleInstance.unmount(component.element);
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      ripple: rippleInstance
-    };
-  };

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

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

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

@@ -1,31 +0,0 @@
-// src/core/compose/features/style.ts
-
-import { ElementComponent } from '../component';
-
-/**
- * Configuration for style feature
- */
-export interface StyleConfig {
-  variant?: string;
-  size?: string;
-  [key: string]: any;
-}
-
-/**
- * Adds style classes to a component based on configuration
- * 
- * @param config - Configuration object containing style information
- * @returns Function that enhances a component with style classes
- */
-export const withStyle = <T extends StyleConfig>(config: T = {} as T) => 
-  <C extends ElementComponent>(component: C): C => {
-    if (config.variant) {
-      component.element.classList.add(`${component.getClass('button')}--${config.variant}`);
-    }
-
-    if (config.size) {
-      component.element.classList.add(`${component.getClass('button')}--${config.size}`);
-    }
-
-    return component;
-  };

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

@@ -1,44 +0,0 @@
-// src/core/compose/features/text.ts
-
-import { createText, TextManager } from '../../build/text';
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for text feature
- */
-export interface TextConfig {
-  text?: string;
-  prefix?: string;
-  componentName?: string;
-  [key: string]: any;
-}
-
-/**
- * Component with text capabilities
- */
-export interface TextComponent extends BaseComponent {
-  text: TextManager;
-}
-
-/**
- * Adds text management to a component
- * 
- * @param config - Configuration object containing text information
- * @returns Function that enhances a component with text capabilities
- */
-export const withText = <T extends TextConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & TextComponent => {
-    const text = createText(component.element, {
-      prefix: config.prefix,
-      type: config.componentName || 'component'
-    });
-
-    if (config.text) {
-      text.setText(config.text);
-    }
-
-    return {
-      ...component,
-      text
-    };
-  };

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

@@ -1,238 +0,0 @@
-// src/core/compose/features/textinput.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for text input feature
- */
-export interface TextInputConfig {
-  /**
-   * Input type (text, password, etc.)
-   */
-  type?: string;
-  
-  /**
-   * Whether to use textarea instead of input
-   */
-  multiline?: boolean;
-  
-  /**
-   * Input name attribute
-   */
-  name?: string;
-  
-  /**
-   * Whether input is required
-   */
-  required?: boolean;
-  
-  /**
-   * Whether input is disabled
-   */
-  disabled?: boolean;
-  
-  /**
-   * Maximum allowed length
-   */
-  maxLength?: number;
-  
-  /**
-   * Input validation pattern
-   */
-  pattern?: string;
-  
-  /**
-   * Autocomplete setting
-   */
-  autocomplete?: string;
-  
-  /**
-   * Initial input value
-   */
-  value?: string;
-  
-  [key: string]: any;
-}
-
-/**
- * Component with text input capabilities
- */
-export interface TextInputComponent extends ElementComponent {
-  /**
-   * Input element
-   */
-  input: HTMLInputElement | HTMLTextAreaElement;
-  
-  /**
-   * Sets the input value
-   * @param value - Value to set
-   * @returns Component instance for chaining
-   */
-  setValue: (value: string) => TextInputComponent;
-  
-  /**
-   * Gets the current input value
-   * @returns Current value
-   */
-  getValue: () => string;
-  
-  /**
-   * Sets an attribute on the input
-   * @param name - Attribute name
-   * @param value - Attribute value
-   * @returns Component instance for chaining
-   */
-  setAttribute: (name: string, value: string) => TextInputComponent;
-  
-  /**
-   * Gets an attribute from the input
-   * @param name - Attribute name
-   * @returns Attribute value
-   */
-  getAttribute: (name: string) => string | null;
-  
-  /**
-   * Removes an attribute from the input
-   * @param name - Attribute name
-   * @returns Component instance for chaining
-   */
-  removeAttribute: (name: string) => TextInputComponent;
-  
-  /**
-   * Event emission method if available
-   */
-  emit?: (event: string, data: any) => TextInputComponent;
-}
-
-/**
- * Enhances a component with text input functionality
- * 
- * @param config - Text input configuration
- * @returns Function that enhances a component with text input capabilities
- */
-export const withTextInput = <T extends TextInputConfig>(config: T = {} as T) => 
-  <C extends ElementComponent>(component: C): C & TextInputComponent => {
-    const isMultiline = config.multiline || config.type === 'multiline';
-    const input = document.createElement(isMultiline ? 'textarea' : 'input') as 
-      HTMLInputElement | HTMLTextAreaElement;
-    
-    input.className = `${component.getClass('textfield')}-input`;
-
-    // Set input attributes
-    const attributes: Record<string, string | number | boolean | undefined> = {
-      name: config.name,
-      required: config.required,
-      disabled: config.disabled,
-      maxLength: config.maxLength,
-      pattern: config.pattern,
-      autocomplete: config.autocomplete,
-      value: config.value || ''
-    };
-
-    // Only set type attribute for input elements, not for textarea
-    if (!isMultiline) {
-      attributes.type = config.type || 'text';
-    } else {
-      // For textarea, add a data attribute to identify it as multiline
-      attributes['data-type'] = 'multiline';
-    }
-
-    Object.entries(attributes).forEach(([key, value]) => {
-      if (value !== null && value !== undefined) {
-        if (typeof value === 'boolean') {
-          if (value) {
-            input.setAttribute(key, '');
-          }
-        } else {
-          input.setAttribute(key, String(value));
-        }
-      }
-    });
-
-    // Handle input state changes
-    const updateInputState = (): boolean => {
-      const isEmpty = !input.value;
-      component.element.classList.toggle(`${component.getClass('textfield')}--empty`, isEmpty);
-      return isEmpty;
-    };
-
-    // Detect autofill using input events instead of animation
-    // This is more compatible with our testing environment
-    const handleAutofill = (): void => {
-      // Check for webkit autofill background
-      const isAutofilled =
-        input.matches(':-webkit-autofill') ||
-        // For Firefox and other browsers
-        (window.getComputedStyle(input).backgroundColor === 'rgb(250, 255, 189)' ||
-         window.getComputedStyle(input).backgroundColor === 'rgb(232, 240, 254)');
-
-      if (isAutofilled) {
-        component.element.classList.remove(`${component.getClass('textfield')}--empty`);
-        component.emit?.('input', { value: input.value, isEmpty: false, isAutofilled: true });
-      }
-    };
-
-    // Event listeners
-    input.addEventListener('focus', () => {
-      component.element.classList.add(`${component.getClass('textfield')}--focused`);
-      component.emit?.('focus', { isEmpty: updateInputState() });
-      // Also check for autofill on focus
-      setTimeout(handleAutofill, 100);
-    });
-
-    input.addEventListener('blur', () => {
-      component.element.classList.remove(`${component.getClass('textfield')}--focused`);
-      component.emit?.('blur', { isEmpty: updateInputState() });
-    });
-
-    input.addEventListener('input', () => {
-      component.emit?.('input', {
-        value: input.value,
-        isEmpty: updateInputState(),
-        isAutofilled: false
-      });
-    });
-
-    // Initial state
-    updateInputState();
-
-    // Add multiline class to the component if it's a textarea
-    if (isMultiline) {
-      component.element.classList.add(`${component.getClass('textfield')}--multiline`);
-    }
-
-    component.element.appendChild(input);
-
-    // Cleanup
-    if ('lifecycle' in component && component.lifecycle?.destroy) {
-      const originalDestroy = component.lifecycle.destroy;
-      component.lifecycle.destroy = () => {
-        input.remove();
-        originalDestroy.call(component.lifecycle);
-      };
-    }
-
-    return {
-      ...component,
-      input,
-      setValue(value: string) {
-        input.value = value || '';
-        updateInputState();
-        return this;
-      },
-      getValue() {
-        return input.value;
-      },
-      setAttribute(name: string, value: string) {
-        input.setAttribute(name, value);
-        return this;
-      },
-      getAttribute(name: string) {
-        return input.getAttribute(name);
-      },
-      removeAttribute(name: string) {
-        input.removeAttribute(name);
-        return this;
-      }
-    };
-  };