mtrl 0.2.2 → 0.2.4

package/src/components/sheet/_styles.scss

@@ -0,0 +1,236 @@
+// src/components/sheet/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-sheet';
+
+.#{$component} {
+  // Base styles
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background-color: t.color('surface');
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+  overflow: hidden;
+  
+  // Common elevated surface styling
+  border-radius: 12px 12px 0 0;
+  box-sizing: border-box;
+  max-width: 100%;
+  max-height: 100%;
+  
+  // Initially hidden
+  opacity: 0;
+  pointer-events: none;
+  
+  // Typography for content
+  @include m.typography('body-medium');
+  
+  // Scrim (background overlay)
+  &-scrim {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: t.alpha('scrim', 0.32);
+    z-index: 999;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
+    pointer-events: none;
+  }
+  
+  &--open {
+    opacity: 1;
+    pointer-events: auto;
+    
+    + .#{$component}-scrim {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  
+  // Drag handle
+  &-handle {
+    width: 32px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: t.color('outline-variant');
+    margin: 8px auto;
+    cursor: grab;
+    
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  
+  // Title area
+  &-title {
+    padding: 16px 24px 0;
+    @include m.typography('headline-small');
+    color: t.color('on-surface');
+  }
+  
+  // Content container
+  &-content {
+    padding: 16px 24px 24px;
+    overflow-y: auto;
+    flex: 1;
+    // Ensure a min-height for small content
+    min-height: 32px;
+  }
+  
+  // Position variants
+  &--bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    border-radius: 28px 28px 0 0;
+    
+    &.#{$component}--open {
+      transform: translateY(0);
+    }
+  }
+  
+  &--top {
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
+    border-radius: 0 0 28px 28px;
+    
+    &.#{$component}--open {
+      transform: translateY(0);
+    }
+    
+    .#{$component}-handle {
+      margin: 0 auto 8px;
+    }
+  }
+  
+  &--left {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    border-radius: 0 28px 28px 0;
+    
+    &.#{$component}--open {
+      transform: translateX(0);
+    }
+    
+    .#{$component}-handle {
+      width: 4px;
+      height: 32px;
+      margin: auto 8px auto auto;
+    }
+  }
+  
+  &--right {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    transform: translateX(100%);
+    border-radius: 28px 0 0 28px;
+    
+    &.#{$component}--open {
+      transform: translateX(0);
+    }
+    
+    .#{$component}-handle {
+      width: 4px;
+      height: 32px;
+      margin: auto auto auto 8px;
+    }
+  }
+  
+  // Variant styles
+  &--standard {
+    // Apply different elevation based on position
+    &.#{$component}--bottom,
+    &.#{$component}--top {
+      width: 100%;
+      max-width: 640px;
+      margin: 0 auto;
+      @include m.elevation(3);
+    }
+    
+    &.#{$component}--left,
+    &.#{$component}--right {
+      max-width: 360px;
+      width: 90%;
+      @include m.elevation(3);
+    }
+  }
+  
+  &--modal {
+    // Modal variant has higher elevation and a required scrim
+    @include m.elevation(5);
+    
+    &.#{$component}--bottom,
+    &.#{$component}--top {
+      width: 100%;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+    
+    &.#{$component}--left,
+    &.#{$component}--right {
+      max-width: 320px;
+      width: 90%;
+    }
+    
+    + .#{$component}-scrim {
+      background-color: t.alpha('scrim', 0.5);
+    }
+  }
+  
+  &--expanded {
+    // Full screen variant
+    &.#{$component}--bottom,
+    &.#{$component}--top {
+      height: 100%;
+      max-height: calc(100% - 24px);
+      width: 100%;
+    }
+    
+    &.#{$component}--left,
+    &.#{$component}--right {
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+  
+  // States
+  &--dismissible {
+    .#{$component}-scrim {
+      cursor: pointer;
+    }
+  }
+  
+  // Elevation levels (1-5)
+  &--elevation-1 {
+    @include m.elevation(1);
+  }
+  
+  &--elevation-2 {
+    @include m.elevation(2);
+  }
+  
+  &--elevation-3 {
+    @include m.elevation(3);
+  }
+  
+  &--elevation-4 {
+    @include m.elevation(4);
+  }
+  
+  &--elevation-5 {
+    @include m.elevation(5);
+  }
+}

package/src/components/sheet/api.ts

@@ -0,0 +1,96 @@
+// src/components/sheet/api.ts
+import { SheetComponent } from './types';
+
+interface ApiOptions {
+  state: {
+    open: () => void;
+    close: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+}
+
+interface ComponentWithElements {
+  element: HTMLElement;
+  container: HTMLElement;
+  content: {
+    setContent: (html: string) => any;
+    getContent: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  title: {
+    setTitle: (text: string) => any;
+    getTitle: () => string;
+    getElement: () => HTMLElement | null;
+  };
+  getClass: (name: string) => string;
+  dragHandle?: {
+    setVisible: (visible: boolean) => any;
+  };
+  initialize?: () => void;
+}
+
+/**
+ * Enhances a sheet 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 Sheet component
+ */
+export const withAPI = ({ state, lifecycle }: ApiOptions) => 
+  (component: ComponentWithElements): SheetComponent => ({
+    ...component as any,
+    element: component.element,
+    container: component.container,
+    
+    open() {
+      state.open();
+      return this;
+    },
+    
+    close() {
+      state.close();
+      return this;
+    },
+    
+    setContent(html: string) {
+      component.content.setContent(html);
+      return this;
+    },
+    
+    getContent() {
+      return component.content.getContent();
+    },
+    
+    setTitle(text: string) {
+      component.title.setTitle(text);
+      return this;
+    },
+    
+    getTitle() {
+      return component.title.getTitle();
+    },
+    
+    setDragHandle(enabled: boolean) {
+      if (component.dragHandle) {
+        component.dragHandle.setVisible(enabled);
+      }
+      return this;
+    },
+    
+    setMaxHeight(height: string) {
+      component.container.style.maxHeight = height;
+      return this;
+    },
+    
+    destroy() {
+      lifecycle.destroy();
+    },
+    
+    initialize() {
+      if (component.initialize) {
+        component.initialize();
+      }
+      return this;
+    }
+  });

package/src/components/sheet/config.ts

@@ -0,0 +1,66 @@
+// src/components/sheet/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { SheetConfig } from './types';
+import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+
+/**
+ * Default configuration for the Sheet component
+ */
+export const defaultConfig: SheetConfig = {
+  variant: SHEET_VARIANTS.STANDARD,
+  position: SHEET_POSITIONS.BOTTOM,
+  open: false,
+  dismissible: true,
+  dragHandle: true,
+  elevation: 3,
+  enableGestures: true
+};
+
+/**
+ * Creates the base configuration for Sheet component
+ * @param {SheetConfig} config - User provided configuration
+ * @returns {SheetConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: SheetConfig = {}): SheetConfig => 
+  createComponentConfig(defaultConfig, config, 'sheet') as SheetConfig;
+
+/**
+ * Generates element configuration for the Sheet component
+ * @param {SheetConfig} config - Sheet configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: SheetConfig) => {
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      role: 'dialog',
+      'aria-modal': config.variant === SHEET_VARIANTS.MODAL ? 'true' : 'false'
+    },
+    className: config.class,
+    forwardEvents: {
+      click: true,
+      keydown: true
+    }
+  });
+};
+
+/**
+ * Creates API configuration for the Sheet component
+ * @param {Object} comp - Component with state and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  state: {
+    open: () => comp.state.open(),
+    close: () => comp.state.close()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  }
+});
+
+export default defaultConfig;

package/src/components/sheet/constants.ts

@@ -0,0 +1,20 @@
+// src/components/sheet/constants.ts
+export const SHEET_VARIANTS = {
+  STANDARD: 'standard',
+  MODAL: 'modal',
+  EXPANDED: 'expanded'
+}
+
+export const SHEET_POSITIONS = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+  LEFT: 'left',
+  RIGHT: 'right'
+}
+
+export const SHEET_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  DRAG_START: 'dragstart',
+  DRAG_END: 'dragend'
+}

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

@@ -0,0 +1,51 @@
+// src/components/sheet/features/content.ts
+/**
+ * Adds content management functionality to a component
+ * @param {Object} config - Component configuration with optional content
+ * @returns {Function} Higher-order function that adds content to a component
+ */
+export const withContent = (config) => (component) => {
+  const { content = '' } = config;
+  
+  // Create content element
+  const contentElement = document.createElement('div');
+  contentElement.className = `${component.getClass('sheet')}-content`;
+  contentElement.innerHTML = content;
+  
+  // Add content element to component
+  component.container = document.createElement('div');
+  component.container.className = `${component.getClass('sheet')}-container`;
+  component.container.appendChild(contentElement);
+  component.element.appendChild(component.container);
+  
+  return {
+    ...component,
+    content: {
+      /**
+       * Sets the HTML content
+       * @param {string} html - HTML content
+       * @returns {Object} Content API for chaining
+       */
+      setContent(html: string) {
+        contentElement.innerHTML = html;
+        return this;
+      },
+      
+      /**
+       * Gets the current HTML content
+       * @returns {string} HTML content
+       */
+      getContent() {
+        return contentElement.innerHTML;
+      },
+      
+      /**
+       * Gets the content DOM element
+       * @returns {HTMLElement} Content element
+       */
+      getElement() {
+        return contentElement;
+      }
+    }
+  };
+};

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

@@ -0,0 +1,177 @@
+// src/components/sheet/features/gestures.ts
+import { SHEET_EVENTS, SHEET_POSITIONS } from '../constants';
+
+/**
+ * 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/index.ts

@@ -0,0 +1,6 @@
+// src/components/sheet/features/index.ts
+export { withPosition } from './position';
+export { withContent } from './content';
+export { withTitle } from './title';
+export { withState } from './state';
+export { withGestures } from './gestures';

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

@@ -0,0 +1,42 @@
+// src/components/sheet/features/position.ts
+import { SheetConfig } from '../types';
+import { SHEET_POSITIONS } from '../constants';
+
+/**
+ * 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;
+      }
+    }
+  };
+};