mtrl 0.2.5 → 0.2.7

package/src/components/dialog/api.ts

@@ -1,6 +1,7 @@
-// src/components/dialog/api.ts
+// src/components/dialog/api.ts (partial update)
 import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions } from './types';
 import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+import { removeClass } from '../../core/dom/classes';
 
 interface ApiOptions {
   visibility: {
@@ -33,6 +34,10 @@ interface ApiOptions {
   size: {
     setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => void;
   };
+  dividers: {
+    toggleHeaderDivider: (show: boolean) => void;
+    toggleFooterDivider: (show: boolean) => void;
+  };
   events: {
     on: (event: string, handler: Function) => void;
     off: (event: string, handler: Function) => void;
@@ -46,6 +51,7 @@ interface ApiOptions {
 interface ComponentWithElements {
   element: HTMLElement;
   overlay: HTMLElement;
+  getClass: (name: string) => string;
   confirm?: (options: DialogConfirmOptions) => Promise<boolean>;
 }
 
@@ -130,7 +136,7 @@ export const withAPI = (options: ApiOptions) =>
     getSubtitle() {
       return options.content.getSubtitle();
     },
-    
+
     /**
      * Sets dialog content
      * @param {string} content - Content HTML
@@ -186,7 +192,25 @@ export const withAPI = (options: ApiOptions) =>
       options.buttons.setFooterAlignment(alignment);
       return this;
     },
+
+    /**
+     * Shows or hides the divider
+     * @param {boolean} show - Whether to show the divider
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    toggleDivider(show: boolean) {
+      options.divider.toggleDivider(show);
+      return this;
+    },
     
+    /**
+     * Checks if the dialog has a divider
+     * @returns {boolean} True if the dialog has a divider
+     */
+    hasDivider() {
+      return options.divider.hasDivider();
+    },
+
     /**
      * Sets dialog size
      * @param {string} size - Size variant
@@ -261,20 +285,31 @@ export const withAPI = (options: ApiOptions) =>
      * Destroys the dialog and removes it from DOM
      */
     destroy() {
-      // Close the dialog first
+      // Close the dialog first if it's open
+      console.log('destroy', this.isOpen());
       if (this.isOpen()) {
-        this.close();
-      }
-      
-      // Small delay to allow animations to complete
-      setTimeout(() => {
-        options.lifecycle.destroy();
+        // We'll handle removal directly rather than calling this.close()
+        // to avoid animation delay in critical cleanup
+        const dialogVisibleClass = `${component.getClass('dialog')}--visible`;
+        const overlayVisibleClass = `${component.getClass('dialog-overlay')}--visible`;
         
-        // Remove the overlay from DOM
-        if (component.overlay && component.overlay.parentNode) {
-          component.overlay.parentNode.removeChild(component.overlay);
+        // Remove visibility classes using core utilities
+        removeClass(component.element, dialogVisibleClass);
+        removeClass(component.overlay, overlayVisibleClass);
+        
+        // Call any cleanup needed
+        if (options.focus && options.focus.releaseFocus) {
+          options.focus.releaseFocus();
         }
-      }, 150);
+      }
+      
+      // Call lifecycle destroy
+      options.lifecycle.destroy();
+      
+      // Immediately remove from DOM
+      if (component.overlay && component.overlay.parentNode) {
+        component.overlay.parentNode.removeChild(component.overlay);
+      }
     },
     
     // Pass through element references

package/src/components/dialog/config.ts

@@ -20,8 +20,7 @@ export const defaultConfig: DialogConfig = {
   modal: true,
   autofocus: true,
   trapFocus: true,
-  headerDivider: false,
-  footerDivider: false,
+  divider: false,  // Default to no divider
   animationDuration: 150,
   buttons: []
 };
@@ -100,10 +99,15 @@ export const getApiConfig = (comp) => ({
   size: {
     setSize: (size) => comp.size.setSize(size)
   },
+  divider: {
+    toggleDivider: (show) => comp.divider.toggleDivider(show),
+    hasDivider: () => comp.divider.hasDivider()
+  },
   events: {
-    on: (event, handler) => comp.events.on(event, handler),
-    off: (event, handler) => comp.events.off(event, handler),
-    trigger: (event, data) => comp.events.trigger(event, data)
+    // Use the direct component methods from withEvents()
+    on: (event, handler) => comp.on(event, handler),
+    off: (event, handler) => comp.off(event, handler),
+    trigger: (event, data) => comp.emit(event, data)
   },
   lifecycle: {
     destroy: () => comp.lifecycle.destroy()

package/src/components/dialog/dialog.ts

@@ -8,7 +8,8 @@ import {
   withContent, 
   withButtons, 
   withSize,
-  withConfirm
+  withConfirm,
+  withDivider // Simplified to single divider feature
 } from './features';
 import { withAPI } from './api';
 import { DialogConfig, DialogComponent } from './types';
@@ -23,15 +24,17 @@ const createDialog = (config: DialogConfig = {}): DialogComponent => {
   const baseConfig = createBaseConfig(config);
 
   try {
+    // Maintain original order but setup event-based communication
     const dialog = pipe(
       createBase,
       withEvents(),
       withElement(getElementConfig(baseConfig)),
-      withStructure(baseConfig),
-      withVisibility(),
+      withStructure(baseConfig),  // Keep structure first to create overlay
+      withVisibility(),           // Then add visibility features
       withContent(),
       withButtons(),
       withSize(),
+      withDivider(),              // Simplified divider feature
       withConfirm(),
       withLifecycle(),
       comp => withAPI(getApiConfig(comp))(comp)