mtrl 0.2.2 → 0.2.4

package/src/components/sheet/features/state.ts

@@ -0,0 +1,116 @@
+// src/components/sheet/features/state.ts
+import { SHEET_EVENTS } from '../constants';
+
+/**
+ * Adds state management functionality to a component
+ * @param {Object} config - Component configuration with initial state
+ * @returns {Function} Higher-order function that adds state to a component
+ */
+export const withState = (config) => (component) => {
+  const { open: initialOpen = false, dismissible = true } = config;
+  let isOpen = initialOpen;
+  
+  // Create scrim element
+  const scrimElement = document.createElement('div');
+  scrimElement.className = `${component.getClass('sheet')}-scrim`;
+  
+  // Add scrim after component in DOM
+  component.element.parentNode?.insertBefore(scrimElement, component.element.nextSibling);
+  
+  // Mark as dismissible if configured
+  if (dismissible) {
+    component.element.classList.add(`${component.getClass('sheet')}--dismissible`);
+    
+    // Add click handler to scrim
+    scrimElement.addEventListener('click', () => {
+      if (dismissible) {
+        close();
+      }
+    });
+  }
+  
+  // Initialize component state
+  if (initialOpen) {
+    component.element.classList.add(`${component.getClass('sheet')}--open`);
+  }
+  
+  // Add elevation class based on config
+  if (config.elevation) {
+    component.element.classList.add(`${component.getClass('sheet')}--elevation-${config.elevation}`);
+  }
+  
+  // Add keyboard support (ESC to close)
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && isOpen && dismissible) {
+      close();
+    }
+  });
+  
+  /**
+   * Opens the sheet
+   */
+  function open() {
+    if (!isOpen) {
+      isOpen = true;
+      component.element.classList.add(`${component.getClass('sheet')}--open`);
+      component.events.emit(SHEET_EVENTS.OPEN);
+      
+      if (config.onOpen) {
+        config.onOpen();
+      }
+    }
+  }
+  
+  /**
+   * Closes the sheet
+   */
+  function close() {
+    if (isOpen) {
+      isOpen = false;
+      component.element.classList.remove(`${component.getClass('sheet')}--open`);
+      component.events.emit(SHEET_EVENTS.CLOSE);
+      
+      if (config.onClose) {
+        config.onClose();
+      }
+    }
+  }
+  
+  return {
+    ...component,
+    state: {
+      open,
+      close,
+      
+      /**
+       * Checks if the sheet is open
+       * @returns {boolean} Whether the sheet is open
+       */
+      isOpen() {
+        return isOpen;
+      },
+      
+      /**
+       * Sets whether the sheet can be dismissed
+       * @param {boolean} canDismiss - Whether the sheet can be dismissed
+       */
+      setDismissible(canDismiss: boolean) {
+        if (canDismiss) {
+          component.element.classList.add(`${component.getClass('sheet')}--dismissible`);
+        } else {
+          component.element.classList.remove(`${component.getClass('sheet')}--dismissible`);
+        }
+      }
+    },
+    
+    /**
+     * Initializes the component (called after creation)
+     */
+    initialize() {
+      // Make sure scrim is in the correct DOM position
+      if (scrimElement.parentNode !== component.element.parentNode) {
+        component.element.parentNode?.insertBefore(scrimElement, component.element.nextSibling);
+      }
+    }
+  };
+};

package/src/components/sheet/features/title.ts

@@ -0,0 +1,86 @@
+// src/core/compose/features/with-title.ts
+/**
+ * Adds title functionality to a component
+ * @param {Object} config - Component configuration with optional title
+ * @returns {Function} Higher-order function that adds title to a component
+ */
+export const withTitle = (config) => (component) => {
+  const { title = '' } = config;
+  
+  // Only create title element if title is provided or dragHandle is enabled
+  let titleElement = null;
+  
+  if (title || config.dragHandle) {
+    // Create title element
+    titleElement = document.createElement('div');
+    titleElement.className = `${component.getClass('sheet')}-title`;
+    
+    if (title) {
+      titleElement.textContent = title;
+    }
+    
+    // Insert before content
+    component.container.insertBefore(titleElement, component.container.firstChild);
+    
+    // Add drag handle if enabled
+    if (config.dragHandle) {
+      const handleElement = document.createElement('div');
+      handleElement.className = `${component.getClass('sheet')}-handle`;
+      component.container.insertBefore(handleElement, component.container.firstChild);
+      
+      // Store handle element reference
+      component.dragHandle = {
+        element: handleElement,
+        
+        /**
+         * Sets the visibility of the drag handle
+         * @param {boolean} visible - Whether the handle should be visible
+         */
+        setVisible(visible: boolean) {
+          handleElement.style.display = visible ? 'block' : 'none';
+        }
+      };
+    }
+  }
+  
+  return {
+    ...component,
+    title: {
+      /**
+       * Sets the title text
+       * @param {string} text - Title text
+       * @returns {Object} Title API for chaining
+       */
+      setTitle(text: string) {
+        if (!titleElement && text) {
+          // Create title element if it doesn't exist
+          titleElement = document.createElement('div');
+          titleElement.className = `${component.getClass('sheet')}-title`;
+          component.container.insertBefore(titleElement, component.content.getElement());
+        }
+        
+        if (titleElement) {
+          titleElement.textContent = text;
+        }
+        
+        return this;
+      },
+      
+      /**
+       * Gets the current title text
+       * @returns {string} Title text or empty string
+       */
+      getTitle() {
+        return titleElement ? titleElement.textContent || '' : '';
+      },
+      
+      /**
+       * Gets the title DOM element
+       * @returns {HTMLElement|null} Title element or null
+       */
+      getElement() {
+        return titleElement;
+      }
+    }
+  };
+};

package/src/components/sheet/index.ts

@@ -0,0 +1,4 @@
+// src/components/sheet/index.ts
+export { default } from './sheet';
+export { SHEET_VARIANTS, SHEET_POSITIONS, SHEET_EVENTS } from './constants';
+export { SheetConfig, SheetComponent } from './types';

package/src/components/sheet/sheet.ts

@@ -0,0 +1,57 @@
+// src/components/sheet/sheet.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withVariant,
+  withState,
+  withLifecycle,
+  withGestures
+} from '../../core/compose/features';
+import {
+  withContent,
+  withTitle,
+  withPosition,
+  withState,
+  withGestures
+} from './features';
+import { withAPI } from './api';
+import { SheetConfig } from './types';
+import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Sheet component
+ * @param {SheetConfig} config - Sheet configuration object
+ * @returns {SheetComponent} Sheet component instance
+ */
+const createSheet = (config: SheetConfig = {}) => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const sheet = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      withPosition(baseConfig),
+      withContent(baseConfig),
+      withTitle(baseConfig),
+      withState(baseConfig),
+      withGestures(baseConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    // Initialize the sheet (create DOM structure, add event listeners)
+    sheet.initialize();
+
+    return sheet;
+  } catch (error) {
+    console.error('Sheet creation error:', error);
+    throw new Error(`Failed to create sheet: ${(error as Error).message}`);
+  }
+};
+
+export default createSheet;

package/src/components/sheet/types.ts

@@ -0,0 +1,266 @@
+// src/components/sheet/types.ts
+import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+
+/**
+ * Configuration interface for the Sheet component
+ * @category Components
+ */
+export interface SheetConfig {
+  /** 
+   * Sheet variant that determines visual styling
+   * @default 'standard'
+   */
+  variant?: keyof typeof SHEET_VARIANTS | string;
+  
+  /** 
+   * Sheet position on the screen
+   * @default 'bottom'
+   */
+  position?: keyof typeof SHEET_POSITIONS | string;
+  
+  /** 
+   * Whether the sheet is initially open
+   * @default false
+   */
+  open?: boolean;
+  
+  /** 
+   * Whether the sheet can be dismissed by clicking the scrim
+   * @default true
+   */
+  dismissible?: boolean;
+  
+  /** 
+   * Whether to show a drag handle
+   * @default true
+   */
+  dragHandle?: boolean;
+  
+  /** 
+   * Content for the sheet
+   * @example '<div>Sheet content</div>'
+   */
+  content?: string;
+  
+  /** 
+   * Title for the sheet
+   * @example 'Sheet Title'
+   */
+  title?: string;
+  
+  /** 
+   * Additional CSS classes to add to the sheet
+   * @example 'custom-sheet settings-panel'
+   */
+  class?: string;
+  
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+  
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+  
+  /**
+   * Elevation level for the sheet (1-5)
+   * @default 3
+   */
+  elevation?: number;
+  
+  /**
+   * Maximum height of the sheet (CSS value)
+   * @example '80%'
+   */
+  maxHeight?: string;
+  
+  /**
+   * Whether to enable gesture-based interactions
+   * @default true
+   */
+  enableGestures?: boolean;
+  
+  /**
+   * Callback when sheet is opened
+   */
+  onOpen?: () => void;
+  
+  /**
+   * Callback when sheet is closed
+   */
+  onClose?: () => void;
+}
+
+/**
+ * Content API interface for managing sheet content
+ * @category Components
+ */
+export interface ContentAPI {
+  /**
+   * Sets the content HTML
+   * @param html - HTML string for the content
+   * @returns The content API for chaining
+   */
+  setContent: (html: string) => ContentAPI;
+  
+  /**
+   * Gets the current content HTML
+   * @returns HTML string for the content
+   */
+  getContent: () => string;
+  
+  /**
+   * Gets the content DOM element
+   * @returns The content element or null if not present
+   */
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Title API interface for managing sheet title
+ * @category Components
+ */
+export interface TitleAPI {
+  /**
+   * Sets the title content
+   * @param text - Title text
+   * @returns The title API for chaining
+   */
+  setTitle: (text: string) => TitleAPI;
+  
+  /**
+   * Gets the current title text
+   * @returns Sheet title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Gets the title DOM element
+   * @returns The title element or null if not present
+   */
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Sheet component interface
+ * @category Components
+ */
+export interface SheetComponent {
+  /** The sheet's root DOM element */
+  element: HTMLElement;
+  
+  /** The sheet's container DOM element */
+  container: HTMLElement;
+  
+  /** API for managing sheet content */
+  content: ContentAPI;
+  
+  /** API for managing sheet title */
+  title: TitleAPI;
+  
+  /** API for managing sheet state */
+  state: {
+    /** Opens the sheet */
+    open: () => void;
+    /** Closes the sheet */
+    close: () => void;
+    /** Checks if the sheet is open */
+    isOpen: () => boolean;
+  };
+  
+  /** API for managing component lifecycle */
+  lifecycle: {
+    /** Destroys the component and cleans up resources */
+    destroy: () => void;
+  };
+  
+  /**
+   * Gets a class name with the component's prefix
+   * @param name - Base class name
+   * @returns Prefixed class name
+   */
+  getClass: (name: string) => string;
+  
+  /**
+   * Opens the sheet
+   * @returns The sheet component for chaining
+   */
+  open: () => SheetComponent;
+  
+  /**
+   * Closes the sheet
+   * @returns The sheet component for chaining
+   */
+  close: () => SheetComponent;
+  
+  /**
+   * Sets the sheet content
+   * @param html - Content HTML
+   * @returns The sheet component for chaining
+   */
+  setContent: (html: string) => SheetComponent;
+  
+  /**
+   * Gets the sheet content HTML
+   * @returns Content HTML
+   */
+  getContent: () => string;
+  
+  /**
+   * Sets the sheet title
+   * @param text - Title text
+   * @returns The sheet component for chaining
+   */
+  setTitle: (text: string) => SheetComponent;
+  
+  /**
+   * Gets the sheet title text
+   * @returns Title text
+   */
+  getTitle: () => string;
+  
+  /**
+   * Enables or disables the drag handle
+   * @param enabled - Whether to show the drag handle
+   * @returns The sheet component for chaining
+   */
+  setDragHandle: (enabled: boolean) => SheetComponent;
+  
+  /**
+   * Sets the maximum height of the sheet
+   * @param height - CSS value for max height
+   * @returns The sheet component for chaining
+   */
+  setMaxHeight: (height: string) => SheetComponent;
+  
+  /**
+   * Destroys the sheet component and cleans up resources
+   */
+  destroy: () => void;
+  
+  /**
+   * Adds an event listener to the sheet
+   * @param event - Event name ('open', 'close', etc.)
+   * @param handler - Event handler function
+   * @returns The sheet component for chaining
+   */
+  on: (event: string, handler: Function) => SheetComponent;
+  
+  /**
+   * Removes an event listener from the sheet
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The sheet component for chaining
+   */
+  off: (event: string, handler: Function) => SheetComponent;
+  
+  /**
+   * Adds CSS classes to the sheet element
+   * @param classes - One or more class names to add
+   * @returns The sheet component for chaining
+   */
+  addClass: (...classes: string[]) => SheetComponent;
+}