mtrl 0.2.6 → 0.2.8

package/src/components/dialog/index.ts

@@ -1,15 +1,45 @@
 // src/components/dialog/index.ts
 export { default } from './dialog';
-export { 
-  DIALOG_SIZES, 
-  DIALOG_ANIMATIONS, 
-  DIALOG_FOOTER_ALIGNMENTS, 
-  DIALOG_EVENTS 
-} from './constants';
 export { 
   DialogConfig, 
   DialogComponent, 
   DialogButton, 
   DialogEvent, 
-  DialogConfirmOptions 
-} from './types';
+  DialogConfirmOptions,
+  DialogSize,
+  DialogAnimation,
+  DialogFooterAlignment,
+  DialogEventType
+} from './types';
+
+// Export common dialog constants for convenience and backward compatibility
+export const DIALOG_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  FULLWIDTH: 'fullwidth',
+  FULLSCREEN: 'fullscreen'
+} as const;
+
+export const DIALOG_ANIMATIONS = {
+  SCALE: 'scale',
+  SLIDE_UP: 'slide-up',
+  SLIDE_DOWN: 'slide-down',
+  FADE: 'fade'
+} as const;
+
+export const DIALOG_FOOTER_ALIGNMENTS = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  CENTER: 'center',
+  SPACE_BETWEEN: 'space-between'
+} as const;
+
+export const DIALOG_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  BEFORE_OPEN: 'beforeopen',
+  BEFORE_CLOSE: 'beforeclose',
+  AFTER_OPEN: 'afteropen',
+  AFTER_CLOSE: 'afterclose'
+} as const;

package/src/components/dialog/types.ts

@@ -1,5 +1,28 @@
 // src/components/dialog/types.ts
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+
+/**
+ * Dialog size types
+ * @category Components
+ */
+export type DialogSize = 'small' | 'medium' | 'large' | 'fullwidth' | 'fullscreen';
+
+/**
+ * Dialog animation types
+ * @category Components
+ */
+export type DialogAnimation = 'scale' | 'slide-up' | 'slide-down' | 'fade';
+
+/**
+ * Dialog footer alignment types
+ * @category Components
+ */
+export type DialogFooterAlignment = 'right' | 'left' | 'center' | 'space-between';
+
+/**
+ * Dialog event types
+ * @category Components
+ */
+export type DialogEventType = 'open' | 'close' | 'beforeopen' | 'beforeclose' | 'afteropen' | 'afterclose';
 
 /**
  * Configuration interface for the Dialog component
@@ -21,13 +44,13 @@ export interface DialogConfig {
   class?: string;
   
   /** Dialog size variant */
-  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+  size?: DialogSize | string;
   
   /** Dialog animation variant */
-  animation?: keyof typeof DIALOG_ANIMATIONS | DIALOG_ANIMATIONS;
+  animation?: DialogAnimation | string;
   
   /** Footer buttons alignment */
-  footerAlignment?: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS;
+  footerAlignment?: DialogFooterAlignment | string;
   
   /** Whether dialog is initially open */
   open?: boolean;
@@ -54,10 +77,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;
@@ -67,7 +87,7 @@ export interface DialogConfig {
   
   /** Event handlers for dialog events */
   on?: {
-    [key in keyof typeof DIALOG_EVENTS]?: (event: DialogEvent) => void;
+    [key in DialogEventType]?: (event: DialogEvent) => void;
   };
 }
 
@@ -167,16 +187,16 @@ export interface DialogComponent {
   getButtons: () => DialogButton[];
   
   /** Sets footer alignment */
-  setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => DialogComponent;
+  setFooterAlignment: (alignment: DialogFooterAlignment | string) => DialogComponent;
   
   /** Sets dialog size */
-  setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => DialogComponent;
+  setSize: (size: DialogSize | string) => DialogComponent;
   
   /** Adds event listener */
-  on: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  on: (event: DialogEventType | string, handler: (event: DialogEvent) => void) => DialogComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) => DialogComponent;
+  off: (event: DialogEventType | string, handler: (event: DialogEvent) => void) => DialogComponent;
   
   /** Gets dialog header element */
   getHeaderElement: () => HTMLElement | null;
@@ -187,6 +207,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>;
   
@@ -217,5 +243,5 @@ export interface DialogConfirmOptions {
   cancelVariant?: string;
   
   /** Dialog size */
-  size?: keyof typeof DIALOG_SIZES | DIALOG_SIZES;
+  size?: DialogSize | string;
 }

package/src/components/divider/config.ts

@@ -0,0 +1,81 @@
+// src/components/divider/config.ts
+import { createComponentConfig } from '../../core/config/component-config';
+
+/**
+ * Configuration options for divider components
+ */
+export interface DividerConfig {
+  /**
+   * CSS class prefix (defaults to 'mtrl')
+   */
+  prefix?: string;
+  
+  /**
+   * CSS class to add to the divider
+   */
+  class?: string;
+  
+  /**
+   * Orientation of the divider ('horizontal' or 'vertical')
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  
+  /**
+   * Variant of the divider ('full-width' or 'inset')
+   * @default 'full-width'
+   */
+  variant?: 'full-width' | 'inset' | 'middle-inset';
+  
+  /**
+   * Custom inset value (left margin for horizontal, top margin for vertical)
+   * @default 16 for 'inset', undefined for 'full-width'
+   */
+  insetStart?: number;
+  
+  /**
+   * Custom inset end value (right margin for horizontal, bottom margin for vertical)
+   * @default 0 for 'inset', undefined for 'full-width'
+   */
+  insetEnd?: number;
+  
+  /**
+   * Color of the divider (uses 'outline-variant' from theme by default)
+   */
+  color?: string;
+  
+  /**
+   * Thickness of the divider in pixels
+   * @default 1
+   */
+  thickness?: number;
+  
+  /**
+   * Used internally for component composition
+   * @private
+   */
+  componentName?: string;
+}
+
+/**
+ * Default configuration for dividers
+ */
+export const defaultConfig: Partial<DividerConfig> = {
+  orientation: 'horizontal',
+  variant: 'full-width',
+  thickness: 1
+};
+
+/**
+ * Creates a base configuration object for divider
+ * 
+ * @param config - User provided configuration
+ * @returns Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: DividerConfig = {}): DividerConfig => {
+  return createComponentConfig(
+    defaultConfig as DividerConfig,
+    config,
+    'divider'
+  );
+};

package/src/components/divider/divider.ts

@@ -0,0 +1,37 @@
+// src/components/divider/divider.ts
+import {
+  createBase,
+  withElement,
+  pipe,
+  withVariant
+} from '../../core/compose';
+import { PREFIX } from '../../core/config';
+import { DividerConfig, createBaseConfig } from './config';
+import { withOrientation, withInset, withStyle } from './features';
+import { DividerComponent } from './types';
+
+/**
+ * Creates a divider component
+ * 
+ * @param config - Divider configuration options
+ * @returns Divider component instance
+ */
+export const createDivider = (config: DividerConfig = {}): DividerComponent => {
+  // Process configuration
+  const processedConfig = createBaseConfig(config);
+  
+  // Create component through composition
+  return pipe(
+    createBase,
+    withElement({
+      tag: 'hr',
+      componentName: 'divider',
+      prefix: processedConfig.prefix || PREFIX,
+      className: config.class
+    }),
+    withOrientation(processedConfig),
+    withVariant(processedConfig),
+    withInset(processedConfig),
+    withStyle(processedConfig)
+  )(processedConfig) as DividerComponent;
+};

package/src/components/divider/features.ts

@@ -0,0 +1,207 @@
+// src/components/divider/features.ts
+import { BaseComponent, ElementComponent } from '../../core/compose';
+import { DividerConfig } from './config';
+import { DividerComponent } from './types';
+
+/**
+ * Adds orientation functionality to divider
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with orientation capabilities
+ */
+export const withOrientation = (config: DividerConfig) => 
+  <C extends ElementComponent & BaseComponent>(component: C): C & Partial<DividerComponent> => {
+    const orientation = config.orientation || 'horizontal';
+    
+    // Apply the orientation class
+    component.element.classList.add(`${component.getClass('divider')}--${orientation}`);
+    
+    // Set styles based on orientation and thickness
+    const thickness = config.thickness || 1;
+    
+    if (orientation === 'horizontal') {
+      component.element.style.height = `${thickness}px`;
+      component.element.style.width = '100%';
+    } else {
+      component.element.style.width = `${thickness}px`;
+      component.element.style.height = '100%';
+    }
+    
+    return {
+      ...component,
+      
+      getOrientation() {
+        return orientation;
+      },
+      
+      setOrientation(newOrientation: 'horizontal' | 'vertical') {
+        // Remove existing orientation class
+        component.element.classList.remove(`${component.getClass('divider')}--${orientation}`);
+        
+        // Add new orientation class
+        component.element.classList.add(`${component.getClass('divider')}--${newOrientation}`);
+        
+        // Update styles
+        if (newOrientation === 'horizontal') {
+          component.element.style.height = `${thickness}px`;
+          component.element.style.width = '100%';
+          
+          // Reset vertical styles
+          component.element.style.marginTop = '';
+          component.element.style.marginBottom = '';
+        } else {
+          component.element.style.width = `${thickness}px`;
+          component.element.style.height = '100%';
+          
+          // Reset horizontal styles
+          component.element.style.marginLeft = '';
+          component.element.style.marginRight = '';
+        }
+        
+        return this as unknown as DividerComponent;
+      }
+    };
+  };
+
+/**
+ * Adds inset functionality to divider
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with inset capabilities
+ */
+export const withInset = (config: DividerConfig) => 
+  <C extends ElementComponent & Partial<DividerComponent>>(component: C): C & Partial<DividerComponent> => {
+    const variant = config.variant || 'full-width';
+    const orientation = config.orientation || 'horizontal';
+    
+    // Apply inset styles based on variant
+    if (variant === 'inset' || variant === 'middle-inset') {
+      if (orientation === 'horizontal') {
+        const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
+        const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
+        
+        component.element.style.marginLeft = `${insetStart}px`;
+        component.element.style.marginRight = `${insetEnd}px`;
+      } else {
+        const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
+        const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
+        
+        component.element.style.marginTop = `${insetStart}px`;
+        component.element.style.marginBottom = `${insetEnd}px`;
+      }
+    }
+    
+    return {
+      ...component,
+      
+      getVariant() {
+        return variant as 'full-width' | 'inset' | 'middle-inset';
+      },
+      
+      setVariant(newVariant: 'full-width' | 'inset' | 'middle-inset') {
+        // Remove existing variant class
+        component.element.classList.remove(`${component.getClass('divider')}--${variant}`);
+        
+        // Add new variant class
+        component.element.classList.add(`${component.getClass('divider')}--${newVariant}`);
+        
+        // Update styles
+        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
+        
+        if (newVariant === 'full-width') {
+          if (currentOrientation === 'horizontal') {
+            component.element.style.marginLeft = '';
+            component.element.style.marginRight = '';
+          } else {
+            component.element.style.marginTop = '';
+            component.element.style.marginBottom = '';
+          }
+        } else {
+          const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
+          const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (newVariant === 'middle-inset' ? 16 : 0);
+          
+          if (currentOrientation === 'horizontal') {
+            component.element.style.marginLeft = `${insetStart}px`;
+            component.element.style.marginRight = `${insetEnd}px`;
+          } else {
+            component.element.style.marginTop = `${insetStart}px`;
+            component.element.style.marginBottom = `${insetEnd}px`;
+          }
+        }
+        
+        return this as unknown as DividerComponent;
+      },
+      
+      setInset(insetStart?: number, insetEnd?: number) {
+        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
+        const currentVariant = component.getVariant ? component.getVariant() : variant;
+        
+        if (currentVariant !== 'full-width') {
+          if (currentOrientation === 'horizontal') {
+            if (insetStart !== undefined) {
+              component.element.style.marginLeft = `${insetStart}px`;
+            }
+            
+            if (insetEnd !== undefined) {
+              component.element.style.marginRight = `${insetEnd}px`;
+            }
+          } else {
+            if (insetStart !== undefined) {
+              component.element.style.marginTop = `${insetStart}px`;
+            }
+            
+            if (insetEnd !== undefined) {
+              component.element.style.marginBottom = `${insetEnd}px`;
+            }
+          }
+        }
+        
+        return this as unknown as DividerComponent;
+      }
+    };
+  };
+
+/**
+ * Adds style customization to divider
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with style capabilities
+ */
+export const withStyle = (config: DividerConfig) => 
+  <C extends ElementComponent & Partial<DividerComponent>>(component: C): C & Partial<DividerComponent> => {
+    // Apply custom color if provided
+    if (config.color) {
+      component.element.style.backgroundColor = config.color;
+    }
+    
+    // Apply thickness
+    const thickness = config.thickness || 1;
+    const orientation = config.orientation || 'horizontal';
+    
+    if (orientation === 'horizontal') {
+      component.element.style.height = `${thickness}px`;
+    } else {
+      component.element.style.width = `${thickness}px`;
+    }
+    
+    return {
+      ...component,
+      
+      setThickness(newThickness: number) {
+        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
+        
+        if (currentOrientation === 'horizontal') {
+          component.element.style.height = `${newThickness}px`;
+        } else {
+          component.element.style.width = `${newThickness}px`;
+        }
+        
+        return this as unknown as DividerComponent;
+      },
+      
+      setColor(color: string) {
+        component.element.style.backgroundColor = color;
+        return this as unknown as DividerComponent;
+      }
+    };
+  };

package/src/components/divider/index.ts

@@ -0,0 +1,9 @@
+// src/components/divider/index.ts
+
+// Use a more explicit export to avoid bundler confusion
+import { createDivider } from './divider';
+export { createDivider };
+
+// Export types
+export type { DividerConfig } from './config';
+export type { DividerComponent } from './types';

package/src/components/divider/types.ts

@@ -0,0 +1,55 @@
+// src/components/divider/types.ts
+import { BaseComponent, ElementComponent } from '../../core/compose';
+
+/**
+ * Divider component interface
+ */
+export interface DividerComponent extends BaseComponent, ElementComponent {
+  /**
+   * Gets current orientation
+   * @returns Current orientation
+   */
+  getOrientation: () => 'horizontal' | 'vertical';
+  
+  /**
+   * Sets orientation of the divider
+   * @param orientation - New orientation
+   * @returns DividerComponent instance for chaining
+   */
+  setOrientation: (orientation: 'horizontal' | 'vertical') => DividerComponent;
+  
+  /**
+   * Gets current variant
+   * @returns Current variant
+   */
+  getVariant: () => 'full-width' | 'inset' | 'middle-inset';
+  
+  /**
+   * Sets variant of the divider
+   * @param variant - New variant
+   * @returns DividerComponent instance for chaining
+   */
+  setVariant: (variant: 'full-width' | 'inset' | 'middle-inset') => DividerComponent;
+  
+  /**
+   * Sets custom inset values
+   * @param insetStart - Start inset value
+   * @param insetEnd - End inset value
+   * @returns DividerComponent instance for chaining
+   */
+  setInset: (insetStart?: number, insetEnd?: number) => DividerComponent;
+  
+  /**
+   * Sets thickness of the divider
+   * @param thickness - Thickness in pixels
+   * @returns DividerComponent instance for chaining
+   */
+  setThickness: (thickness: number) => DividerComponent;
+  
+  /**
+   * Sets custom color for the divider
+   * @param color - CSS color value
+   * @returns DividerComponent instance for chaining
+   */
+  setColor: (color: string) => DividerComponent;
+}

package/src/components/extended-fab/api.ts

@@ -0,0 +1,141 @@
+// src/components/extended-fab/api.ts
+import { ExtendedFabComponent } from './types';
+
+interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  text: {
+    setText: (text: string) => any;
+    getText: () => string;
+  };
+  className: string;
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  icon: {
+    setIcon: (html: string) => any;
+    getIcon: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  text: {
+    setText: (text: string) => any;
+    getText: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+}
+
+/**
+ * Enhances an Extended FAB 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 Extended FAB component
+ */
+export const withAPI = ({ disabled, lifecycle, text, className }: ApiOptions) => 
+  (component: ComponentWithElements): ExtendedFabComponent => ({
+    ...component as any,
+    element: component.element as HTMLButtonElement,
+    
+    getValue: () => component.element.value,
+    
+    setValue(value: string) {
+      component.element.value = value;
+      return this;
+    },
+    
+    enable() {
+      disabled.enable();
+      return this;
+    },
+    
+    disable() {
+      disabled.disable();
+      return this;
+    },
+    
+    setIcon(icon: string) {
+      component.icon.setIcon(icon);
+      return this;
+    },
+    
+    getIcon() {
+      return component.icon.getIcon();
+    },
+    
+    setText(newText: string) {
+      text.setText(newText);
+      return this;
+    },
+    
+    getText() {
+      return text.getText();
+    },
+    
+    setPosition(position: string) {
+      // First remove any existing position classes
+      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+      positions.forEach(pos => {
+        component.element.classList.remove(`${className}--${pos}`);
+      });
+      
+      // Add new position class
+      component.element.classList.add(`${className}--${position}`);
+      return this;
+    },
+    
+    getPosition() {
+      const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left'];
+      for (const pos of positions) {
+        if (component.element.classList.contains(`${className}--${pos}`)) {
+          return pos;
+        }
+      }
+      return null;
+    },
+    
+    lower() {
+      component.element.classList.add(`${className}--lowered`);
+      return this;
+    },
+    
+    raise() {
+      component.element.classList.remove(`${className}--lowered`);
+      return this;
+    },
+    
+    collapse() {
+      component.element.classList.add(`${className}--collapsed`);
+      
+      // Emit a custom event that can be listened to
+      const event = new CustomEvent('collapse', { 
+        bubbles: true, 
+        cancelable: true 
+      });
+      component.element.dispatchEvent(event);
+      
+      return this;
+    },
+    
+    expand() {
+      component.element.classList.remove(`${className}--collapsed`);
+      
+      // Emit a custom event that can be listened to
+      const event = new CustomEvent('expand', { 
+        bubbles: true, 
+        cancelable: true 
+      });
+      component.element.dispatchEvent(event);
+      
+      return this;
+    },
+    
+    destroy() {
+      lifecycle.destroy();
+    }
+  });