mtrl 0.1.3 → 0.2.1

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

@@ -0,0 +1,35 @@
+// src/core/compose/features/index.ts
+
+// Core features
+export { withEvents } from './events';
+export { withText } from './text';
+export { withIcon } from './icon';
+export { withVariant } from './variant';
+export { withSize } from './size';
+export { withPosition } from './position';
+export { withRipple } from './ripple';
+export { withInput } from './input';
+export { withCheckable } from './checkable';
+export { withStyle } from './style';
+export { withTextInput } from './textinput';
+export { withTextLabel } from './textlabel';
+export { withTrack } from './track';
+export { withEvents as withEnhancedEvents } from './withEvents';
+
+// State management features
+export { withDisabled } from './disabled';
+export { withLifecycle } from './lifecycle';
+
+// Re-export interfaces for better developer experience
+export type { EventComponent } from './events';
+export type { TextComponent } from './text';
+export type { IconComponent } from './icon';
+export type { LifecycleComponent, Lifecycle } from './lifecycle';
+export type { DisabledComponent, DisabledManager } from './disabled';
+export type { RippleComponent } from './ripple';
+export type { InputComponent } from './input';
+export type { CheckableComponent, CheckableManager } from './checkable';
+export type { TextInputComponent } from './textinput';
+export type { LabelComponent, LabelManager } from './textlabel';
+export type { TrackComponent } from './track';
+export type { EnhancedEventComponent } from './withEvents';

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

@@ -0,0 +1,174 @@
+// src/core/compose/features/input.ts
+
+import { BaseComponent, ElementComponent } from '../component';
+
+/**
+ * Input configuration options
+ */
+export interface InputConfig {
+  /**
+   * Input name attribute
+   */
+  name?: string;
+  
+  /**
+   * Initial checked state
+   */
+  checked?: boolean;
+  
+  /**
+   * Whether input is required
+   */
+  required?: boolean;
+  
+  /**
+   * Whether input is disabled
+   */
+  disabled?: boolean;
+  
+  /**
+   * Input value attribute
+   */
+  value?: string;
+  
+  /**
+   * Accessibility label text
+   */
+  label?: string;
+  
+  /**
+   * Alternative accessibility label
+   */
+  ariaLabel?: string;
+  
+  /**
+   * Component name for classes
+   */
+  componentName?: string;
+  
+  [key: string]: any;
+}
+
+/**
+ * Component with input element and related methods
+ */
+export interface InputComponent extends ElementComponent {
+  /**
+   * Input element
+   */
+  input: HTMLInputElement;
+  
+  /**
+   * Gets the current input value
+   * @returns Current value
+   */
+  getValue: () => string;
+  
+  /**
+   * Sets the input value and emits a value event
+   * @param value - New value to set
+   * @returns Component instance for chaining
+   */
+  setValue: (value: string) => InputComponent;
+  
+  /**
+   * Event emission method if available
+   */
+  emit?: (event: string, data: any) => InputComponent;
+}
+
+/**
+ * Creates an input element and adds it to a component
+ * Handles both input creation and event emission for state changes
+ *
+ * @param config - Input configuration
+ * @returns Function that enhances a component with input functionality
+ */
+export const withInput = <T extends InputConfig>(config: T = {} as T) => 
+  <C extends ElementComponent>(component: C): C & InputComponent => {
+    const input = document.createElement('input');
+    const name = component.componentName || 'component';
+    input.type = 'checkbox';
+    input.className = `${component.getClass(name)}-input`;
+
+    // Ensure input can receive focus
+    input.style.position = 'absolute';
+    input.style.opacity = '0';
+    input.style.cursor = 'pointer';
+    // Don't use display: none or visibility: hidden as they prevent focus
+
+    // The input itself should be focusable, not the wrapper
+    component.element.setAttribute('role', 'presentation');
+    input.setAttribute('role', name);
+
+    const attributes: Record<string, string | boolean | undefined> = {
+      name: config.name,
+      checked: config.checked,
+      required: config.required,
+      disabled: config.disabled,
+      value: config.value || 'on',
+      'aria-label': config.label || config.ariaLabel
+    };
+
+    Object.entries(attributes).forEach(([key, value]) => {
+      if (value !== null && value !== undefined) {
+        if (key === 'disabled' && value === true) {
+          input.disabled = true;
+          input.setAttribute('disabled', 'true');
+          // Note: We don't add the class here because that's handled by withDisabled
+        } else if (value === true) {
+          input.setAttribute(key, key);
+        } else {
+          input.setAttribute(key, String(value));
+        }
+      }
+    });
+
+    // Bridge native checkbox events to our event system
+    input.addEventListener('change', (event) => {
+      if (component.emit) {
+        component.emit('change', {
+          checked: input.checked,
+          value: input.value,
+          nativeEvent: event
+        });
+      }
+    });
+
+    // Add keyboard handling
+    input.addEventListener('keydown', (event) => {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault();
+        if (!input.disabled) {
+          input.checked = !input.checked;
+          input.dispatchEvent(new Event('change', { bubbles: true }));
+        }
+      }
+    });
+
+    component.element.appendChild(input);
+
+    return {
+      ...component,
+      input,
+
+      /**
+       * Gets the current input value
+       * @returns Current value
+       */
+      getValue: () => input.value,
+
+      /**
+       * Sets the input value and emits a value event
+       * @param value - New value to set
+       * @returns Component instance for chaining
+       */
+      setValue(value: string) {
+        input.value = value;
+        if (component.emit) {
+          component.emit('value', { value });
+        }
+        return this;
+      }
+    };
+  };

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

@@ -0,0 +1,139 @@
+// 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

@@ -0,0 +1,94 @@
+// 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

@@ -0,0 +1,55 @@
+// 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);
+
+    // 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);
+        rippleInstance.mount(component.element);
+      };
+
+      component.lifecycle.destroy = () => {
+        rippleInstance.unmount(component.element);
+        originalDestroy.call(component.lifecycle);
+      };
+    }
+
+    return {
+      ...component,
+      ripple: rippleInstance
+    };
+  };

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

@@ -0,0 +1,29 @@
+// 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

@@ -0,0 +1,31 @@
+// 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

@@ -0,0 +1,44 @@
+// 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
+    };
+  };