mtrl 0.2.6 → 0.2.8

package/src/components/datepicker/types.ts

@@ -0,0 +1,397 @@
+// src/components/datepicker/types.ts
+
+/**
+ * DatePicker variant types
+ * @category Components
+ */
+export type DatePickerVariant = 'docked' | 'modal' | 'modal-input';
+
+/**
+ * DatePicker view types
+ * @category Components
+ */
+export type DatePickerView = 'day' | 'month' | 'year';
+
+/**
+ * DatePicker selection mode types
+ * @category Components
+ */
+export type DatePickerSelectionMode = 'single' | 'range';
+
+/**
+ * Day names for the calendar
+ * @internal
+ */
+export const DAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+/**
+ * Month names for the calendar
+ * @internal
+ */
+export const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 
+  'May', 'June', 'July', 'August',
+  'September', 'October', 'November', 'December'
+];
+
+/**
+ * Month names abbreviated
+ * @internal
+ */
+export const MONTH_NAMES_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 
+  'May', 'Jun', 'Jul', 'Aug',
+  'Sep', 'Oct', 'Nov', 'Dec'
+];
+
+/**
+ * Default format for displaying dates
+ * @internal
+ */
+export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
+
+/**
+ * CSS class name for today's date
+ * @internal
+ */
+export const TODAY_CLASS = 'today';
+
+/**
+ * CSS class name for selected date
+ * @internal
+ */
+export const SELECTED_CLASS = 'selected';
+
+/**
+ * CSS class name for dates outside the current month
+ * @internal
+ */
+export const OUTSIDE_MONTH_CLASS = 'outside-month';
+
+/**
+ * CSS class for the first date in a range
+ * @internal
+ */
+export const RANGE_START_CLASS = 'range-start';
+
+/**
+ * CSS class for the last date in a range
+ * @internal
+ */
+export const RANGE_END_CLASS = 'range-end';
+
+/**
+ * CSS class for dates between start and end in a range
+ * @internal
+ */
+export const RANGE_MIDDLE_CLASS = 'range-middle';
+
+/**
+ * Configuration interface for the DatePicker component
+ * @category Components
+ */
+export interface DatePickerConfig {
+  /** 
+   * DatePicker variant that determines display style
+   * @default 'docked'
+   */
+  variant?: DatePickerVariant | string;
+  
+  /** 
+   * Whether the datepicker is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /** 
+   * Initial view to display (day, month, year)
+   * @default 'day'
+   */
+  initialView?: DatePickerView | string;
+  
+  /** 
+   * Selection mode for the datepicker (single or range)
+   * @default 'single'
+   */
+  selectionMode?: DatePickerSelectionMode | string;
+  
+  /** 
+   * Initial selected date(s)
+   * Accepts a Date object, Date string, or two dates for range selection
+   */
+  value?: Date | string | [Date | string, Date | string];
+  
+  /** 
+   * Minimum selectable date
+   */
+  minDate?: Date | string;
+  
+  /** 
+   * Maximum selectable date
+   */
+  maxDate?: Date | string;
+  
+  /** 
+   * Format for displaying dates
+   * @default 'MM/DD/YYYY'
+   */
+  dateFormat?: string;
+  
+  /** 
+   * Label text for the datepicker
+   * @example 'Select Date'
+   */
+  label?: string;
+  
+  /** 
+   * Placeholder text for the input field
+   * @example 'MM/DD/YYYY'
+   */
+  placeholder?: string;
+  
+  /** 
+   * Additional CSS classes to add to the datepicker
+   * @example 'form-field event-date'
+   */
+  class?: string;
+  
+  /** 
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+  
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+  
+  /**
+   * Whether to enable animation effects
+   * @default true
+   */
+  animate?: boolean;
+
+  /**
+   * Whether to close the picker when a date is selected
+   * @default true for modal variants, false for docked
+   */
+  closeOnSelect?: boolean;
+
+  /**
+   * Array of dates to highlight or disable
+   */
+  specialDates?: Array<{
+    date: Date | string;
+    highlight?: boolean;
+    disabled?: boolean;
+    tooltip?: string;
+  }>;
+}
+
+/**
+ * Date object with additional properties for rendering
+ * @internal
+ */
+export interface CalendarDate {
+  /** JavaScript Date object */
+  date: Date;
+  
+  /** Day of the month (1-31) */
+  day: number;
+  
+  /** Whether the date is in the current month being displayed */
+  isCurrentMonth: boolean;
+  
+  /** Whether the date is today */
+  isToday: boolean;
+  
+  /** Whether the date is selected */
+  isSelected: boolean;
+  
+  /** Whether the date is disabled */
+  isDisabled: boolean;
+  
+  /** Whether the date is the first date in a range */
+  isRangeStart?: boolean;
+  
+  /** Whether the date is the last date in a range */
+  isRangeEnd?: boolean;
+  
+  /** Whether the date is between start and end in a range */
+  isRangeMiddle?: boolean;
+}
+
+/**
+ * Calendar API interface for managing calendar navigation
+ * @category Components
+ */
+export interface CalendarAPI {
+  /** Updates the calendar view to display a specific month/year */
+  goToDate: (date: Date) => void;
+  
+  /** Moves to the next month */
+  nextMonth: () => void;
+  
+  /** Moves to the previous month */
+  prevMonth: () => void;
+  
+  /** Moves to the next year */
+  nextYear: () => void;
+  
+  /** Moves to the previous year */
+  prevYear: () => void;
+  
+  /** Switches to day selection view */
+  showDayView: () => void;
+  
+  /** Switches to month selection view */
+  showMonthView: () => void;
+  
+  /** Switches to year selection view */
+  showYearView: () => void;
+  
+  /** Gets the current calendar view */
+  getCurrentView: () => string;
+}
+
+/**
+ * DatePicker component interface
+ * @category Components
+ */
+export interface DatePickerComponent {
+  /** The datepicker's main DOM element */
+  element: HTMLElement;
+  
+  /** The input field DOM element */
+  input: HTMLInputElement;
+  
+  /** API for managing calendar and selected dates */
+  calendar: CalendarAPI;
+  
+  /** API for managing disabled state */
+  disabled: {
+    /** Enables the datepicker */
+    enable: () => void;
+    /** Disables the datepicker */
+    disable: () => void;
+    /** Checks if the datepicker is disabled */
+    isDisabled: () => 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 datepicker dropdown/modal
+   * @returns The datepicker component for chaining
+   */
+  open: () => DatePickerComponent;
+  
+  /**
+   * Closes the datepicker dropdown/modal
+   * @returns The datepicker component for chaining
+   */
+  close: () => DatePickerComponent;
+  
+  /**
+   * Gets the selected date(s)
+   * @returns Date object, array of two Date objects for range, or null if none selected
+   */
+  getValue: () => Date | [Date, Date] | null;
+  
+  /**
+   * Sets the selected date(s)
+   * @param value - Date, string, or array of dates for range selection
+   * @returns The datepicker component for chaining
+   */
+  setValue: (value: Date | string | [Date | string, Date | string]) => DatePickerComponent;
+  
+  /**
+   * Gets the formatted date string based on the selected date(s)
+   * @returns Formatted date string or empty string if none selected
+   */
+  getFormattedValue: () => string;
+  
+  /**
+   * Clears the selected date(s)
+   * @returns The datepicker component for chaining
+   */
+  clear: () => DatePickerComponent;
+  
+  /**
+   * Enables the datepicker
+   * @returns The datepicker component for chaining
+   */
+  enable: () => DatePickerComponent;
+  
+  /**
+   * Disables the datepicker
+   * @returns The datepicker component for chaining
+   */
+  disable: () => DatePickerComponent;
+  
+  /**
+   * Sets the minimum selectable date
+   * @param date - Date object or string
+   * @returns The datepicker component for chaining
+   */
+  setMinDate: (date: Date | string) => DatePickerComponent;
+  
+  /**
+   * Sets the maximum selectable date
+   * @param date - Date object or string
+   * @returns The datepicker component for chaining
+   */
+  setMaxDate: (date: Date | string) => DatePickerComponent;
+  
+  /**
+   * Destroys the datepicker component and cleans up resources
+   */
+  destroy: () => void;
+  
+  /**
+   * Adds an event listener to the datepicker
+   * @param event - Event name ('change', 'open', 'close', etc.)
+   * @param handler - Event handler function
+   * @returns The datepicker component for chaining
+   */
+  on: (event: string, handler: Function) => DatePickerComponent;
+  
+  /**
+   * Removes an event listener from the datepicker
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The datepicker component for chaining
+   */
+  off: (event: string, handler: Function) => DatePickerComponent;
+}
+
+/**
+ * API options interface for withAPI function
+ * @internal
+ */
+export interface ApiOptions {
+  disabled: {
+    enable: () => void;
+    disable: () => void;
+  };
+  lifecycle: {
+    destroy: () => void;
+  };
+  events: {
+    on: (event: string, handler: Function) => any;
+    off: (event: string, handler: Function) => any;
+    emit: (event: string, data: any) => any;
+  };
+}

package/src/components/datepicker/utils.ts

@@ -0,0 +1,289 @@
+// src/components/datepicker/utils.ts
+import { CalendarDate, MONTH_NAMES, MONTH_NAMES_SHORT } from './types';
+
+/**
+ * Parses a date from various input types
+ * @param date - Date string, Date object, or null
+ * @returns Valid Date object or null if invalid
+ */
+export const parseDate = (date: Date | string | null): Date | null => {
+  if (!date) return null;
+  
+  // Already a Date object
+  if (date instanceof Date) {
+    return isNaN(date.getTime()) ? null : date;
+  }
+  
+  // String date
+  if (typeof date === 'string') {
+    // Try to parse the string
+    const parsedDate = new Date(date);
+    return isNaN(parsedDate.getTime()) ? null : parsedDate;
+  }
+  
+  return null;
+};
+
+/**
+ * Formats a date according to the specified format using a parser-based approach
+ * This avoids string replacement issues by building the output string from scratch
+ * 
+ * @param date - Date to format
+ * @param format - Format string (MM/DD/YYYY, etc.)
+ * @returns Formatted date string
+ */
+export const formatDate = (date: Date | null, format: string = 'MM/DD/YYYY'): string => {
+  if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+    return '';
+  }
+  
+  let result = '';
+  let i = 0;
+  
+  while (i < format.length) {
+    // Check for month name patterns
+    if (format.substring(i, i+4) === 'MMMM') {
+      // Full month name
+      result += MONTH_NAMES[date.getMonth()];
+      i += 4;
+    } 
+    else if (format.substring(i, i+3) === 'MMM') {
+      // Abbreviated month name
+      result += MONTH_NAMES_SHORT[date.getMonth()];
+      i += 3;
+    }
+    else if (format.substring(i, i+2) === 'MM') {
+      // Two-digit month
+      result += (date.getMonth() + 1).toString().padStart(2, '0');
+      i += 2;
+    }
+    else if (format.substring(i, i+1) === 'M') {
+      // Single-digit month
+      result += (date.getMonth() + 1);
+      i += 1;
+    }
+    else if (format.substring(i, i+4) === 'YYYY') {
+      // 4-digit year
+      result += date.getFullYear();
+      i += 4;
+    }
+    else if (format.substring(i, i+2) === 'YY') {
+      // 2-digit year
+      result += date.getFullYear().toString().slice(-2);
+      i += 2;
+    }
+    else if (format.substring(i, i+2) === 'DD') {
+      // Two-digit day
+      result += date.getDate().toString().padStart(2, '0');
+      i += 2;
+    }
+    else if (format.substring(i, i+1) === 'D') {
+      // Single-digit day
+      result += date.getDate();
+      i += 1;
+    }
+    else {
+      // Any other character is copied as-is
+      result += format[i];
+      i += 1;
+    }
+  }
+  
+  return result;
+};
+
+/**
+ * Gets the days in a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Number of days in the month
+ */
+export const getDaysInMonth = (year: number, month: number): number => {
+  return new Date(year, month + 1, 0).getDate();
+};
+
+/**
+ * Gets the first day of the month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Day of the week (0-6, where 0 is Sunday)
+ */
+export const getFirstDayOfMonth = (year: number, month: number): number => {
+  return new Date(year, month, 1).getDay();
+};
+
+/**
+ * Checks if two dates are the same day
+ * @param date1 - First date
+ * @param date2 - Second date
+ * @returns True if same day, false otherwise
+ */
+export const isSameDay = (date1: Date, date2: Date): boolean => {
+  return (
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+  );
+};
+
+/**
+ * Checks if a date is between two other dates (inclusive)
+ * @param date - Date to check
+ * @param startDate - Start date
+ * @param endDate - End date
+ * @returns True if date is between start and end, false otherwise
+ */
+export const isDateInRange = (date: Date, startDate: Date, endDate: Date): boolean => {
+  const timestamp = date.getTime();
+  return timestamp >= startDate.getTime() && timestamp <= endDate.getTime();
+};
+
+/**
+ * Generates calendar dates for a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @param selectedDate - Currently selected date
+ * @param rangeEndDate - End date if range selection
+ * @param minDate - Minimum selectable date
+ * @param maxDate - Maximum selectable date
+ * @returns Array of calendar dates
+ */
+export const generateCalendarDates = (
+  year: number,
+  month: number,
+  selectedDate: Date | null = null,
+  rangeEndDate: Date | null = null,
+  minDate: Date | null = null,
+  maxDate: Date | null = null
+): CalendarDate[] => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  
+  const result: CalendarDate[] = [];
+  
+  // Calculate days needed from previous month
+  const firstDay = getFirstDayOfMonth(year, month);
+  const daysInPrevMonth = getDaysInMonth(year, month - 1);
+  
+  // Add days from previous month
+  for (let i = firstDay - 1; i >= 0; i--) {
+    const date = new Date(year, month - 1, daysInPrevMonth - i);
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    result.push({
+      date,
+      day: date.getDate(),
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isSelected: selectedDate ? isSameDay(date, selectedDate) : false,
+      isDisabled
+    });
+  }
+  
+  // Add days from current month
+  const daysInMonth = getDaysInMonth(year, month);
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const isSelected = selectedDate ? isSameDay(date, selectedDate) : false;
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    const calendarDate: CalendarDate = {
+      date,
+      day: i,
+      isCurrentMonth: true,
+      isToday: isSameDay(date, today),
+      isSelected,
+      isDisabled
+    };
+    
+    // Handle range selection
+    if (selectedDate && rangeEndDate) {
+      calendarDate.isRangeStart = isSameDay(date, selectedDate);
+      calendarDate.isRangeEnd = isSameDay(date, rangeEndDate);
+      calendarDate.isRangeMiddle = isDateInRange(date, selectedDate, rangeEndDate) && 
+        !calendarDate.isRangeStart && !calendarDate.isRangeEnd;
+    }
+    
+    result.push(calendarDate);
+  }
+  
+  // Add days from next month to complete the calendar grid (6 rows × 7 columns)
+  const totalDaysNeeded = 42; // 6 rows × 7 columns
+  const remainingDays = totalDaysNeeded - result.length;
+  
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(year, month + 1, i);
+    const isDisabled = 
+      (minDate && date < minDate) || 
+      (maxDate && date > maxDate);
+    
+    result.push({
+      date,
+      day: i,
+      isCurrentMonth: false,
+      isToday: isSameDay(date, today),
+      isSelected: selectedDate ? isSameDay(date, selectedDate) : false,
+      isDisabled
+    });
+  }
+  
+  return result;
+};
+
+/**
+ * Generates an array of years for year selection
+ * @param currentYear - Center year for the range
+ * @param range - Number of years before and after current year
+ * @returns Array of years
+ */
+export const generateYearRange = (currentYear: number, range: number = 10): number[] => {
+  const years: number[] = [];
+  const startYear = currentYear - range;
+  const endYear = currentYear + range;
+  
+  for (let year = startYear; year <= endYear; year++) {
+    years.push(year);
+  }
+  
+  return years;
+};
+
+/**
+ * Adds days to a date
+ * @param date - Base date
+ * @param days - Number of days to add
+ * @returns New date with days added
+ */
+export const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+/**
+ * Adds months to a date
+ * @param date - Base date
+ * @param months - Number of months to add
+ * @returns New date with months added
+ */
+export const addMonths = (date: Date, months: number): Date => {
+  const result = new Date(date);
+  result.setMonth(result.getMonth() + months);
+  return result;
+};
+
+/**
+ * Adds years to a date
+ * @param date - Base date
+ * @param years - Number of years to add
+ * @returns New date with years added
+ */
+export const addYears = (date: Date, years: number): Date => {
+  const result = new Date(date);
+  result.setFullYear(result.getFullYear() + years);
+  return result;
+};