mtrl 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mtrl",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A functional JavaScript component library with composable architecture based on Material Design 3",
   "keywords": [
     "component",
@@ -23,7 +23,7 @@
   },
   "author": "floor",
   "license": "MIT License",
-  "dependencies": {
+  "devDependencies": {
     "typedoc": "^0.27.9"
   }
 }

package/src/components/checkbox/constants.ts

@@ -1,4 +1,4 @@
-// src/components/checkbox/constants.js
+// src/components/checkbox/constants.ts
 
 /**
  * Visual variants for checkbox
@@ -6,7 +6,7 @@
 export const CHECKBOX_VARIANTS = {
   FILLED: 'filled',
   OUTLINED: 'outlined'
-}
+} as const;
 
 /**
  * Label position options
@@ -14,58 +14,7 @@ export const CHECKBOX_VARIANTS = {
 export const CHECKBOX_LABEL_POSITION = {
   START: 'start',
   END: 'end'
-}
-
-/**
- * Validation schema for checkbox configuration
- */
-export const CHECKBOX_SCHEMA = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      optional: true
-    },
-    checked: {
-      type: 'boolean',
-      optional: true
-    },
-    indeterminate: {
-      type: 'boolean',
-      optional: true
-    },
-    required: {
-      type: 'boolean',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    value: {
-      type: 'string',
-      optional: true
-    },
-    label: {
-      type: 'string',
-      optional: true
-    },
-    labelPosition: {
-      type: 'string',
-      enum: Object.values(CHECKBOX_LABEL_POSITION),
-      optional: true
-    },
-    variant: {
-      type: 'string',
-      enum: Object.values(CHECKBOX_VARIANTS),
-      optional: true
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-}
+} as const;
 
 /**
  * Checkbox state classes
@@ -75,7 +24,7 @@ export const CHECKBOX_STATES = {
   INDETERMINATE: 'indeterminate',
   DISABLED: 'disabled',
   FOCUSED: 'focused'
-}
+} as const;
 
 /**
  * Checkbox element classes
@@ -85,4 +34,4 @@ export const CHECKBOX_CLASSES = {
   INPUT: 'checkbox-input',
   ICON: 'checkbox-icon',
   LABEL: 'checkbox-label'
-}
+} as const;

package/src/components/switch/constants.ts

@@ -1,4 +1,4 @@
-// src/components/switch/constants.js
+// src/components/switch/constants.ts
 
 /**
  * Label position options
@@ -6,7 +6,7 @@
 export const SWITCH_LABEL_POSITION = {
   START: 'start',
   END: 'end'
-}
+} as const;
 
 /**
  * Validation schema for switch configuration
@@ -56,7 +56,7 @@ export const SWITCH_SCHEMA = {
       optional: true
     }
   }
-}
+} as const;
 
 /**
  * Switch state classes
@@ -65,7 +65,7 @@ export const SWITCH_STATES = {
   CHECKED: 'checked',
   DISABLED: 'disabled',
   FOCUSED: 'focused'
-}
+} as const;
 
 /**
  * Switch element classes
@@ -77,4 +77,4 @@ export const SWITCH_CLASSES = {
   THUMB: 'thumb',
   THUMB_ICON: 'thumb-icon',
   LABEL: 'switch-label'
-}
+} as const;

package/src/core/compose/component.ts

@@ -4,7 +4,7 @@
  * @description Core utilities for component composition and creation with built-in mobile support
  */
 
-import { createElement, CreateElementOptions } from '../dom/create';
+import { createElement, CreateElementOptions, removeEventHandlers } from '../dom/create';
 import {
   normalizeEvent,
   hasTouchSupport,
@@ -138,7 +138,7 @@ export const createBase = (config: Record<string, any> = {}): BaseComponent => (
  * @returns {Function} Component enhancer
  */
 export const withElement = (options: WithElementOptions = {}) => 
-  (base: BaseComponent): ElementComponent => {
+  <T extends BaseComponent>(component: T): T & ElementComponent => {
     /**
      * Handles the start of a touch interaction.
      */
@@ -146,8 +146,8 @@ export const withElement = (options: WithElementOptions = {}) =>
       base.updateTouchState(event, 'start');
       element.classList.add(`${base.getClass('touch-active')}`);
 
-      if (options.forwardEvents?.touchstart && base.config?.emit) {
-        base.config.emit('touchstart', normalizeEvent(event));
+      if (options.forwardEvents?.touchstart && 'emit' in component) {
+        (component as any).emit('touchstart', normalizeEvent(event));
       }
     };
 
@@ -162,12 +162,12 @@ export const withElement = (options: WithElementOptions = {}) =>
       base.updateTouchState(event, 'end');
 
       // Emit tap event for short touches
-      if (touchDuration < TOUCH_CONFIG.TAP_THRESHOLD && base.config?.emit) {
-        base.config.emit('tap', normalizeEvent(event));
+      if (touchDuration < TOUCH_CONFIG.TAP_THRESHOLD && 'emit' in component) {
+        (component as any).emit('tap', normalizeEvent(event));
       }
 
-      if (options.forwardEvents?.touchend && base.config?.emit) {
-        base.config.emit('touchend', normalizeEvent(event));
+      if (options.forwardEvents?.touchend && 'emit' in component) {
+        (component as any).emit('touchend', normalizeEvent(event));
       }
     };
 
@@ -182,19 +182,22 @@ export const withElement = (options: WithElementOptions = {}) =>
       const deltaY = normalized.clientY - base.touchState.startPosition.y;
 
       // Detect and emit swipe gestures
-      if (Math.abs(deltaX) > TOUCH_CONFIG.SWIPE_THRESHOLD && base.config?.emit) {
-        base.config.emit('swipe', {
+      if (Math.abs(deltaX) > TOUCH_CONFIG.SWIPE_THRESHOLD && 'emit' in component) {
+        (component as any).emit('swipe', {
           direction: deltaX > 0 ? 'right' : 'left',
           deltaX,
           deltaY
         });
       }
 
-      if (options.forwardEvents?.touchmove && base.config?.emit) {
-        base.config.emit('touchmove', { ...normalized, deltaX, deltaY });
+      if (options.forwardEvents?.touchmove && 'emit' in component) {
+        (component as any).emit('touchmove', { ...normalized, deltaX, deltaY });
       }
     };
 
+    // Get the base component for reference
+    const base = component;
+
     // Create element options from component options
     const elementOptions: CreateElementOptions = {
       tag: options.tag || 'div',
@@ -204,7 +207,8 @@ export const withElement = (options: WithElementOptions = {}) =>
         options.className
       ].filter(Boolean),
       attrs: options.attrs || {},
-      context: base
+      forwardEvents: options.forwardEvents || {},
+      context: component // Pass component as context for events
     };
 
     // Create the element with appropriate classes
@@ -218,7 +222,7 @@ export const withElement = (options: WithElementOptions = {}) =>
     }
 
     return {
-      ...base,
+      ...component,
       element,
 
       /**
@@ -241,6 +245,10 @@ export const withElement = (options: WithElementOptions = {}) =>
           element.removeEventListener('touchend', handleTouchEnd);
           element.removeEventListener('touchmove', handleTouchMove);
         }
+        
+        // Clean up any registered event handlers using our new utility
+        removeEventHandlers(element);
+        
         element.remove();
       }
     };

package/src/core/dom/create.ts

@@ -72,6 +72,13 @@ export interface CreateElementOptions {
   [key: string]: any;
 }
 
+/**
+ * Event handler storage to facilitate cleanup
+ */
+export interface EventHandlerStorage {
+  [eventName: string]: EventListener;
+}
+
 /**
  * Creates a DOM element with the specified options
  *
@@ -117,21 +124,57 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
   // Handle all other attributes
   const allAttrs = { ...attrs, ...rest };
   Object.entries(allAttrs).forEach(([key, value]) => {
-    if (value != null) element.setAttribute(key, value);
+    if (value != null) element.setAttribute(key, String(value));
   });
 
-  // Handle event forwarding if context has emit method
-  if (context?.emit && forwardEvents) {
-    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
-      const shouldForward = typeof eventConfig === 'function'
-        ? eventConfig
-        : () => true;
+  // Initialize event handler storage if not present
+  if (!element.__eventHandlers) {
+    element.__eventHandlers = {};
+  }
 
-      element.addEventListener(nativeEvent, (event) => {
-        if (shouldForward({ ...context, element }, event)) {
-          context.emit(nativeEvent, { event });
+  // Handle event forwarding if context has emit method or is a component with on method
+  if (forwardEvents && (context?.emit || context?.on)) {
+    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
+      // Create a wrapper handler function to evaluate condition and forward event
+      const handler = (event: Event) => {
+        // Determine if the event should be forwarded
+        let shouldForward = true;
+        
+        if (typeof eventConfig === 'function') {
+          try {
+            // If it's a function, call with component context and event
+            shouldForward = eventConfig({ ...context, element }, event);
+          } catch (error) {
+            console.warn(`Error in event condition for ${nativeEvent}:`, error);
+            shouldForward = false;
+          }
+        } else {
+          // If it's a boolean, use directly
+          shouldForward = Boolean(eventConfig);
         }
-      });
+        
+        // Forward the event if condition passes
+        if (shouldForward) {
+          if (context.emit) {
+            context.emit(nativeEvent, { event, element, originalEvent: event });
+          } else if (context.on) {
+            // This is a component with on method but no emit method
+            // Dispatch a custom event that can be listened to
+            const customEvent = new CustomEvent(nativeEvent, {
+              detail: { event, element, originalEvent: event },
+              bubbles: true,
+              cancelable: true
+            });
+            element.dispatchEvent(customEvent);
+          }
+        }
+      };
+      
+      // Store the handler for future removal
+      element.__eventHandlers[nativeEvent] = handler;
+      
+      // Add the actual event listener
+      element.addEventListener(nativeEvent, handler);
     });
   }
 
@@ -147,6 +190,19 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
   return element;
 };
 
+/**
+ * Removes event handlers from an element
+ * @param element - Element to cleanup
+ */
+export const removeEventHandlers = (element: HTMLElement): void => {
+  if (element.__eventHandlers) {
+    Object.entries(element.__eventHandlers).forEach(([eventName, handler]) => {
+      element.removeEventListener(eventName, handler);
+    });
+    delete element.__eventHandlers;
+  }
+};
+
 /**
  * Higher-order function to add attributes to an element
  * @param {Record<string, any>} attrs - Attributes to add
@@ -185,4 +241,11 @@ export const withContent = (content: Node | string) =>
       element.textContent = content;
     }
     return element;
-  };
+  };
+
+// Extend HTMLElement interface to add eventHandlers property
+declare global {
+  interface HTMLElement {
+    __eventHandlers?: EventHandlerStorage;
+  }
+}