mtrl 0.3.8 → 0.4.0

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

@@ -1,177 +0,0 @@
-// src/components/sheet/features/gestures.ts
-import { SHEET_EVENTS, SHEET_POSITIONS } from '../types';
-
-/**
- * Adds gesture support to a component
- * @param {Object} config - Component configuration
- * @returns {Function} Higher-order function that adds gestures to a component
- */
-export const withGestures = (config) => (component) => {
-  // Skip if gestures are disabled
-  if (config.enableGestures === false) {
-    return component;
-  }
-  
-  const position = config.position || SHEET_POSITIONS.BOTTOM;
-  let startY = 0;
-  let startX = 0;
-  let startTransform = 0;
-  let isDragging = false;
-  
-  // Find drag handle if exists
-  const dragHandle = component.dragHandle?.element || component.element;
-  
-  /**
-   * Handles the start of a drag gesture
-   * @param {TouchEvent|MouseEvent} event - The event object
-   */
-  const handleDragStart = (event) => {
-    if (!component.state.isOpen()) return;
-    
-    isDragging = true;
-    document.body.style.userSelect = 'none';
-    
-    // Get start position
-    if (event.type === 'touchstart') {
-      startY = event.touches[0].clientY;
-      startX = event.touches[0].clientX;
-    } else {
-      startY = event.clientY;
-      startX = event.clientX;
-      
-      // Add mouse move and up listeners
-      document.addEventListener('mousemove', handleDragMove);
-      document.addEventListener('mouseup', handleDragEnd);
-    }
-    
-    // Emit event
-    component.events.emit(SHEET_EVENTS.DRAG_START);
-  };
-  
-  /**
-   * Handles the drag movement
-   * @param {TouchEvent|MouseEvent} event - The event object
-   */
-  const handleDragMove = (event) => {
-    if (!isDragging) return;
-    
-    let currentY, currentX;
-    
-    if (event.type === 'touchmove') {
-      currentY = event.touches[0].clientY;
-      currentX = event.touches[0].clientX;
-    } else {
-      currentY = event.clientY;
-      currentX = event.clientX;
-    }
-    
-    // Calculate delta based on position
-    let delta = 0;
-    
-    switch (position) {
-      case SHEET_POSITIONS.BOTTOM:
-        delta = currentY - startY;
-        if (delta < 0) delta = 0; // Prevent dragging beyond fully open state
-        component.element.style.transform = `translateY(${delta}px)`;
-        break;
-      
-      case SHEET_POSITIONS.TOP:
-        delta = startY - currentY;
-        if (delta < 0) delta = 0;
-        component.element.style.transform = `translateY(-${delta}px)`;
-        break;
-      
-      case SHEET_POSITIONS.LEFT:
-        delta = startX - currentX;
-        if (delta < 0) delta = 0;
-        component.element.style.transform = `translateX(-${delta}px)`;
-        break;
-      
-      case SHEET_POSITIONS.RIGHT:
-        delta = currentX - startX;
-        if (delta < 0) delta = 0;
-        component.element.style.transform = `translateX(${delta}px)`;
-        break;
-    }
-    
-    // Adjust opacity based on drag progress
-    const elementSize = position === SHEET_POSITIONS.BOTTOM || position === SHEET_POSITIONS.TOP
-      ? component.element.offsetHeight
-      : component.element.offsetWidth;
-    
-    const dragProgress = Math.min(delta / elementSize, 1);
-    const scrimElement = component.element.nextElementSibling;
-    if (scrimElement && scrimElement.classList.contains(`${component.getClass('sheet')}-scrim`)) {
-      scrimElement.style.opacity = `${0.32 * (1 - dragProgress)}`;
-    }
-  };
-  
-  /**
-   * Handles the end of a drag gesture
-   * @param {TouchEvent|MouseEvent} event - The event object
-   */
-  const handleDragEnd = (event) => {
-    if (!isDragging) return;
-    
-    isDragging = false;
-    document.body.style.userSelect = '';
-    
-    // Remove mouse event listeners
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
-    
-    // Determine final position
-    const elementSize = position === SHEET_POSITIONS.BOTTOM || position === SHEET_POSITIONS.TOP
-      ? component.element.offsetHeight
-      : component.element.offsetWidth;
-    
-    let transform = 0;
-    if (component.element.style.transform) {
-      const match = component.element.style.transform.match(/translate[XY]\(([^p]+)px\)/);
-      transform = match ? parseFloat(match[1]) : 0;
-    }
-    
-    // Close if dragged more than 30% of the way
-    if (transform > elementSize * 0.3) {
-      component.state.close();
-    } else {
-      // Reset position and opacity
-      component.element.style.transform = '';
-      const scrimElement = component.element.nextElementSibling;
-      if (scrimElement && scrimElement.classList.contains(`${component.getClass('sheet')}-scrim`)) {
-        scrimElement.style.opacity = '';
-      }
-    }
-    
-    // Emit event
-    component.events.emit(SHEET_EVENTS.DRAG_END);
-  };
-  
-  // Add event listeners to drag handle
-  dragHandle.addEventListener('touchstart', handleDragStart);
-  dragHandle.addEventListener('touchmove', handleDragMove);
-  dragHandle.addEventListener('touchend', handleDragEnd);
-  dragHandle.addEventListener('mousedown', handleDragStart);
-  
-  // Clean up function
-  const cleanup = () => {
-    dragHandle.removeEventListener('touchstart', handleDragStart);
-    dragHandle.removeEventListener('touchmove', handleDragMove);
-    dragHandle.removeEventListener('touchend', handleDragEnd);
-    dragHandle.removeEventListener('mousedown', handleDragStart);
-    document.removeEventListener('mousemove', handleDragMove);
-    document.removeEventListener('mouseup', handleDragEnd);
-  };
-  
-  // Add cleanup to component lifecycle
-  const originalDestroy = component.lifecycle?.destroy || (() => {});
-  component.lifecycle = {
-    ...component.lifecycle,
-    destroy: () => {
-      cleanup();
-      originalDestroy();
-    }
-  };
-  
-  return component;
-};

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

@@ -1,41 +0,0 @@
-// src/components/sheet/features/position.ts
-import { SheetConfig, SHEET_POSITIONS } from '../types';
-
-/**
- * Adds position functionality to a component
- * @param {SheetConfig} config - Component configuration with position
- * @returns {Function} Higher-order function that adds position to a component
- */
-export const withPosition = (config: SheetConfig) => (component) => {
-  const { position = SHEET_POSITIONS.BOTTOM } = config;
-  const positionClass = `${component.getClass('sheet')}--${position.toLowerCase()}`;
-  
-  // Add position class to element
-  component.element.classList.add(positionClass);
-  
-  return {
-    ...component,
-    position: {
-      /**
-       * Changes the position of the component
-       * @param {string} newPosition - New position value
-       */
-      setPosition(newPosition: string) {
-        // Remove current position class
-        component.element.classList.remove(positionClass);
-        
-        // Add new position class
-        const newPositionClass = `${component.getClass('sheet')}--${newPosition.toLowerCase()}`;
-        component.element.classList.add(newPositionClass);
-      },
-      
-      /**
-       * Gets the current position
-       * @returns {string} Current position
-       */
-      getPosition() {
-        return position;
-      }
-    }
-  };
-};

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

@@ -1,116 +0,0 @@
-// src/components/sheet/features/state.ts
-import { SHEET_EVENTS } from '../types';
-
-/**
- * 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

@@ -1,86 +0,0 @@
-// 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

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

package/src/components/sheet/sheet.ts

@@ -1,56 +0,0 @@
-// 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, SHEET_VARIANTS, SHEET_POSITIONS } from './types';
-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;