mtrl 0.2.6 → 0.2.7

package/src/components/dialog/features.ts

@@ -1,29 +1,34 @@
-// 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 createButton from '../button';
+import { createDivider } from '../divider'; // Import the divider component
 import { BUTTON_VARIANTS } from '../button/constants';
+import { addClass, removeClass, hasClass } from '../../core/dom/classes';
 
 /**
- * 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 +68,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);
     }
     
@@ -90,7 +104,7 @@ export const withStructure = (config: DialogConfig) => component => {
     // 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}`);
+      addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
     }
     
     // Add buttons if provided
@@ -101,36 +115,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 to overlay
-  overlay.appendChild(component.element);
-  
-  // Add dialog classes
-  component.element.classList.add(component.getClass('dialog'));
+  // Add dialog classes to the main component element
+  addClass(component.element, component.getClass('dialog'));
   
   // Apply size class
   const size = config.size || DIALOG_SIZES.MEDIUM;
   if (size !== DIALOG_SIZES.MEDIUM) {
-    component.element.classList.add(`${component.getClass('dialog')}--${size}`);
+    addClass(component.element, `${component.getClass('dialog')}--${size}`);
   }
   
   // Apply animation class
   const animation = config.animation || DIALOG_ANIMATIONS.SCALE;
   if (animation !== DIALOG_ANIMATIONS.SCALE) {
-    component.element.classList.add(`${component.getClass('dialog')}--${animation}`);
+    addClass(component.element, `${component.getClass('dialog')}--${animation}`);
+  }
+  
+  // Add header to dialog
+  component.element.appendChild(header);
+  
+  // Create divider elements if configured
+  let headerDivider = null;
+  let footerDivider = null;
+  
+  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'));
+    }
+  }
+  
+  // 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 +191,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
@@ -170,26 +295,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 +431,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`;
+      
+      // Remove dialog visible class
+      removeClass(component.element, dialogVisibleClass);
+      
+      // Remove overlay visible class
+      removeClass(component.overlay, overlayVisibleClass);
+      
+      // Release focus and cleanup events
+      releaseFocus();
+      cleanupEvents();
       
-      isOpen() {
-        return component.element.classList.contains(`${component.getClass('dialog')}--visible`);
+      // 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
+  };
 };
 
 /**
@@ -560,7 +720,7 @@ export const withButtons = () => component => {
           // 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}`);
+            addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
           }
           
           component.element.appendChild(footer);
@@ -620,13 +780,13 @@ export const withButtons = () => component => {
         // 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}`);
+            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}`);
+          addClass(component.structure.footer, `${component.getClass('dialog-footer')}--${alignment}`);
         }
       }
     }
@@ -648,12 +808,12 @@ export const withSize = () => component => {
       setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
         // Remove existing size classes
         Object.values(DIALOG_SIZES).forEach(sizeValue => {
-          component.element.classList.remove(`${component.getClass('dialog')}--${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}`);
+          addClass(component.element, `${component.getClass('dialog')}--${size}`);
         }
       }
     }

package/src/components/dialog/types.ts

@@ -54,10 +54,7 @@ export interface DialogConfig {
   buttons?: DialogButton[];
   
   /** Whether to show a divider between header and content */
-  headerDivider?: boolean;
-  
-  /** Whether to show a divider between content and footer */
-  footerDivider?: boolean;
+  divider?: boolean;
   
   /** Dialog z-index (defaults to 1000) */
   zIndex?: number;
@@ -187,6 +184,12 @@ export interface DialogComponent {
   /** Gets dialog footer element */
   getFooterElement: () => HTMLElement | null;
   
+  /** Shows or hides the divider */
+  toggleDivider: (show: boolean) => DialogComponent;
+  
+  /** Checks if the dialog has a divider */
+  hasDivider: () => boolean;
+  
   /** Creates a confirmation dialog with Yes/No buttons */
   confirm: (options?: DialogConfirmOptions) => Promise<boolean>;
   

package/src/components/divider/_styles.scss

@@ -0,0 +1,57 @@
+// src/components/divider/_styles.scss
+
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-divider';
+
+.#{$component} {
+  // Base styles
+  display: block;
+  border: none;
+  margin: 0;
+  padding: 0;
+  background-color: t.color('outline-variant');
+  
+  // Orientation variants
+  &--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+  
+  &--vertical {
+    height: 100%;
+    width: 1px;
+    display: inline-block;
+  }
+  
+  // Variant styles (these set the base for the variants, specific insets are handled via JS)
+  &--full-width {
+    width: 100%;
+  }
+  
+  &--inset {
+    // Base class for inset styles - specific margins are set via JS
+  }
+  
+  &--middle-inset {
+    // Base class for middle inset styles - specific margins are set via JS
+  }
+  
+  // Parent-child relationship context
+  .#{base.$prefix}-list & {
+    margin: 8px 0;
+  }
+  
+  .#{base.$prefix}-card & {
+    margin: 8px 0;
+  }
+  
+  // Dark theme support
+  :root[data-theme-mode="dark"] & {
+    // Dark theme color is handled through the CSS variable in theme
+  }
+}