mtrl 0.2.6 → 0.2.8

package/src/components/dialog/features.ts

@@ -1,29 +1,61 @@
-// src/components/dialog/features.ts
+// src/components/dialog/features.ts (partial updated code)
+
 import { getOverlayConfig } from './config';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
-import { DialogConfig, DialogButton, DialogEvent } from './types';
+import { DialogConfig, DialogButton } from './types';
 import createButton from '../button';
-import { BUTTON_VARIANTS } from '../button/constants';
+import { createDivider } from '../divider'; // Import the divider component
+import { addClass, removeClass, hasClass } from '../../core/dom/classes';
+
+// Common constants for internal use
+const SIZE_MEDIUM = 'medium';
+const ANIMATION_SCALE = 'scale';
+const FOOTER_ALIGNMENT_RIGHT = 'right';
+const EVENT_BEFORE_OPEN = 'beforeopen';
+const EVENT_OPEN = 'open';
+const EVENT_AFTER_OPEN = 'afteropen';
+const EVENT_BEFORE_CLOSE = 'beforeclose';
+const EVENT_CLOSE = 'close';
+const EVENT_AFTER_CLOSE = 'afterclose';
+
+// Common button variants for internal use
+const BUTTON_VARIANT_TEXT = 'text';
+const BUTTON_VARIANT_FILLED = 'filled';
+
+// Arrays for class management
+const ALL_SIZES = ['small', 'medium', 'large', 'fullwidth', 'fullscreen'];
+const ALL_ANIMATIONS = ['scale', 'slide-up', 'slide-down', 'fade'];
+const ALL_FOOTER_ALIGNMENTS = ['right', 'left', 'center', 'space-between'];
+
+const DIALOG_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  BEFORE_OPEN: 'beforeopen',
+  BEFORE_CLOSE: 'beforeclose',
+  AFTER_OPEN: 'afteropen',
+  AFTER_CLOSE: 'afterclose'
+};
 
 /**
- * Creates the dialog DOM structure
+ * Creates the dialog DOM structure with proper divider handling
  * @param config Dialog configuration
  * @returns Component enhancer with DOM structure
  */
 export const withStructure = (config: DialogConfig) => component => {
   // Create the overlay element
   const overlayConfig = getOverlayConfig(config);
-  const overlay = document.createElement(overlayConfig.tag);
+  const overlay = document.createElement(overlayConfig.tag || 'div');
   
   // Add overlay classes
   overlay.classList.add(component.getClass('dialog-overlay'));
   
-  // Set overlay attributes
-  Object.entries(overlayConfig.attrs || {}).forEach(([key, value]) => {
-    if (value !== undefined) {
-      overlay.setAttribute(key, String(value));
-    }
-  });
+  // Set overlay attributes safely
+  if (overlayConfig.attrs && typeof overlayConfig.attrs === 'object') {
+    Object.entries(overlayConfig.attrs).forEach(([key, value]) => {
+      if (key && typeof key === 'string' && value !== undefined) {
+        overlay.setAttribute(key, String(value));
+      }
+    });
+  }
   
   // Set custom z-index if provided
   if (config.zIndex) {
@@ -63,9 +95,18 @@ export const withStructure = (config: DialogConfig) => component => {
           <line x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       `;
-      closeButton.addEventListener('click', () => {
-        component.events.trigger(DIALOG_EVENTS.CLOSE, { dialog: component });
+      
+      // Close button click handler with event-based communication
+      closeButton.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        
+        // Use the dialog:close custom event which will be listened for in withVisibility
+        if (component && component.emit) {
+          component.emit('dialog:close', { source: 'closeButton' });
+        }
       });
+      
       header.appendChild(closeButton);
     }
     
@@ -88,9 +129,9 @@ export const withStructure = (config: DialogConfig) => component => {
     footer.classList.add(component.getClass('dialog-footer'));
     
     // Apply footer alignment
-    const alignment = config.footerAlignment || DIALOG_FOOTER_ALIGNMENTS.RIGHT;
-    if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
-      footer.classList.add(`${component.getClass('dialog-footer')}--${alignment}`);
+    const alignment = config.footerAlignment || 'right';
+    if (alignment !== 'right') {
+      addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
     }
     
     // Add buttons if provided
@@ -101,36 +142,70 @@ export const withStructure = (config: DialogConfig) => component => {
     return footer;
   };
   
+  const createDividerElement = () => {
+    const divider = createDivider({
+      variant: 'full-width',
+      class: component.getClass('dialog-divider')
+    });
+    return divider;
+  };
+  
   // Create the dialog structure
   const header = createHeader();
   const content = createContent();
   const footer = Array.isArray(config.buttons) && config.buttons.length > 0 ? createFooter() : null;
   
-  // Add header, content, and footer to dialog
-  component.element.appendChild(header);
-  component.element.appendChild(content);
-  if (footer) {
-    component.element.appendChild(footer);
+  // Add dialog classes to the main component element
+  addClass(component.element, component.getClass('dialog'));
+  
+  // Apply size class
+  const size = config.size || 'medium';
+  if (size !== 'medium') {
+    addClass(component.element, `${component.getClass('dialog')}--${size}`);
   }
   
-  // Add dialog to overlay
-  overlay.appendChild(component.element);
+  // Apply animation class
+  const animation = config.animation || 'scale';
+  if (animation !== 'scale') {
+    addClass(component.element, `${component.getClass('dialog')}--${animation}`);
+  }
+  
+  // Add header to dialog
+  component.element.appendChild(header);
   
-  // Add dialog classes
-  component.element.classList.add(component.getClass('dialog'));
+  // Create divider elements if configured
+  let headerDivider = null;
+  let footerDivider = null;
   
-  // Apply size class
-  const size = config.size || DIALOG_SIZES.MEDIUM;
-  if (size !== DIALOG_SIZES.MEDIUM) {
-    component.element.classList.add(`${component.getClass('dialog')}--${size}`);
+  if (config.divider) {
+    // Add header divider (between header and content)
+    headerDivider = createDividerElement();
+    headerDivider.element.classList.add(component.getClass('dialog-header-divider'));
+    component.element.appendChild(headerDivider.element);
+    
+    // If footer exists, add footer divider (between content and footer)
+    if (footer) {
+      footerDivider = createDividerElement();
+      footerDivider.element.classList.add(component.getClass('dialog-footer-divider'));
+    }
   }
   
-  // Apply animation class
-  const animation = config.animation || DIALOG_ANIMATIONS.SCALE;
-  if (animation !== DIALOG_ANIMATIONS.SCALE) {
-    component.element.classList.add(`${component.getClass('dialog')}--${animation}`);
+  // Add content to dialog
+  component.element.appendChild(content);
+  
+  // Add footer divider before footer if it exists
+  if (footerDivider) {
+    component.element.appendChild(footerDivider.element);
+  }
+  
+  // Add footer to dialog if exists
+  if (footer) {
+    component.element.appendChild(footer);
   }
   
+  // Add the dialog element to the overlay
+  overlay.appendChild(component.element);
+  
   // Add overlay to container or document.body
   const container = config.container || document.body;
   container.appendChild(overlay);
@@ -143,11 +218,88 @@ export const withStructure = (config: DialogConfig) => component => {
       header,
       content,
       footer,
+      headerDivider,
+      footerDivider,
       container
     }
   };
 };
 
+
+/**
+ * Add methods to manage dividers
+ * @returns Component enhancer with divider management features
+ */
+export const withDivider = () => component => {
+  return {
+    ...component,
+    divider: {
+      /**
+       * Shows or hides the dividers
+       * @param show Whether to show the dividers
+       * @returns Component instance for chaining
+       */
+      toggleDivider(show) {
+        // Handle header divider
+        if (show && !component.structure.headerDivider) {
+          // Create and add header divider
+          const headerDivider = createDivider({
+            variant: 'full-width',
+            class: `${component.getClass('dialog-divider')} ${component.getClass('dialog-header-divider')}`
+          });
+          
+          // Insert after header, before content
+          component.element.insertBefore(
+            headerDivider.element, 
+            component.structure.content
+          );
+          
+          component.structure.headerDivider = headerDivider;
+          
+          // If footer exists, add footer divider
+          if (component.structure.footer && !component.structure.footerDivider) {
+            const footerDivider = createDivider({
+              variant: 'full-width',
+              class: `${component.getClass('dialog-divider')} ${component.getClass('dialog-footer-divider')}`
+            });
+            
+            // Insert before footer
+            component.element.insertBefore(
+              footerDivider.element,
+              component.structure.footer
+            );
+            
+            component.structure.footerDivider = footerDivider;
+          }
+        } else if (!show) {
+          // Remove header divider if it exists
+          if (component.structure.headerDivider) {
+            component.structure.headerDivider.element.remove();
+            component.structure.headerDivider = null;
+          }
+          
+          // Remove footer divider if it exists
+          if (component.structure.footerDivider) {
+            component.structure.footerDivider.element.remove();
+            component.structure.footerDivider = null;
+          }
+        }
+        
+        return component;
+      },
+      
+      /**
+       * Checks if the dialog has dividers
+       * @returns Whether the dialog has dividers
+       */
+      hasDivider() {
+        return component.structure.headerDivider !== null;
+      }
+    }
+  };
+};
+
+
 /**
  * Adds button to dialog footer
  * @param footer Footer element
@@ -157,7 +309,7 @@ export const withStructure = (config: DialogConfig) => component => {
 const addButton = (footer: HTMLElement, buttonConfig: DialogButton, component: any) => {
   const {
     text,
-    variant = BUTTON_VARIANTS.TEXT,
+    variant = 'text', // Using string literal directly instead of BUTTON_VARIANTS.TEXT
     onClick,
     closeDialog = true,
     autofocus = false,
@@ -170,26 +322,32 @@ const addButton = (footer: HTMLElement, buttonConfig: DialogButton, component: a
     ...attrs
   });
   
-  // Add click handler
+  // Button click handler with event-based communication
   button.on('click', event => {
+    console.log('button click');
     let shouldClose = closeDialog;
     
     // Call onClick handler if provided
     if (typeof onClick === 'function') {
-      const result = onClick(event, component);
-      // If onClick returns false, don't close the dialog
-      if (result === false) {
-        shouldClose = false;
+      try {
+        const result = onClick(event, component);
+        if (result === false) {
+          shouldClose = false;
+        }
+      } catch (err) {
+        console.error('Error in onClick handler:', err);
       }
     }
     
-    // Close dialog if needed
+    // Close dialog if needed - using event-based communication
     if (shouldClose) {
-      component.events.trigger(DIALOG_EVENTS.CLOSE, { dialog: component });
+      if (component && component.emit) {
+        component.emit('dialog:close', { source: 'button', text });
+      }
     }
   });
   
-  // Set autofocus attribute if needed
+  // Set autofocus if needed
   if (autofocus) {
     button.element.setAttribute('autofocus', 'true');
   }
@@ -300,125 +458,154 @@ export const withVisibility = () => component => {
   function handleOverlayClick(e: MouseEvent) {
     // Only close if the click was directly on the overlay
     if (e.target === component.overlay) {
-      component.events.trigger(DIALOG_EVENTS.CLOSE, { 
-        dialog: component,
-        originalEvent: e
-      });
+      visibility.close();
     }
   }
   
   function handleEscKey(e: KeyboardEvent) {
-    if (e.key === 'Escape' && component.visibility.isOpen()) {
-      component.events.trigger(DIALOG_EVENTS.CLOSE, { 
-        dialog: component,
-        originalEvent: e
-      });
+    if (e.key === 'Escape' && visibility.isOpen()) {
+      visibility.close();
     }
   }
   
   // Setup initial state
   if (isOpen) {
-    component.overlay.classList.add(`${component.getClass('dialog-overlay')}--visible`);
-    component.element.classList.add(`${component.getClass('dialog')}--visible`);
+    addClass(component.overlay, `${component.getClass('dialog-overlay')}--visible`);
+    addClass(component.element, `${component.getClass('dialog')}--visible`);
     
     // Setup focus trap and events
     trapFocus();
     setupEvents();
   }
   
-  return {
-    ...component,
-    visibility: {
-      open() {
-        // Don't do anything if already open
-        if (this.isOpen()) return;
-        
-        // Store the currently focused element
-        previouslyFocusedElement = document.activeElement as HTMLElement;
-        
-        // Trigger before open event
-        const beforeOpenEvent = { dialog: component, defaultPrevented: false, preventDefault: () => { beforeOpenEvent.defaultPrevented = true; } };
-        component.events.trigger(DIALOG_EVENTS.BEFORE_OPEN, beforeOpenEvent);
-        
-        // If event was prevented, don't open
-        if (beforeOpenEvent.defaultPrevented) return;
+  // Create visibility object with clean methods
+  const visibility = {
+    open() {
+      // Don't do anything if already open
+      if (this.isOpen()) return;
+      
+      // Store the currently focused element
+      previouslyFocusedElement = document.activeElement as HTMLElement;
+      
+      // Trigger before open event
+      const beforeOpenEvent = { 
+        dialog: component, 
+        defaultPrevented: false, 
+        preventDefault: () => { beforeOpenEvent.defaultPrevented = true; } 
+      };
+      
+      if (typeof component.emit === 'function') {
+        component.emit(DIALOG_EVENTS.BEFORE_OPEN, beforeOpenEvent);
+      }
+      
+      // If event was prevented, don't open
+      if (beforeOpenEvent.defaultPrevented) return;
+      
+      // Add to DOM if needed
+      if (component.overlay && !component.overlay.parentNode) {
+        const container = component.structure.container || document.body;
+        container.appendChild(component.overlay);
+      }
+      
+      // Show the overlay
+      addClass(component.overlay, `${component.getClass('dialog-overlay')}--visible`);
+      
+      // Show the dialog
+      setTimeout(() => {
+        addClass(component.element, `${component.getClass('dialog')}--visible`);
         
-        // Show the overlay
-        component.overlay.classList.add(`${component.getClass('dialog-overlay')}--visible`);
+        // Setup focus trap and events
+        trapFocus();
+        setupEvents();
         
-        // Show the dialog after a small delay to allow the overlay animation to start
-        setTimeout(() => {
-          component.element.classList.add(`${component.getClass('dialog')}--visible`);
-          
-          // Setup focus trap and events
-          trapFocus();
-          setupEvents();
+        // Trigger open event
+        if (typeof component.emit === 'function') {
+          component.emit(DIALOG_EVENTS.OPEN, { dialog: component });
           
-          // Trigger after open event after animation completes
           setTimeout(() => {
-            component.events.trigger(DIALOG_EVENTS.AFTER_OPEN, { dialog: component });
+            component.emit(DIALOG_EVENTS.AFTER_OPEN, { dialog: component });
           }, animationDuration);
-          
-          // Trigger open event
-          component.events.trigger(DIALOG_EVENTS.OPEN, { dialog: component });
-        }, 10);
-      },
+        }
+      }, 10);
+    },
+    
+    close() {
+      console.log('Dialog close method called');
       
-      close() {
-        // Don't do anything if already closed
-        if (!this.isOpen()) return;
-        
-        // Trigger before close event
-        const beforeCloseEvent = { dialog: component, defaultPrevented: false, preventDefault: () => { beforeCloseEvent.defaultPrevented = true; } };
-        component.events.trigger(DIALOG_EVENTS.BEFORE_CLOSE, beforeCloseEvent);
-        
-        // If event was prevented, don't close
-        if (beforeCloseEvent.defaultPrevented) return;
-        
-        // Hide the dialog
-        component.element.classList.remove(`${component.getClass('dialog')}--visible`);
-        
-        // Release focus trap and cleanup events
-        releaseFocus();
-        cleanupEvents();
-        
-        // Trigger close event
-        component.events.trigger(DIALOG_EVENTS.CLOSE, { dialog: component });
-        
-        // Hide the overlay after animation completes
-        setTimeout(() => {
-          component.overlay.classList.remove(`${component.getClass('dialog-overlay')}--visible`);
-          
-          // Trigger after close event
-          component.events.trigger(DIALOG_EVENTS.AFTER_CLOSE, { dialog: component });
-        }, animationDuration);
-      },
+      // Trigger before close event
+      const beforeCloseEvent = { 
+        dialog: component, 
+        defaultPrevented: false, 
+        preventDefault: () => { beforeCloseEvent.defaultPrevented = true; } 
+      };
       
-      toggle(open?: boolean) {
-        if (open === undefined) {
-          // Toggle based on current state
-          if (this.isOpen()) {
-            this.close();
-          } else {
-            this.open();
-          }
-        } else if (open) {
-          this.open();
-        } else {
-          this.close();
-        }
-      },
+      if (typeof component.emit === 'function') {
+        component.emit(DIALOG_EVENTS.BEFORE_CLOSE, beforeCloseEvent);
+      }
+      
+      // If event was prevented, don't close
+      if (beforeCloseEvent.defaultPrevented) {
+        console.log('Dialog close prevented by event handler');
+        return;
+      }
+      
+      // Get class names
+      const dialogVisibleClass = `${component.getClass('dialog')}--visible`;
+      const overlayVisibleClass = `${component.getClass('dialog-overlay')}--visible`;
       
-      isOpen() {
-        return component.element.classList.contains(`${component.getClass('dialog')}--visible`);
+      // Remove dialog visible class
+      removeClass(component.element, dialogVisibleClass);
+      
+      // Remove overlay visible class
+      removeClass(component.overlay, overlayVisibleClass);
+      
+      // Release focus and cleanup events
+      releaseFocus();
+      cleanupEvents();
+      
+      // Trigger close events
+      if (typeof component.emit === 'function') {
+        component.emit(DIALOG_EVENTS.CLOSE, { dialog: component });
+      }
+      
+      // Remove from DOM after animation completes
+      setTimeout(() => {
+        if (component.overlay && component.overlay.parentNode) {
+          component.overlay.parentNode.removeChild(component.overlay);
+        }
+        
+        if (typeof component.emit === 'function') {
+          component.emit(DIALOG_EVENTS.AFTER_CLOSE, { dialog: component });
+        }
+      }, animationDuration);
+    },
+    
+    toggle(open?: boolean) {
+      if (open === undefined) {
+        this.isOpen() ? this.close() : this.open();
+      } else if (open) {
+        this.open();
+      } else {
+        this.close();
       }
     },
     
-    focus: {
-      trapFocus,
-      releaseFocus
+    isOpen() {
+      return component.element.classList.contains(`${component.getClass('dialog')}--visible`);
     }
   };
+  
+  // Set up event listener for the dialog:close event
+  if (component && component.on) {
+    component.on('dialog:close', () => {
+      visibility.close();
+    });
+  }
+  
+  return {
+    ...component,
+    visibility
+  };
 };
 
 /**
@@ -558,9 +745,9 @@ export const withButtons = () => component => {
           footer.classList.add(component.getClass('dialog-footer'));
           
           // Apply footer alignment
-          const alignment = component.config.footerAlignment || DIALOG_FOOTER_ALIGNMENTS.RIGHT;
-          if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
-            footer.classList.add(`${component.getClass('dialog-footer')}--${alignment}`);
+          const alignment = component.config.footerAlignment || 'right';
+          if (alignment !== 'right') {
+            addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
           }
           
           component.element.appendChild(footer);
@@ -614,19 +801,22 @@ export const withButtons = () => component => {
        * Sets footer alignment
        * @param alignment Footer alignment
        */
-      setFooterAlignment(alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) {
+      setFooterAlignment(alignment: string) {
         if (!component.structure.footer) return;
         
+        // Define all possible alignments
+        const ALL_ALIGNMENTS = ['right', 'left', 'center', 'space-between'];
+        
         // Remove existing alignment classes
-        Object.values(DIALOG_FOOTER_ALIGNMENTS).forEach(align => {
-          if (align !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
-            component.structure.footer.classList.remove(`${component.getClass('dialog-footer')}--${align}`);
+        ALL_ALIGNMENTS.forEach(align => {
+          if (align !== 'right') {
+            removeClass(component.structure.footer, `${component.getClass('dialog-footer')}--${align}`);
           }
         });
         
         // Add new alignment class if not right (default)
-        if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
-          component.structure.footer.classList.add(`${component.getClass('dialog-footer')}--${alignment}`);
+        if (alignment !== 'right') {
+          addClass(component.structure.footer, `${component.getClass('dialog-footer')}--${alignment}`);
         }
       }
     }
@@ -645,15 +835,18 @@ export const withSize = () => component => {
        * Sets dialog size
        * @param size Size variant
        */
-      setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
+      setSize(size: string) {
+        // Define all possible sizes
+        const ALL_SIZES = ['small', 'medium', 'large', 'fullwidth', 'fullscreen'];
+        
         // Remove existing size classes
-        Object.values(DIALOG_SIZES).forEach(sizeValue => {
-          component.element.classList.remove(`${component.getClass('dialog')}--${sizeValue}`);
+        ALL_SIZES.forEach(sizeValue => {
+          removeClass(component.element, `${component.getClass('dialog')}--${sizeValue}`);
         });
         
         // Add new size class if not medium (default)
-        if (size !== DIALOG_SIZES.MEDIUM) {
-          component.element.classList.add(`${component.getClass('dialog')}--${size}`);
+        if (size !== 'medium') {
+          addClass(component.element, `${component.getClass('dialog')}--${size}`);
         }
       }
     }
@@ -674,9 +867,10 @@ export const withConfirm = () => component => {
           message,
           confirmText = 'Yes',
           cancelText = 'No',
-          confirmVariant = BUTTON_VARIANTS.FILLED,
-          cancelVariant = BUTTON_VARIANTS.TEXT,
-          size = DIALOG_SIZES.SMALL
+          // Use string literals directly
+          confirmVariant = 'filled',
+          cancelVariant = 'text',
+          size = 'small'
         } = options;
         
         // Set dialog properties