mtrl 0.2.6 → 0.2.8

package/src/components/dialog/api.ts

@@ -1,6 +1,6 @@
-// src/components/dialog/api.ts
-import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions } from './types';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+// src/components/dialog/api.ts (partial update)
+import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions, DialogFooterAlignment, DialogSize, DialogEventType } from './types';
+import { removeClass } from '../../core/dom/classes';
 
 interface ApiOptions {
   visibility: {
@@ -24,14 +24,18 @@ interface ApiOptions {
     addButton: (button: DialogButton) => void;
     removeButton: (indexOrText: number | string) => void;
     getButtons: () => DialogButton[];
-    setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => void;
+    setFooterAlignment: (alignment: DialogFooterAlignment | string) => void;
   };
   focus: {
     trapFocus: () => void;
     releaseFocus: () => void;
   };
   size: {
-    setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => void;
+    setSize: (size: DialogSize | string) => void;
+  };
+  dividers: {
+    toggleHeaderDivider: (show: boolean) => void;
+    toggleFooterDivider: (show: boolean) => void;
   };
   events: {
     on: (event: string, handler: Function) => void;
@@ -46,6 +50,7 @@ interface ApiOptions {
 interface ComponentWithElements {
   element: HTMLElement;
   overlay: HTMLElement;
+  getClass: (name: string) => string;
   confirm?: (options: DialogConfirmOptions) => Promise<boolean>;
 }
 
@@ -130,7 +135,7 @@ export const withAPI = (options: ApiOptions) =>
     getSubtitle() {
       return options.content.getSubtitle();
     },
-    
+
     /**
      * Sets dialog content
      * @param {string} content - Content HTML
@@ -182,17 +187,35 @@ export const withAPI = (options: ApiOptions) =>
      * @param {string} alignment - Footer alignment
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    setFooterAlignment(alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) {
+    setFooterAlignment(alignment: DialogFooterAlignment | string) {
       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
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
+    setSize(size: DialogSize | string) {
       options.size.setSize(size);
       return this;
     },
@@ -203,7 +226,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {Function} handler - Event handler
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    on(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+    on(event: DialogEventType | string, handler: (event: DialogEvent) => void) {
       options.events.on(event, handler);
       return this;
     },
@@ -214,7 +237,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {Function} handler - Event handler
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    off(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+    off(event: DialogEventType | string, handler: (event: DialogEvent) => void) {
       options.events.off(event, handler);
       return this;
     },
@@ -261,20 +284,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

@@ -4,15 +4,14 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { DialogConfig } from './types';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS } from './constants';
 
 /**
  * Default configuration for the Dialog component
  */
 export const defaultConfig: DialogConfig = {
-  size: DIALOG_SIZES.MEDIUM,
-  animation: DIALOG_ANIMATIONS.SCALE,
-  footerAlignment: DIALOG_FOOTER_ALIGNMENTS.RIGHT,
+  size: 'medium',
+  animation: 'scale',
+  footerAlignment: 'right',
   open: false,
   closeButton: true,
   closeOnOverlayClick: true,
@@ -20,8 +19,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 +98,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)