mtrl 0.3.8 → 0.3.9

package/src/components/datepicker/types.ts

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

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