mtrl 0.2.6 → 0.2.8

package/src/components/timepicker/timepicker.ts

@@ -0,0 +1,117 @@
+// src/components/timepicker/timePicker.ts
+
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withLifecycle
+} from '../../core/compose/features';
+import { TimePickerConfig, TimePickerComponent, TimeValue, TIME_PERIOD, TIME_FORMAT } from './types';
+import { createBaseConfig, getContainerConfig, getModalConfig, getDialogConfig, getApiConfig } from './config';
+import { 
+  TIME_PICKER_TYPE, 
+  TIME_PICKER_ORIENTATION,
+  EVENTS,
+  SELECTORS,
+  Z_INDEX
+} from './config';
+import { createTimePickerAPI } from './api';
+import { renderTimePicker } from './render';
+import { parseTime, formatTime } from './utils';
+
+/**
+ * Creates a new TimePicker component
+ * @param {TimePickerConfig} config - TimePicker configuration object
+ * @returns {TimePickerComponent} TimePicker component instance
+ */
+const createTimePicker = (config: TimePickerConfig = {}): TimePickerComponent => {
+  const baseConfig = createBaseConfig(config);
+  
+  try {
+    // Create base component with container element
+    const baseComponent = pipe(
+      createBase,
+      withEvents(),
+      withElement(getContainerConfig(baseConfig)),
+      withLifecycle()
+    )(baseConfig);
+    
+    // Create modal element
+    const modalElement = document.createElement('div');
+    modalElement.className = `${PREFIX}-time-picker-modal`;
+    modalElement.style.display = 'none';
+    modalElement.style.position = 'fixed';
+    modalElement.style.top = '0';
+    modalElement.style.left = '0';
+    modalElement.style.width = '100%';
+    modalElement.style.height = '100%';
+    modalElement.style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
+    modalElement.style.zIndex = Z_INDEX.MODAL.toString();
+    modalElement.setAttribute('role', 'presentation');
+    
+    // Create dialog element
+    const dialogElement = document.createElement('div');
+    dialogElement.className = [
+      `${PREFIX}-time-picker-dialog`,
+      `${PREFIX}-time-picker-dialog--${baseConfig.type}`,
+      `${PREFIX}-time-picker-dialog--${baseConfig.orientation}`,
+      `${PREFIX}-time-picker-dialog--${baseConfig.format}`
+    ].join(' ');
+    dialogElement.style.position = 'absolute';
+    dialogElement.style.top = '50%';
+    dialogElement.style.left = '50%';
+    dialogElement.style.transform = 'translate(-50%, -50%)';
+    dialogElement.style.zIndex = Z_INDEX.DIALOG.toString();
+    
+    // Append dialog to modal
+    modalElement.appendChild(dialogElement);
+    
+    // Append modal to container (document.body by default)
+    const container = typeof baseConfig.container === 'string' 
+      ? document.querySelector(baseConfig.container) || document.body 
+      : baseConfig.container || document.body;
+    
+    container.appendChild(modalElement);
+    
+    // Parse initial time value
+    let timeValue: TimeValue;
+    if (baseConfig.value) {
+      timeValue = parseTime(baseConfig.value, baseConfig.format);
+    } else {
+      // Default to current time
+      const now = new Date();
+      timeValue = {
+        hours: now.getHours(),
+        minutes: now.getMinutes(),
+        seconds: baseConfig.showSeconds ? now.getSeconds() : 0,
+        period: now.getHours() >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM
+      };
+    }
+    
+    // Render initial time picker content
+    renderTimePicker(dialogElement, timeValue, baseConfig);
+    
+    // Create time picker API
+    const timePicker = createTimePickerAPI(
+      baseComponent, 
+      modalElement, 
+      dialogElement, 
+      timeValue, 
+      baseConfig, 
+      getApiConfig(baseComponent)
+    );
+    
+    // Open time picker if initially open
+    if (baseConfig.isOpen) {
+      setTimeout(() => timePicker.open(), 0);
+    }
+    
+    return timePicker;
+  } catch (error) {
+    console.error('TimePicker creation error:', error);
+    throw new Error(`Failed to create time picker: ${(error as Error).message}`);
+  }
+};
+
+export default createTimePicker;

package/src/components/timepicker/types.ts

@@ -0,0 +1,336 @@
+// src/components/timepicker/types.ts
+
+/**
+ * Time picker display type
+ * @enum {string}
+ */
+export enum TIME_PICKER_TYPE {
+  /** Clock dial-based time picker */
+  DIAL = 'dial',
+  /** Text input-based time picker */
+  INPUT = 'input'
+}
+
+/**
+ * Time picker orientation
+ * @enum {string}
+ */
+export enum TIME_PICKER_ORIENTATION {
+  /** Vertical layout (default on mobile) */
+  VERTICAL = 'vertical',
+  /** Horizontal layout */
+  HORIZONTAL = 'horizontal'
+}
+
+/**
+ * Time format (12-hour or 24-hour)
+ * @enum {string}
+ */
+export enum TIME_FORMAT {
+  /** 12-hour format with AM/PM */
+  AMPM = '12h',
+  /** 24-hour format */
+  MILITARY = '24h'
+}
+
+/**
+ * Period of day for 12-hour format
+ * @enum {string}
+ */
+export enum TIME_PERIOD {
+  /** Morning */
+  AM = 'AM',
+  /** Afternoon/Evening */
+  PM = 'PM'
+}
+
+/**
+ * Configuration interface for the TimePicker component
+ * @category Components
+ */
+export interface TimePickerConfig {
+  /**
+   * Initial time value in 24-hour format (HH:MM)
+   * @example '14:30'
+   */
+  value?: string;
+
+  /**
+   * Type of time picker to display
+   * @default TIME_PICKER_TYPE.DIAL
+   */
+  type?: TIME_PICKER_TYPE;
+
+  /**
+   * Time format to use (12h or 24h)
+   * @default TIME_FORMAT.AMPM
+   */
+  format?: TIME_FORMAT;
+
+  /**
+   * Layout orientation for the time picker
+   * @default TIME_PICKER_ORIENTATION.VERTICAL
+   */
+  orientation?: TIME_PICKER_ORIENTATION;
+
+  /**
+   * Title text for the time picker
+   * @example 'Select departure time'
+   */
+  title?: string;
+
+  /**
+   * Whether to show seconds selector
+   * @default false
+   */
+  showSeconds?: boolean;
+
+  /**
+   * Additional CSS classes to add to the time picker
+   * @example 'custom-picker dark-theme'
+   */
+  class?: string;
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+
+  /**
+   * Whether to close the picker when time is selected
+   * @default true
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Minimum selectable time in 24-hour format (HH:MM)
+   * @example '09:00'
+   */
+  minTime?: string;
+
+  /**
+   * Maximum selectable time in 24-hour format (HH:MM)
+   * @example '18:00'
+   */
+  maxTime?: string;
+
+  /**
+   * Step interval for minute selection in minutes
+   * @default 1
+   */
+  minuteStep?: number;
+
+  /**
+   * Step interval for second selection in seconds
+   * @default 1
+   */
+  secondStep?: number;
+
+  /**
+   * Custom text for cancel button
+   * @default 'Cancel'
+   */
+  cancelText?: string;
+
+  /**
+   * Custom text for confirm button
+   * @default 'OK'
+   */
+  confirmText?: string;
+
+  /**
+   * Whether the time picker is initially visible (for inline mode)
+   * @default false
+   */
+  isOpen?: boolean;
+
+  /**
+   * CSS selector or HTMLElement to append the time picker to
+   * @default document.body
+   */
+  container?: string | HTMLElement;
+
+  /**
+   * Custom icon for the clock button
+   */
+  clockIcon?: string;
+
+  /**
+   * Custom icon for the keyboard button
+   */
+  keyboardIcon?: string;
+
+  /**
+   * Callback when time is changed
+   */
+  onChange?: (time: string) => void;
+
+  /**
+   * Callback when time picker is opened
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback when time picker is closed
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback when time is confirmed
+   */
+  onConfirm?: (time: string) => void;
+
+  /**
+   * Callback when time picker is canceled
+   */
+  onCancel?: () => void;
+}
+
+/**
+ * Time value object
+ * @category Components
+ */
+export interface TimeValue {
+  /** Hours (0-23) */
+  hours: number;
+  /** Minutes (0-59) */
+  minutes: number;
+  /** Seconds (0-59), optional */
+  seconds?: number;
+  /** AM/PM for 12-hour format */
+  period?: TIME_PERIOD;
+}
+
+/**
+ * TimePicker component interface
+ * @category Components
+ */
+export interface TimePickerComponent {
+  /** The time picker's container DOM element */
+  element: HTMLElement;
+
+  /** Modal container element */
+  modalElement: HTMLElement;
+
+  /** Dialog container element */
+  dialogElement: HTMLElement;
+
+  /** Whether the time picker is currently open */
+  isOpen: boolean;
+
+  /**
+   * Opens the time picker
+   * @returns The time picker component for chaining
+   */
+  open: () => TimePickerComponent;
+
+  /**
+   * Closes the time picker
+   * @returns The time picker component for chaining
+   */
+  close: () => TimePickerComponent;
+
+  /**
+   * Toggles the time picker open/closed state
+   * @returns The time picker component for chaining
+   */
+  toggle: () => TimePickerComponent;
+
+  /**
+   * Gets the current time value
+   * @returns Current time string in 24-hour format (HH:MM or HH:MM:SS)
+   */
+  getValue: () => string;
+
+  /**
+   * Gets the current time as a TimeValue object
+   * @returns Current time object with hours, minutes, seconds, and period
+   */
+  getTimeObject: () => TimeValue;
+
+  /**
+   * Sets the time value
+   * @param time - Time string in 24-hour format (HH:MM or HH:MM:SS)
+   * @returns The time picker component for chaining
+   */
+  setValue: (time: string) => TimePickerComponent;
+
+  /**
+   * Sets the time picker type (dial or input)
+   * @param type - Time picker type
+   * @returns The time picker component for chaining
+   */
+  setType: (type: TIME_PICKER_TYPE) => TimePickerComponent;
+
+  /**
+   * Gets the current time picker type
+   * @returns Current time picker type
+   */
+  getType: () => TIME_PICKER_TYPE;
+
+  /**
+   * Sets the time format (12h or 24h)
+   * @param format - Time format
+   * @returns The time picker component for chaining
+   */
+  setFormat: (format: TIME_FORMAT) => TimePickerComponent;
+
+  /**
+   * Gets the current time format
+   * @returns Current time format
+   */
+  getFormat: () => TIME_FORMAT;
+
+  /**
+   * Sets the time picker orientation
+   * @param orientation - Time picker orientation
+   * @returns The time picker component for chaining
+   */
+  setOrientation: (orientation: TIME_PICKER_ORIENTATION) => TimePickerComponent;
+
+  /**
+   * Gets the current time picker orientation
+   * @returns Current time picker orientation
+   */
+  getOrientation: () => TIME_PICKER_ORIENTATION;
+
+  /**
+   * Sets the time picker title
+   * @param title - Title text
+   * @returns The time picker component for chaining
+   */
+  setTitle: (title: string) => TimePickerComponent;
+
+  /**
+   * Gets the current time picker title
+   * @returns Current title text
+   */
+  getTitle: () => string;
+
+  /**
+   * Destroys the time picker component and cleans up resources
+   */
+  destroy: () => void;
+
+  /**
+   * Adds an event listener to the time picker
+   * @param event - Event name ('change', 'open', 'close', etc.)
+   * @param handler - Event handler function
+   * @returns The time picker component for chaining
+   */
+  on: (event: string, handler: Function) => TimePickerComponent;
+
+  /**
+   * Removes an event listener from the time picker
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The time picker component for chaining
+   */
+  off: (event: string, handler: Function) => TimePickerComponent;
+}

package/src/components/timepicker/utils.ts

@@ -0,0 +1,241 @@
+// src/components/timepicker/utils.ts
+
+import { TimeValue, TIME_PERIOD, TIME_FORMAT } from './types';
+
+/**
+ * Pads a number with leading zeros to ensure two-digit format
+ * @param {number} num - Number to pad
+ * @returns {string} Padded number string
+ */
+export const padZero = (num: number): string => {
+  return num.toString().padStart(2, '0');
+};
+
+/**
+ * Converts a time string to a TimeValue object
+ * @param {string} timeString - Time string in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {TIME_FORMAT} format - Time format (12h or 24h)
+ * @returns {TimeValue} Parsed time value
+ */
+export const parseTime = (timeString: string, format: TIME_FORMAT): TimeValue => {
+  try {
+    const parts = timeString.split(':');
+    let hours = parseInt(parts[0], 10);
+    const minutes = parseInt(parts[1], 10);
+    const seconds = parts[2] ? parseInt(parts[2], 10) : 0;
+    
+    // Validate time components
+    if (
+      isNaN(hours) || hours < 0 || hours > 23 ||
+      isNaN(minutes) || minutes < 0 || minutes > 59 ||
+      isNaN(seconds) || seconds < 0 || seconds > 59
+    ) {
+      throw new Error('Invalid time format');
+    }
+    
+    // Determine period for 12-hour format
+    const period = hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM;
+    
+    return { hours, minutes, seconds, period };
+  } catch (error) {
+    console.error('Error parsing time:', error);
+    
+    // Return current time as fallback
+    const now = new Date();
+    const hours = now.getHours();
+    const minutes = now.getMinutes();
+    const seconds = now.getSeconds();
+    const period = hours >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM;
+    
+    return { hours, minutes, seconds, period };
+  }
+};
+
+/**
+ * Formats a TimeValue object as a time string
+ * @param {TimeValue} timeValue - Time value to format
+ * @param {boolean} use24HourFormat - Whether to use 24-hour format
+ * @returns {string} Formatted time string
+ */
+export const formatTime = (timeValue: TimeValue, use24HourFormat: boolean): string => {
+  const { hours, minutes, seconds } = timeValue;
+  
+  if (use24HourFormat) {
+    if (seconds !== undefined) {
+      return `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}`;
+    }
+    return `${padZero(hours)}:${padZero(minutes)}`;
+  } else {
+    // Convert 24-hour to 12-hour display format
+    let displayHours = hours % 12;
+    if (displayHours === 0) {
+      displayHours = 12;
+    }
+    
+    if (seconds !== undefined) {
+      return `${padZero(displayHours)}:${padZero(minutes)}:${padZero(seconds)} ${timeValue.period}`;
+    }
+    return `${padZero(displayHours)}:${padZero(minutes)} ${timeValue.period}`;
+  }
+};
+
+/**
+ * Converts 12-hour format to 24-hour format
+ * @param {number} hours - Hours in 12-hour format (1-12)
+ * @param {TIME_PERIOD} period - Period (AM or PM)
+ * @returns {number} Hours in 24-hour format (0-23)
+ */
+export const convertTo24Hour = (hours: number, period: TIME_PERIOD): number => {
+  if (period === TIME_PERIOD.AM) {
+    return hours === 12 ? 0 : hours;
+  } else {
+    return hours === 12 ? 12 : hours + 12;
+  }
+};
+
+/**
+ * Converts 24-hour format to 12-hour format
+ * @param {number} hours24 - Hours in 24-hour format (0-23)
+ * @returns {object} Object with hours in 12-hour format and period
+ */
+export const convertTo12Hour = (hours24: number): { hours: number; period: TIME_PERIOD } => {
+  const period = hours24 >= 12 ? TIME_PERIOD.PM : TIME_PERIOD.AM;
+  let hours12 = hours24 % 12;
+  if (hours12 === 0) {
+    hours12 = 12;
+  }
+  
+  return { hours: hours12, period };
+};
+
+/**
+ * Calculates angle for clock dial based on time value
+ * @param {number} value - Time value (hour 0-23 or minute/second 0-59)
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @returns {number} Angle in degrees
+ */
+export const getAngle = (value: number, max: number): number => {
+  return (value / max) * 360;
+};
+
+/**
+ * Calculates coordinates for a point on a circle
+ * @param {number} radius - Circle radius
+ * @param {number} angle - Angle in degrees
+ * @returns {object} Coordinates { x, y }
+ */
+export const getCoordinates = (radius: number, angle: number): { x: number; y: number } => {
+  // Convert angle to radians and adjust to start from top (subtract 90 degrees)
+  // In CSS, 0 degrees is at 3 o'clock position, so we subtract 90 to start from 12 o'clock
+  const radians = ((angle - 90) * Math.PI) / 180;
+  
+  return {
+    x: radius * Math.cos(radians),
+    y: radius * Math.sin(radians)
+  };
+};
+
+/**
+ * Calculates time value from click position on dial
+ * @param {number} centerX - X coordinate of the dial center
+ * @param {number} centerY - Y coordinate of the dial center
+ * @param {number} clickX - X coordinate of the click position
+ * @param {number} clickY - Y coordinate of the click position
+ * @param {number} max - Maximum value (12 for hours in 12h format, 24 for 24h, 60 for minutes/seconds)
+ * @param {number} innerRadius - Inner radius for 24-hour clock inner ring
+ * @param {number} outerRadius - Outer radius for dial
+ * @returns {number} Calculated time value
+ */
+export const getTimeFromPosition = (
+  centerX: number,
+  centerY: number,
+  clickX: number,
+  clickY: number,
+  max: number,
+  innerRadius?: number,
+  outerRadius?: number
+): number => {
+  // Calculate angle from center to click position
+  const deltaX = clickX - centerX;
+  const deltaY = clickY - centerY;
+  
+  // Calculate angle in degrees (0 at top, clockwise)
+  let angle = Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 90;
+  if (angle < 0) {
+    angle += 360;
+  }
+  
+  // Calculate distance from center
+  const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+  
+  // For 24h clock, check if click is in inner or outer ring
+  if (max === 24 && innerRadius && outerRadius) {
+    const isInnerRing = distance < (innerRadius + outerRadius) / 2;
+    
+    // Calculate value based on angle
+    let value = Math.round((angle / 360) * 12);
+    if (value === 0) {
+      value = 12;
+    }
+    
+    // Adjust for inner ring (add 12 hours)
+    if (isInnerRing) {
+      value = value === 12 ? 0 : value + 12;
+    }
+    
+    return value;
+  }
+  
+  // For standard 12h clock or minutes/seconds
+  let value = Math.round((angle / 360) * max);
+  if (value === max) {
+    value = 0;
+  }
+  
+  return value;
+};
+
+/**
+ * Checks if a time is within min/max constraints
+ * @param {TimeValue} time - Time value to check
+ * @param {string} minTime - Minimum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @param {string} maxTime - Maximum time in 24-hour format (HH:MM or HH:MM:SS)
+ * @returns {boolean} Whether the time is within constraints
+ */
+export const isTimeWithinConstraints = (
+  time: TimeValue,
+  minTime?: string,
+  maxTime?: string
+): boolean => {
+  if (!minTime && !maxTime) {
+    return true;
+  }
+  
+  const timeToCheck = time.hours * 3600 + time.minutes * 60 + (time.seconds || 0);
+  
+  if (minTime) {
+    const minParts = minTime.split(':');
+    const minHours = parseInt(minParts[0], 10);
+    const minMinutes = parseInt(minParts[1], 10);
+    const minSeconds = minParts[2] ? parseInt(minParts[2], 10) : 0;
+    const minValue = minHours * 3600 + minMinutes * 60 + minSeconds;
+    
+    if (timeToCheck < minValue) {
+      return false;
+    }
+  }
+  
+  if (maxTime) {
+    const maxParts = maxTime.split(':');
+    const maxHours = parseInt(maxParts[0], 10);
+    const maxMinutes = parseInt(maxParts[1], 10);
+    const maxSeconds = maxParts[2] ? parseInt(maxParts[2], 10) : 0;
+    const maxValue = maxHours * 3600 + maxMinutes * 60 + maxSeconds;
+    
+    if (timeToCheck > maxValue) {
+      return false;
+    }
+  }
+  
+  return true;
+};

package/src/components/tooltip/api.ts

@@ -1,6 +1,6 @@
 // src/components/tooltip/api.ts
 import { TooltipComponent } from './types';
-import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './constants';
+import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './config';
 
 interface ApiOptions {
   lifecycle: {