mtrl 0.2.2 → 0.2.3

package/src/components/dialog/api.ts

@@ -0,0 +1,283 @@
+// src/components/dialog/api.ts
+import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions } from './types';
+import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+
+interface ApiOptions {
+  visibility: {
+    open: () => void;
+    close: () => void;
+    toggle: (open?: boolean) => void;
+    isOpen: () => boolean;
+  };
+  content: {
+    setTitle: (title: string) => void;
+    getTitle: () => string;
+    setSubtitle: (subtitle: string) => void;
+    getSubtitle: () => string;
+    setContent: (content: string) => void;
+    getContent: () => string;
+    getHeaderElement: () => HTMLElement | null;
+    getContentElement: () => HTMLElement | null;
+    getFooterElement: () => HTMLElement | null;
+  };
+  buttons: {
+    addButton: (button: DialogButton) => void;
+    removeButton: (indexOrText: number | string) => void;
+    getButtons: () => DialogButton[];
+    setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => void;
+  };
+  focus: {
+    trapFocus: () => void;
+    releaseFocus: () => void;
+  };
+  size: {
+    setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => void;
+  };
+  events: {
+    on: (event: string, handler: Function) => void;
+    off: (event: string, handler: Function) => void;
+    trigger: (event: string, data: any) => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  overlay: HTMLElement;
+  confirm?: (options: DialogConfirmOptions) => Promise<boolean>;
+}
+
+/**
+ * Enhances a dialog component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Dialog component
+ */
+export const withAPI = (options: ApiOptions) => 
+  (component: ComponentWithElements): DialogComponent => ({
+    ...component as any,
+    
+    /**
+     * Opens the dialog
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    open() {
+      options.visibility.open();
+      return this;
+    },
+    
+    /**
+     * Closes the dialog
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    close() {
+      options.visibility.close();
+      return this;
+    },
+    
+    /**
+     * Toggles dialog open/closed state
+     * @param {boolean} [open] - Optional flag to force open state
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    toggle(open?: boolean) {
+      options.visibility.toggle(open);
+      return this;
+    },
+    
+    /**
+     * Checks if dialog is open
+     * @returns {boolean} True if dialog is open
+     */
+    isOpen() {
+      return options.visibility.isOpen();
+    },
+    
+    /**
+     * Sets dialog title
+     * @param {string} title - Title text
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    setTitle(title: string) {
+      options.content.setTitle(title);
+      return this;
+    },
+    
+    /**
+     * Gets dialog title
+     * @returns {string} Title text
+     */
+    getTitle() {
+      return options.content.getTitle();
+    },
+    
+    /**
+     * Sets dialog subtitle
+     * @param {string} subtitle - Subtitle text
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    setSubtitle(subtitle: string) {
+      options.content.setSubtitle(subtitle);
+      return this;
+    },
+    
+    /**
+     * Gets dialog subtitle
+     * @returns {string} Subtitle text
+     */
+    getSubtitle() {
+      return options.content.getSubtitle();
+    },
+    
+    /**
+     * Sets dialog content
+     * @param {string} content - Content HTML
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    setContent(content: string) {
+      options.content.setContent(content);
+      return this;
+    },
+    
+    /**
+     * Gets dialog content
+     * @returns {string} Content HTML
+     */
+    getContent() {
+      return options.content.getContent();
+    },
+    
+    /**
+     * Adds a button to the dialog footer
+     * @param {DialogButton} button - Button configuration
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    addButton(button: DialogButton) {
+      options.buttons.addButton(button);
+      return this;
+    },
+    
+    /**
+     * Removes a button by index or text
+     * @param {number|string} indexOrText - Button index or text
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    removeButton(indexOrText: number | string) {
+      options.buttons.removeButton(indexOrText);
+      return this;
+    },
+    
+    /**
+     * Gets all footer buttons
+     * @returns {DialogButton[]} Array of button configurations
+     */
+    getButtons() {
+      return options.buttons.getButtons();
+    },
+    
+    /**
+     * Sets footer alignment
+     * @param {string} alignment - Footer alignment
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    setFooterAlignment(alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) {
+      options.buttons.setFooterAlignment(alignment);
+      return this;
+    },
+    
+    /**
+     * Sets dialog size
+     * @param {string} size - Size variant
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
+      options.size.setSize(size);
+      return this;
+    },
+    
+    /**
+     * Adds event listener
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    on(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+      options.events.on(event, handler);
+      return this;
+    },
+    
+    /**
+     * Removes event listener
+     * @param {string} event - Event name
+     * @param {Function} handler - Event handler
+     * @returns {DialogComponent} Dialog component instance for chaining
+     */
+    off(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+      options.events.off(event, handler);
+      return this;
+    },
+    
+    /**
+     * Gets dialog header element
+     * @returns {HTMLElement|null} Header element
+     */
+    getHeaderElement() {
+      return options.content.getHeaderElement();
+    },
+    
+    /**
+     * Gets dialog content element
+     * @returns {HTMLElement|null} Content element
+     */
+    getContentElement() {
+      return options.content.getContentElement();
+    },
+    
+    /**
+     * Gets dialog footer element
+     * @returns {HTMLElement|null} Footer element
+     */
+    getFooterElement() {
+      return options.content.getFooterElement();
+    },
+    
+    /**
+     * Creates a confirmation dialog with Yes/No buttons
+     * @param {DialogConfirmOptions} options - Confirmation dialog options
+     * @returns {Promise<boolean>} Promise resolving to user choice (true for confirm, false for cancel)
+     */
+    confirm(options?: DialogConfirmOptions) {
+      if (component.confirm) {
+        return component.confirm(options || { message: 'Are you sure?' });
+      }
+      
+      // Fallback if confirm feature is not available
+      return Promise.resolve(false);
+    },
+    
+    /**
+     * Destroys the dialog and removes it from DOM
+     */
+    destroy() {
+      // Close the dialog first
+      if (this.isOpen()) {
+        this.close();
+      }
+      
+      // Small delay to allow animations to complete
+      setTimeout(() => {
+        options.lifecycle.destroy();
+        
+        // Remove the overlay from DOM
+        if (component.overlay && component.overlay.parentNode) {
+          component.overlay.parentNode.removeChild(component.overlay);
+        }
+      }, 150);
+    },
+    
+    // Pass through element references
+    element: component.element,
+    overlay: component.overlay
+  });

package/src/components/dialog/config.ts

@@ -0,0 +1,113 @@
+// src/components/dialog/config.ts
+import { 
+  createComponentConfig, 
+  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,
+  open: false,
+  closeButton: true,
+  closeOnOverlayClick: true,
+  closeOnEscape: true,
+  modal: true,
+  autofocus: true,
+  trapFocus: true,
+  headerDivider: false,
+  footerDivider: false,
+  animationDuration: 150,
+  buttons: []
+};
+
+/**
+ * Creates the base configuration for Dialog component
+ * @param {DialogConfig} config - User provided configuration
+ * @returns {DialogConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: DialogConfig = {}): DialogConfig => 
+  createComponentConfig(defaultConfig, config, 'dialog') as DialogConfig;
+
+/**
+ * Generates element configuration for the Dialog component
+ * @param {DialogConfig} config - Dialog configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: DialogConfig) => {
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs: {},
+    className: config.class
+  });
+};
+
+/**
+ * Generates element configuration for the Dialog overlay
+ * @param {DialogConfig} config - Dialog configuration
+ * @returns {Object} Element configuration object for overlay
+ */
+export const getOverlayConfig = (config: DialogConfig) => {
+  return {
+    tag: 'div',
+    attrs: {
+      'aria-modal': config.modal === false ? false : true,
+      'role': 'dialog',
+      'tabindex': -1
+    },
+    className: ''
+  };
+};
+
+/**
+ * Creates API configuration for the Dialog component
+ * @param {Object} comp - Component with dialog features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  visibility: {
+    open: () => comp.visibility.open(),
+    close: () => comp.visibility.close(),
+    toggle: (visible?: boolean) => comp.visibility.toggle(visible),
+    isOpen: () => comp.visibility.isOpen()
+  },
+  content: {
+    setTitle: (title: string) => comp.content.setTitle(title),
+    getTitle: () => comp.content.getTitle(),
+    setSubtitle: (subtitle: string) => comp.content.setSubtitle(subtitle),
+    getSubtitle: () => comp.content.getSubtitle(),
+    setContent: (content: string) => comp.content.setContent(content),
+    getContent: () => comp.content.getContent(),
+    getHeaderElement: () => comp.content.getHeaderElement(),
+    getContentElement: () => comp.content.getContentElement(),
+    getFooterElement: () => comp.content.getFooterElement()
+  },
+  buttons: {
+    addButton: (button) => comp.buttons.addButton(button),
+    removeButton: (indexOrText) => comp.buttons.removeButton(indexOrText),
+    getButtons: () => comp.buttons.getButtons(),
+    setFooterAlignment: (alignment) => comp.buttons.setFooterAlignment(alignment)
+  },
+  focus: {
+    trapFocus: () => comp.focus.trapFocus(),
+    releaseFocus: () => comp.focus.releaseFocus()
+  },
+  size: {
+    setSize: (size) => comp.size.setSize(size)
+  },
+  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)
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  }
+});
+
+export default defaultConfig;

package/src/components/dialog/constants.ts

@@ -0,0 +1,32 @@
+// src/components/dialog/constants.ts
+
+export const DIALOG_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  FULLWIDTH: 'fullwidth',
+  FULLSCREEN: 'fullscreen'
+};
+
+export const DIALOG_ANIMATIONS = {
+  SCALE: 'scale',
+  SLIDE_UP: 'slide-up',
+  SLIDE_DOWN: 'slide-down',
+  FADE: 'fade'
+};
+
+export const DIALOG_FOOTER_ALIGNMENTS = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  CENTER: 'center',
+  SPACE_BETWEEN: 'space-between'
+};
+
+export const DIALOG_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  BEFORE_OPEN: 'beforeopen',
+  BEFORE_CLOSE: 'beforeclose',
+  AFTER_OPEN: 'afteropen',
+  AFTER_CLOSE: 'afterclose'
+};

package/src/components/dialog/dialog.ts

@@ -0,0 +1,56 @@
+// src/components/dialog/dialog.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { withEvents, withLifecycle } from '../../core/compose/features';
+import { 
+  withStructure, 
+  withVisibility, 
+  withContent, 
+  withButtons, 
+  withSize,
+  withConfirm
+} from './features';
+import { withAPI } from './api';
+import { DialogConfig, DialogComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Dialog component
+ * @param {DialogConfig} config - Dialog configuration object
+ * @returns {DialogComponent} Dialog component instance
+ */
+const createDialog = (config: DialogConfig = {}): DialogComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const dialog = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withStructure(baseConfig),
+      withVisibility(),
+      withContent(),
+      withButtons(),
+      withSize(),
+      withConfirm(),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    // Register event handlers from config
+    if (baseConfig.on) {
+      Object.entries(baseConfig.on).forEach(([event, handler]) => {
+        if (typeof handler === 'function') {
+          dialog.on(event, handler);
+        }
+      });
+    }
+
+    return dialog;
+  } catch (error) {
+    console.error('Dialog creation error:', error);
+    throw new Error(`Failed to create dialog: ${(error as Error).message}`);
+  }
+};
+
+export default createDialog;