mtrl 0.2.0 → 0.2.2

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;
+  }
+}

package/src/styles/abstract/_variables.scss

@@ -180,6 +180,18 @@ $z-index: (
 ) !default;
 
 // Component-specific tokens
+@function card($key) {
+  $card: (
+    'width': 344px,
+    'width-small': 344px,
+    'width-medium': 480px,
+    'width-large': 624px,
+    'border-radius': 12px,
+    'padding': 16px
+  );
+  
+  @return map-get($card, $key);
+}
 $button: (
   'height': 40px,
   'min-width': 64px,