mtrl 0.3.8 → 0.4.0

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

@@ -1,155 +0,0 @@
-// src/core/compose/features/checkable.ts
-
-import { BaseComponent } from '../component';
-
-/**
- * Configuration for checkable feature
- */
-export interface CheckableConfig {
-  checked?: boolean;
-  [key: string]: any;
-}
-
-/**
- * Component with input element
- */
-export interface InputComponent extends BaseComponent {
-  input: HTMLInputElement;
-  emit?: (event: string, data: any) => InputComponent;
-}
-
-/**
- * Checkable state manager interface
- */
-export interface CheckableManager {
-  /**
-   * Sets the checked state to true
-   * Emits change event if state changes
-   * @returns CheckableManager instance for chaining
-   */
-  check: () => CheckableManager;
-  
-  /**
-   * Sets the checked state to false
-   * Emits change event if state changes
-   * @returns CheckableManager instance for chaining
-   */
-  uncheck: () => CheckableManager;
-  
-  /**
-   * Toggles the current checked state
-   * Always emits change event
-   * @returns CheckableManager instance for chaining
-   */
-  toggle: () => CheckableManager;
-  
-  /**
-   * Gets the current checked state
-   * @returns Whether component is checked
-   */
-  isChecked: () => boolean;
-}
-
-/**
- * Component with checkable capabilities
- */
-export interface CheckableComponent extends BaseComponent {
-  checkable: CheckableManager;
-}
-
-/**
- * Adds checked state management to a component with an input
- * Manages visual state and event emission for checked changes
- *
- * @param config - Checkable configuration
- * @returns Function that enhances a component with checkable functionality
- */
-export const withCheckable = <T extends CheckableConfig>(config: T = {} as T) => 
-  <C extends InputComponent>(component: C): C & CheckableComponent => {
-    if (!component.input) return component as C & CheckableComponent;
-
-    /**
-     * Updates component classes to reflect checked state
-     */
-    const updateStateClasses = (): void => {
-      component.element.classList.toggle(
-        `${component.getClass('switch')}--checked`,
-        component.input.checked
-      );
-    };
-
-    // Set initial state
-    if (config.checked) {
-      component.input.checked = true;
-      updateStateClasses();
-    }
-
-    // Update classes whenever checked state changes
-    if (component.emit) {
-      component.on?.('change', updateStateClasses);
-    }
-
-    const checkable: CheckableManager = {
-      /**
-       * Sets the checked state to true
-       * Emits change event if state changes
-       * @returns CheckableManager instance for chaining
-       */
-      check() {
-        if (!component.input.checked) {
-          component.input.checked = true;
-          updateStateClasses();
-          component.emit?.('change', {
-            checked: true,
-            value: component.input.value
-          });
-        }
-        return this;
-      },
-
-      /**
-       * Sets the checked state to false
-       * Emits change event if state changes
-       * @returns CheckableManager instance for chaining
-       */
-      uncheck() {
-        if (component.input.checked) {
-          component.input.checked = false;
-          updateStateClasses();
-          component.emit?.('change', {
-            checked: false,
-            value: component.input.value
-          });
-        }
-        return this;
-      },
-
-      /**
-       * Toggles the current checked state
-       * Always emits change event
-       * @returns CheckableManager instance for chaining
-       */
-      toggle() {
-        component.input.checked = !component.input.checked;
-        updateStateClasses();
-        component.emit?.('change', {
-          checked: component.input.checked,
-          value: component.input.value
-        });
-        return this;
-      },
-
-      /**
-       * Gets the current checked state
-       * @returns Whether component is checked
-       */
-      isChecked() {
-        return component.input.checked;
-      }
-    };
-
-    return {
-      ...component,
-      checkable
-    };
-  };

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

@@ -1,116 +0,0 @@
-// src/core/compose/features/disabled.ts
-
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for disabled feature
- */
-export interface DisabledConfig {
-  disabled?: boolean;
-  componentName?: string;
-  [key: string]: any;
-}
-
-/**
- * Disabled state manager interface
- */
-export interface DisabledManager {
-  /**
-   * Enables the component
-   * @returns DisabledManager instance for chaining
-   */
-  enable(): DisabledManager;
-  
-  /**
-   * Disables the component
-   * @returns DisabledManager instance for chaining
-   */
-  disable(): DisabledManager;
-  
-  /**
-   * Toggles the disabled state
-   * @returns DisabledManager instance for chaining
-   */
-  toggle(): DisabledManager;
-  
-  /**
-   * Checks if the component is disabled
-   * @returns true if disabled
-   */
-  isDisabled(): boolean;
-}
-
-/**
- * Component with disabled state capabilities
- */
-export interface DisabledComponent extends BaseComponent {
-  disabled: DisabledManager;
-}
-
-/**
- * Adds disabled state management to a component
- * 
- * @param config - Configuration object
- * @returns Function that enhances a component with disabled state management
- */
-export const withDisabled = <T extends DisabledConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & DisabledComponent => {
-    // Get the disabled class based on component name
-    const disabledClass = `${component.getClass(config.componentName || component.componentName || 'component')}--disabled`;
-
-    // Directly implement disabled functionality
-    const disabled: DisabledManager = {
-      enable() {
-        component.element.classList.remove(disabledClass);
-        if ('input' in component && component.input instanceof HTMLElement) {
-          component.input.disabled = false;
-          component.input.removeAttribute('disabled');
-        } else {
-          (component.element as HTMLButtonElement).disabled = false;
-          component.element.removeAttribute('disabled');
-        }
-        return this;
-      },
-
-      disable() {
-        component.element.classList.add(disabledClass);
-        if ('input' in component && component.input instanceof HTMLElement) {
-          component.input.disabled = true;
-          component.input.setAttribute('disabled', 'true');
-        } else {
-          (component.element as HTMLButtonElement).disabled = true;
-          component.element.setAttribute('disabled', 'true');
-        }
-        return this;
-      },
-
-      toggle() {
-        if (this.isDisabled()) {
-          this.enable();
-        } else {
-          this.disable();
-        }
-        return this;
-      },
-
-      isDisabled() {
-        if ('input' in component && component.input instanceof HTMLElement) {
-          return component.input.disabled;
-        }
-        return (component.element as HTMLButtonElement).disabled;
-      }
-    };
-
-    // Initialize disabled state if configured
-    if (config.disabled) {
-      // Use requestAnimationFrame to ensure DOM is ready
-      requestAnimationFrame(() => {
-        disabled.disable();
-      });
-    }
-
-    return {
-      ...component,
-      disabled
-    };
-  };

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

@@ -1,65 +0,0 @@
-// src/core/compose/features/events.ts
-/**
- * @module core/compose/features
- */
-
-import { createEmitter, Emitter } from '../../state/emitter';
-import { BaseComponent } from '../component';
-
-/**
- * Component with event capabilities
- */
-export interface EventComponent extends BaseComponent {
-  /**
-   * Subscribe to an event
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Component instance for chaining
-   */
-  on(event: string, handler: (...args: any[]) => void): EventComponent;
-  
-  /**
-   * Unsubscribe from an event
-   * @param event - Event name
-   * @param handler - Event handler
-   * @returns Component instance for chaining
-   */
-  off(event: string, handler: (...args: any[]) => void): EventComponent;
-  
-  /**
-   * Emit an event
-   * @param event - Event name
-   * @param data - Event data
-   * @returns Component instance for chaining
-   */
-  emit(event: string, data?: any): EventComponent;
-}
-
-/**
- * Adds event handling capabilities to a component
- * Returns event system ready to use immediately
- * 
- * @returns Function that enhances a component with event capabilities
- */
-export const withEvents = () => 
-  <T extends BaseComponent>(component: T): T & EventComponent => {
-    const emitter: Emitter = createEmitter();
-
-    return {
-      ...component,
-      on(event: string, handler: (...args: any[]) => void) {
-        emitter.on(event, handler);
-        return this;
-      },
-
-      off(event: string, handler: (...args: any[]) => void) {
-        emitter.off(event, handler);
-        return this;
-      },
-
-      emit(event: string, data?: any) {
-        emitter.emit(event, data);
-        return this;
-      }
-    };
-  };

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

@@ -1,71 +0,0 @@
-// src/core/compose/features/icon.ts
-
-import { createIcon, IconManager } from '../../build/icon';
-import { BaseComponent, ElementComponent } from '../component';
-
-/**
- * Configuration for icon feature
- */
-export interface IconConfig {
-  icon?: string;
-  iconPosition?: 'start' | 'end';
-  iconSize?: string;
-  prefix?: string;
-  componentName?: string;
-  text?: string;
-  [key: string]: any;
-}
-
-/**
- * Component with icon capabilities
- */
-export interface IconComponent extends BaseComponent {
-  icon: IconManager;
-}
-
-/**
- * Updates the component's circular style based on content
- * Adds circular class if there's an icon but no text
- */
-const updateCircularStyle = (component: ElementComponent, config: IconConfig): void => {
-  const hasText = config.text;
-  const hasIcon = config.icon;
-
-  const circularClass = `${component.getClass('button')}--circular`;
-  if (!hasText && hasIcon) {
-    component.element.classList.add(circularClass);
-  } else {
-    component.element.classList.remove(circularClass);
-  }
-};
-
-/**
- * Adds icon management to a component
- * @param config - Configuration object containing icon information
- * @returns Function that enhances a component with icon capabilities
- */
-export const withIcon = <T extends IconConfig>(config: T) => 
-  <C extends ElementComponent>(component: C): C & IconComponent => {
-    // Create the icon with configuration settings
-    const icon = createIcon(component.element, {
-      prefix: config.prefix,
-      type: config.componentName || 'component',
-      position: config.iconPosition,
-      iconSize: config.iconSize
-    });
-    
-    // Set icon if provided in config
-    config.icon && icon.setIcon(config.icon);
-    
-    // Apply button-specific styling if the component is a button
-    if (component.componentName === 'button') {
-      if (!config.text) {
-        updateCircularStyle(component, config);
-      } else if (config.icon && config.text) {
-        component.element.classList.add(`${component.getClass('button')}--icon`);
-      }
-    }
-    
-    // Return enhanced component with icon capabilities
-    return Object.assign(component, { icon });
-  };

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

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