mtrl 0.3.8 → 0.4.0

package/src/components/timepicker/timepicker.ts

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

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

@@ -1,241 +0,0 @@
-// 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;
-};