mtrl 0.2.5 → 0.2.7

package/src/components/datepicker/render.ts

@@ -0,0 +1,452 @@
+// src/components/datepicker/render.ts
+import { 
+  MONTH_NAMES, 
+  MONTH_NAMES_SHORT, 
+  DAY_NAMES, 
+  TODAY_CLASS, 
+  SELECTED_CLASS, 
+  OUTSIDE_MONTH_CLASS,
+  RANGE_START_CLASS,
+  RANGE_END_CLASS,
+  RANGE_MIDDLE_CLASS,
+  DATEPICKER_VIEWS,
+  DATEPICKER_VARIANTS
+} from './constants';
+import { CalendarDate } from './types';
+import { 
+  generateCalendarDates,
+  generateYearRange 
+} from './utils';
+import { createElement } from '../../core/dom/create';
+
+/**
+ * Renders the calendar header with navigation controls
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Calendar header element
+ */
+export const renderHeader = ({
+  currentMonth,
+  currentYear,
+  currentView,
+  prefix,
+  emit
+}: any): HTMLElement => {
+  const header = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-header`
+  });
+
+  // Month selector
+  const monthButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-month-selector`,
+    text: MONTH_NAMES[currentMonth],
+    attrs: {
+      type: 'button',
+      'aria-label': 'Select month'
+    }
+  });
+  
+  // Year selector
+  const yearButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-year-selector`,
+    text: currentYear.toString(),
+    attrs: {
+      type: 'button',
+      'aria-label': 'Select year'
+    }
+  });
+  
+  // Navigation controls container
+  const navControls = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-nav-controls`
+  });
+  
+  // Previous button
+  const prevButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-prev-btn`,
+    html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>',
+    attrs: {
+      type: 'button',
+      'aria-label': currentView === DATEPICKER_VIEWS.DAY ? 'Previous month' : 
+                    currentView === DATEPICKER_VIEWS.MONTH ? 'Previous year' : 'Previous year range'
+    }
+  });
+  
+  // Next button
+  const nextButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-next-btn`,
+    html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>',
+    attrs: {
+      type: 'button',
+      'aria-label': currentView === DATEPICKER_VIEWS.DAY ? 'Next month' : 
+                    currentView === DATEPICKER_VIEWS.MONTH ? 'Next year' : 'Next year range'
+    }
+  });
+  
+  // Event listeners
+  monthButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    emit('viewChange', { view: DATEPICKER_VIEWS.MONTH });
+  });
+  
+  yearButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    emit('viewChange', { view: DATEPICKER_VIEWS.YEAR });
+  });
+  
+  prevButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    
+    if (currentView === DATEPICKER_VIEWS.DAY) {
+      emit('prevMonth');
+    } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+      emit('prevYear');
+    } else {
+      emit('prevYearRange');
+    }
+  });
+  
+  nextButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    
+    if (currentView === DATEPICKER_VIEWS.DAY) {
+      emit('nextMonth');
+    } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+      emit('nextYear');
+    } else {
+      emit('nextYearRange');
+    }
+  });
+  
+  // Add buttons to container
+  header.appendChild(monthButton);
+  header.appendChild(yearButton);
+  
+  navControls.appendChild(prevButton);
+  navControls.appendChild(nextButton);
+  header.appendChild(navControls);
+  
+  return header;
+};
+
+/**
+ * Renders the days of the week (S, M, T, etc.)
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Weekdays element
+ */
+export const renderWeekdays = (prefix: string): HTMLElement => {
+  const weekdaysRow = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-weekdays`
+  });
+  
+  DAY_NAMES.forEach(day => {
+    const dayElement = createElement({
+      tag: 'span',
+      className: `${prefix}-datepicker-weekday`,
+      text: day
+    });
+    weekdaysRow.appendChild(dayElement);
+  });
+  
+  return weekdaysRow;
+};
+
+/**
+ * Renders the calendar days
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Calendar days element
+ */
+export const renderDays = ({
+  currentYear,
+  currentMonth,
+  selectedDate,
+  rangeEndDate,
+  minDate,
+  maxDate,
+  prefix,
+  emit
+}: any): HTMLElement => {
+  const daysGrid = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-days`
+  });
+  
+  const calendarDates = generateCalendarDates(
+    currentYear,
+    currentMonth,
+    selectedDate,
+    rangeEndDate,
+    minDate,
+    maxDate
+  );
+  
+  calendarDates.forEach((calendarDate: CalendarDate) => {
+    const classNames = [
+      `${prefix}-datepicker-day`,
+      calendarDate.isCurrentMonth ? '' : OUTSIDE_MONTH_CLASS,
+      calendarDate.isToday ? TODAY_CLASS : '',
+      calendarDate.isSelected ? SELECTED_CLASS : '',
+      calendarDate.isDisabled ? 'disabled' : '',
+      calendarDate.isRangeStart ? RANGE_START_CLASS : '',
+      calendarDate.isRangeEnd ? RANGE_END_CLASS : '',
+      calendarDate.isRangeMiddle ? RANGE_MIDDLE_CLASS : ''
+    ].filter(Boolean).join(' ');
+    
+    const dayElement = createElement({
+      tag: 'button',
+      className: classNames,
+      text: calendarDate.day.toString(),
+      attrs: {
+        type: 'button',
+        'aria-label': calendarDate.date.toLocaleDateString(),
+        'aria-selected': calendarDate.isSelected ? 'true' : 'false',
+        'aria-disabled': calendarDate.isDisabled ? 'true' : 'false',
+        'data-date': calendarDate.date.toISOString(),
+        disabled: calendarDate.isDisabled
+      }
+    });
+    
+    // Event listener
+    dayElement.addEventListener('click', (event) => {
+      // Prevent event from bubbling up
+      event.stopPropagation();
+      
+      if (!calendarDate.isDisabled) {
+        emit('dateSelected', { date: calendarDate.date });
+      }
+    });
+    
+    daysGrid.appendChild(dayElement);
+  });
+  
+  return daysGrid;
+};
+
+/**
+ * Renders the month selection view
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Month selection element
+ */
+export const renderMonthSelection = ({
+  currentYear,
+  currentMonth,
+  prefix,
+  emit
+}: any): HTMLElement => {
+  const monthsGrid = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-months`
+  });
+  
+  MONTH_NAMES_SHORT.forEach((month, index) => {
+    const isSelected = index === currentMonth;
+    
+    const monthElement = createElement({
+      tag: 'button',
+      className: `${prefix}-datepicker-month ${isSelected ? SELECTED_CLASS : ''}`,
+      text: month,
+      attrs: {
+        type: 'button',
+        'aria-selected': isSelected ? 'true' : 'false',
+        'data-month': index.toString()
+      }
+    });
+    
+    monthElement.addEventListener('click', (event) => {
+      // Prevent event from bubbling up
+      event.stopPropagation();
+      emit('monthSelected', { month: index });
+    });
+    
+    monthsGrid.appendChild(monthElement);
+  });
+  
+  return monthsGrid;
+};
+
+/**
+ * Renders the year selection view
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Year selection element
+ */
+export const renderYearSelection = ({
+  currentYear,
+  prefix,
+  emit
+}: any): HTMLElement => {
+  const yearsGrid = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-years`
+  });
+  
+  const yearRange = generateYearRange(currentYear, 10);
+  
+  yearRange.forEach(year => {
+    const isSelected = year === currentYear;
+    
+    const yearElement = createElement({
+      tag: 'button',
+      className: `${prefix}-datepicker-year ${isSelected ? SELECTED_CLASS : ''}`,
+      text: year.toString(),
+      attrs: {
+        type: 'button',
+        'aria-selected': isSelected ? 'true' : 'false',
+        'data-year': year.toString()
+      }
+    });
+    
+    yearElement.addEventListener('click', (event) => {
+      // Prevent event from bubbling up
+      event.stopPropagation();
+      emit('yearSelected', { year });
+    });
+    
+    yearsGrid.appendChild(yearElement);
+  });
+  
+  return yearsGrid;
+};
+
+/**
+ * Renders the footer with action buttons
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Footer element
+ */
+export const renderFooter = ({
+  variant,
+  prefix,
+  emit
+}: any): HTMLElement => {
+  const footer = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-footer`
+  });
+  
+  // Cancel button
+  const cancelButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-cancel ${prefix}-button ${prefix}-button--text`,
+    text: 'Cancel',
+    attrs: {
+      type: 'button'
+    }
+  });
+  
+  // OK button
+  const okButton = createElement({
+    tag: 'button',
+    className: `${prefix}-datepicker-ok ${prefix}-button ${prefix}-button--text`,
+    text: 'OK',
+    attrs: {
+      type: 'button'
+    }
+  });
+  
+  cancelButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    emit('cancel');
+  });
+  
+  okButton.addEventListener('click', (event) => {
+    // Prevent event from bubbling up
+    event.stopPropagation();
+    emit('confirm');
+  });
+  
+  footer.appendChild(cancelButton);
+  footer.appendChild(okButton);
+  
+  return footer;
+};
+
+/**
+ * Renders a complete calendar view
+ * @param {Object} state - Current datepicker state
+ * @param {Function} emit - Event emission function
+ * @returns {HTMLElement} Rendered calendar
+ */
+export const renderCalendar = (state: any, emit: Function): HTMLElement => {
+  const { 
+    prefix, 
+    currentView, 
+    currentMonth, 
+    currentYear,
+    selectedDate,
+    rangeEndDate,
+    minDate,
+    maxDate,
+    variant
+  } = state;
+  
+  // Create calendar container
+  const calendar = createElement({
+    tag: 'div',
+    className: `${prefix}-datepicker-calendar-content`
+  });
+  
+  // Render header
+  const header = renderHeader({
+    currentMonth,
+    currentYear,
+    currentView,
+    prefix,
+    emit
+  });
+  calendar.appendChild(header);
+  
+  // Render content based on current view
+  if (currentView === DATEPICKER_VIEWS.DAY) {
+    const weekdays = renderWeekdays(prefix);
+    calendar.appendChild(weekdays);
+    
+    const days = renderDays({
+      currentYear,
+      currentMonth,
+      selectedDate,
+      rangeEndDate,
+      minDate,
+      maxDate,
+      prefix,
+      emit
+    });
+    calendar.appendChild(days);
+  } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+    const months = renderMonthSelection({
+      currentYear,
+      currentMonth,
+      prefix,
+      emit
+    });
+    calendar.appendChild(months);
+  } else if (currentView === DATEPICKER_VIEWS.YEAR) {
+    const years = renderYearSelection({
+      currentYear,
+      prefix,
+      emit
+    });
+    calendar.appendChild(years);
+  }
+  
+  // Only add footer for modal variants
+  if (variant !== DATEPICKER_VARIANTS.DOCKED) {
+    const footer = renderFooter({
+      variant,
+      prefix,
+      emit
+    });
+    calendar.appendChild(footer);
+  }
+  
+  return calendar;
+};

package/src/components/datepicker/types.ts

@@ -0,0 +1,268 @@
+// src/components/datepicker/types.ts
+import { 
+  DATEPICKER_VARIANTS, 
+  DATEPICKER_VIEWS, 
+  DATEPICKER_SELECTION_MODES 
+} from './constants';
+
+/**
+ * Configuration interface for the DatePicker component
+ * @category Components
+ */
+export interface DatePickerConfig {
+  /** 
+   * DatePicker variant that determines display style
+   * @default 'docked'
+   */
+  variant?: keyof typeof DATEPICKER_VARIANTS | string;
+  
+  /** 
+   * Whether the datepicker is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /** 
+   * Initial view to display (day, month, year)
+   * @default 'day'
+   */
+  initialView?: keyof typeof DATEPICKER_VIEWS | string;
+  
+  /** 
+   * Selection mode for the datepicker (single or range)
+   * @default 'single'
+   */
+  selectionMode?: keyof typeof DATEPICKER_SELECTION_MODES | 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;
+}
+
+/**
+ * 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: {
+    /** 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;
+  };
+  
+  /**
+   * 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;
+}