mtrl 0.2.5 → 0.2.7

package/src/components/datepicker/config.ts

@@ -0,0 +1,144 @@
+// src/components/datepicker/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { DatePickerConfig } from './types';
+import { 
+  DATEPICKER_VARIANTS, 
+  DATEPICKER_VIEWS, 
+  DATEPICKER_SELECTION_MODES,
+  DEFAULT_DATE_FORMAT
+} from './constants';
+
+/**
+ * Default configuration for the DatePicker component
+ */
+export const defaultConfig: DatePickerConfig = {
+  variant: DATEPICKER_VARIANTS.DOCKED,
+  initialView: DATEPICKER_VIEWS.DAY,
+  selectionMode: DATEPICKER_SELECTION_MODES.SINGLE,
+  dateFormat: DEFAULT_DATE_FORMAT,
+  animate: true
+};
+
+/**
+ * Creates the base configuration for DatePicker component
+ * @param {DatePickerConfig} config - User provided configuration
+ * @returns {DatePickerConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: DatePickerConfig = {}): DatePickerConfig => {
+  const baseConfig = createComponentConfig(defaultConfig, config, 'datepicker') as DatePickerConfig;
+  
+  // Set closeOnSelect default based on variant
+  if (baseConfig.closeOnSelect === undefined) {
+    baseConfig.closeOnSelect = baseConfig.variant !== DATEPICKER_VARIANTS.DOCKED;
+  }
+  
+  return baseConfig;
+};
+
+/**
+ * Generates element configuration for the DatePicker container
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getContainerConfig = (config: DatePickerConfig) => {
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      role: 'application',
+      'aria-label': 'Date Picker',
+      tabindex: '-1'
+    },
+    className: [
+      `${config.prefix}-datepicker-container`,
+      config.class
+    ],
+    forwardEvents: {
+      keydown: true,
+      click: true
+    },
+    interactive: true
+  });
+};
+
+/**
+ * Generates element configuration for the input field
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for input field
+ */
+export const getInputConfig = (config: DatePickerConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    type: 'text',
+    placeholder: config.placeholder || config.dateFormat,
+    autocomplete: 'off',
+    readonly: true
+  };
+  
+  // Only add disabled attribute if it's explicitly true
+  if (config.disabled === true) {
+    attrs.disabled = true;
+  }
+  
+  return createElementConfig(config, {
+    tag: 'input',
+    attrs,
+    className: `${config.prefix}-datepicker-input`,
+    forwardEvents: {
+      focus: true,
+      blur: true,
+      click: true
+    },
+    interactive: true
+  });
+};
+
+/**
+ * Generates element configuration for the calendar container
+ * @param {DatePickerConfig} config - DatePicker configuration
+ * @returns {Object} Element configuration object for calendar container
+ */
+export const getCalendarConfig = (config: DatePickerConfig) => {
+  return createElementConfig(config, {
+    tag: 'div',
+    attrs: {
+      role: 'dialog',
+      'aria-modal': config.variant !== DATEPICKER_VARIANTS.DOCKED ? 'true' : 'false'
+    },
+    className: [
+      `${config.prefix}-datepicker-calendar`,
+      `${config.prefix}-datepicker-${config.variant}`,
+      config.selectionMode === DATEPICKER_SELECTION_MODES.RANGE ? 
+        `${config.prefix}-datepicker-range` : ''
+    ],
+    forwardEvents: {
+      keydown: true,
+      click: true
+    }
+  });
+};
+
+/**
+ * Creates API configuration for the DatePicker component
+ * @param {Object} comp - Component with features like disabled and lifecycle
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp: any) => ({
+  disabled: {
+    enable: () => comp.disabled.enable(),
+    disable: () => comp.disabled.disable()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  },
+  events: {
+    on: comp.on,
+    off: comp.off,
+    emit: comp.emit
+  }
+});
+
+export default defaultConfig;

package/src/components/datepicker/constants.ts

@@ -0,0 +1,98 @@
+// src/components/datepicker/constants.ts
+
+/**
+ * DatePicker variant types
+ */
+export const DATEPICKER_VARIANTS = {
+  /** Displays inline with a text field above the calendar */
+  DOCKED: 'docked',
+  
+  /** Displays as a modal dialog */
+  MODAL: 'modal',
+  
+  /** Displays as a modal dialog with text input */
+  MODAL_INPUT: 'modal-input'
+};
+
+/**
+ * DatePicker view types
+ */
+export const DATEPICKER_VIEWS = {
+  /** Calendar day selection view */
+  DAY: 'day',
+  
+  /** Month selection view */
+  MONTH: 'month',
+  
+  /** Year selection view */
+  YEAR: 'year'
+};
+
+/**
+ * DatePicker selection modes
+ */
+export const DATEPICKER_SELECTION_MODES = {
+  /** Single date selection */
+  SINGLE: 'single',
+  
+  /** Date range selection */
+  RANGE: 'range'
+};
+
+/**
+ * Day names for the calendar
+ */
+export const DAY_NAMES = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+
+/**
+ * Month names for the calendar
+ */
+export const MONTH_NAMES = [
+  'January', 'February', 'March', 'April', 
+  'May', 'June', 'July', 'August',
+  'September', 'October', 'November', 'December'
+];
+
+/**
+ * Month names abbreviated
+ */
+export const MONTH_NAMES_SHORT = [
+  'Jan', 'Feb', 'Mar', 'Apr', 
+  'May', 'Jun', 'Jul', 'Aug',
+  'Sep', 'Oct', 'Nov', 'Dec'
+];
+
+/**
+ * Default format for displaying dates
+ */
+export const DEFAULT_DATE_FORMAT = 'MM/DD/YYYY';
+
+/**
+ * CSS class name for today's date
+ */
+export const TODAY_CLASS = 'today';
+
+/**
+ * CSS class name for selected date
+ */
+export const SELECTED_CLASS = 'selected';
+
+/**
+ * CSS class name for dates outside the current month
+ */
+export const OUTSIDE_MONTH_CLASS = 'outside-month';
+
+/**
+ * CSS class for the first date in a range
+ */
+export const RANGE_START_CLASS = 'range-start';
+
+/**
+ * CSS class for the last date in a range
+ */
+export const RANGE_END_CLASS = 'range-end';
+
+/**
+ * CSS class for dates between start and end in a range
+ */
+export const RANGE_MIDDLE_CLASS = 'range-middle';

package/src/components/datepicker/datepicker.ts

@@ -0,0 +1,346 @@
+// src/components/datepicker/datepicker.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+
+import { withAPI } from './api';
+import { DatePickerConfig } from './types';
+import { 
+  DATEPICKER_VARIANTS, 
+  DATEPICKER_VIEWS, 
+  DATEPICKER_SELECTION_MODES 
+} from './constants';
+import { 
+  createBaseConfig, 
+  getContainerConfig, 
+  getInputConfig, 
+  getCalendarConfig, 
+  getApiConfig 
+} from './config';
+import { 
+  formatDate, 
+  parseDate, 
+  isSameDay 
+} from './utils';
+import { 
+  renderCalendar 
+} from './render';
+import { createElement } from '../../core/dom/create';
+
+/**
+ * Creates a new DatePicker component
+ * @param {DatePickerConfig} config - DatePicker configuration object
+ * @returns {DatePickerComponent} DatePicker component instance
+ */
+const createDatePicker = (config: DatePickerConfig = {}) => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    // Initialize state
+    const state: any = {
+      isOpen: false,
+      selectedDate: null,
+      rangeEndDate: null,
+      currentView: baseConfig.initialView,
+      currentMonth: new Date().getMonth(),
+      currentYear: new Date().getFullYear(),
+      minDate: baseConfig.minDate ? parseDate(baseConfig.minDate) : null,
+      maxDate: baseConfig.maxDate ? parseDate(baseConfig.maxDate) : null,
+      dateFormat: baseConfig.dateFormat,
+      variant: baseConfig.variant,
+      selectionMode: baseConfig.selectionMode,
+      closeOnSelect: baseConfig.closeOnSelect,
+      prefix: baseConfig.prefix || PREFIX,
+      calendarElement: null,
+      input: null,
+      
+      updateInputValue(): void {
+        if (!this.input) return;
+        
+        if (!this.selectedDate) {
+          this.input.value = '';
+          return;
+        }
+        
+        // Format for range selection
+        if (this.selectionMode === DATEPICKER_SELECTION_MODES.RANGE && this.rangeEndDate) {
+          const startStr = formatDate(this.selectedDate, this.dateFormat);
+          const endStr = formatDate(this.rangeEndDate, this.dateFormat);
+          this.input.value = `${startStr} - ${endStr}`;
+          return;
+        }
+        
+        // Format for single selection
+        this.input.value = formatDate(this.selectedDate, this.dateFormat);
+      },
+      
+      updateCalendar(): void {
+        if (!this.isOpen || !this.calendarElement) return;
+        
+        // Clear existing content
+        this.calendarElement.innerHTML = '';
+        
+        // Render calendar content
+        const calendar = renderCalendar(this, (event, data) => {
+          switch (event) {
+            case 'dateSelected':
+              this.handleDateSelection(data.date);
+              break;
+              
+            case 'monthSelected':
+              this.currentMonth = data.month;
+              this.currentView = DATEPICKER_VIEWS.DAY;
+              this.updateCalendar();
+              break;
+              
+            case 'yearSelected':
+              this.currentYear = data.year;
+              this.currentView = DATEPICKER_VIEWS.MONTH;
+              this.updateCalendar();
+              break;
+              
+            case 'viewChange':
+              this.currentView = data.view;
+              this.updateCalendar();
+              break;
+              
+            case 'prevMonth':
+              this.prevMonth();
+              break;
+              
+            case 'nextMonth':
+              this.nextMonth();
+              break;
+              
+            case 'prevYear':
+              this.prevYear();
+              break;
+              
+            case 'nextYear':
+              this.nextYear();
+              break;
+              
+            case 'prevYearRange':
+              this.currentYear -= 20;
+              this.updateCalendar();
+              break;
+              
+            case 'nextYearRange':
+              this.currentYear += 20;
+              this.updateCalendar();
+              break;
+              
+            case 'cancel':
+              this.isOpen = false;
+              this.render();
+              break;
+              
+            case 'confirm':
+              this.isOpen = false;
+              this.render();
+              break;
+          }
+        });
+        
+        this.calendarElement.appendChild(calendar);
+      },
+      
+      handleDateSelection(date: Date): void {
+        // Range selection
+        if (this.selectionMode === DATEPICKER_SELECTION_MODES.RANGE) {
+          // If no date is selected yet or both dates are already selected, start a new range
+          if (!this.selectedDate || (this.selectedDate && this.rangeEndDate)) {
+            this.selectedDate = date;
+            this.rangeEndDate = null;
+          } 
+          // If start date is selected but not end date
+          else {
+            // If selected date is before the start date, swap them
+            if (date < this.selectedDate) {
+              this.rangeEndDate = this.selectedDate;
+              this.selectedDate = date;
+            } else {
+              this.rangeEndDate = date;
+            }
+            
+            // Close if needed
+            if (this.closeOnSelect) {
+              this.isOpen = false;
+            }
+          }
+        } 
+        // Single date selection
+        else {
+          this.selectedDate = date;
+          
+          // Close if needed
+          if (this.closeOnSelect) {
+            this.isOpen = false;
+          }
+        }
+        
+        // Update the input value
+        this.updateInputValue();
+        
+        // Update the calendar view
+        this.updateCalendar();
+        
+        // Emit change event
+        component.emit('change', { 
+          value: this.selectedDate, 
+          rangeEndDate: this.rangeEndDate,
+          formattedValue: this.input.value
+        });
+      },
+      
+      prevMonth(): void {
+        if (this.currentMonth === 0) {
+          this.currentMonth = 11;
+          this.currentYear--;
+        } else {
+          this.currentMonth--;
+        }
+        this.updateCalendar();
+      },
+      
+      nextMonth(): void {
+        if (this.currentMonth === 11) {
+          this.currentMonth = 0;
+          this.currentYear++;
+        } else {
+          this.currentMonth++;
+        }
+        this.updateCalendar();
+      },
+      
+      prevYear(): void {
+        this.currentYear--;
+        this.updateCalendar();
+      },
+      
+      nextYear(): void {
+        this.currentYear++;
+        this.updateCalendar();
+      },
+      
+      render(): void {
+        // Show/hide calendar
+        if (this.calendarElement) {
+          if (this.isOpen) {
+            this.calendarElement.style.display = 'block';
+            this.updateCalendar();
+            
+            // Focus on the calendar
+            setTimeout(() => {
+              this.calendarElement.focus();
+            }, 10);
+          } else {
+            this.calendarElement.style.display = 'none';
+          }
+        }
+      }
+    };
+    
+    // Initialize with provided value if any
+    if (baseConfig.value) {
+      if (Array.isArray(baseConfig.value) && baseConfig.selectionMode === DATEPICKER_SELECTION_MODES.RANGE) {
+        const start = parseDate(baseConfig.value[0]);
+        const end = parseDate(baseConfig.value[1]);
+        
+        if (start && end) {
+          state.selectedDate = start;
+          state.rangeEndDate = end;
+          
+          // Set current month/year to selected date
+          state.currentMonth = start.getMonth();
+          state.currentYear = start.getFullYear();
+        }
+      } else {
+        const date = parseDate(baseConfig.value as Date | string);
+        if (date) {
+          state.selectedDate = date;
+          state.currentMonth = date.getMonth();
+          state.currentYear = date.getFullYear();
+        }
+      }
+    }
+    
+    // Create the component
+    const component = pipe(
+      createBase,
+      withEvents(),
+      withElement(getContainerConfig(baseConfig)),
+      withDisabled(baseConfig),
+      withLifecycle()
+    )(baseConfig);
+    
+    // Create input element
+    const inputComponent = pipe(
+      createBase,
+      withElement(getInputConfig(baseConfig))
+    )(baseConfig);
+    
+    state.input = inputComponent.element;
+    component.element.appendChild(state.input);
+    
+    // Update input value
+    state.updateInputValue();
+    
+    // Create calendar element
+    const calendarConfig = getCalendarConfig(baseConfig);
+    state.calendarElement = createElement({
+      tag: 'div',
+      className: calendarConfig.className,
+      attrs: calendarConfig.attrs
+    });
+    
+    // Initially hide calendar
+    state.calendarElement.style.display = 'none';
+    
+    // Add calendar to container
+    component.element.appendChild(state.calendarElement);
+    
+    // Add event listeners
+    state.input.addEventListener('click', () => {
+      if (!component.element.classList.contains('disabled')) {
+        state.isOpen = !state.isOpen;
+        state.render();
+        
+        if (state.isOpen) {
+          component.emit('open', { value: state.selectedDate });
+        } else {
+          component.emit('close', { value: state.selectedDate });
+        }
+      }
+    });
+    
+    // BUGFIX: Prevent calendar close when clicking inside the calendar
+    state.calendarElement.addEventListener('click', (event) => {
+      // Stop propagation to prevent the document click handler from closing the calendar
+      event.stopPropagation();
+    });
+    
+    // Handle outside clicks
+    document.addEventListener('click', (event) => {
+      if (state.isOpen && 
+          !component.element.contains(event.target as Node)) {
+        state.isOpen = false;
+        state.render();
+        component.emit('close', { value: state.selectedDate });
+      }
+    });
+    
+    // Enhance with API
+    return withAPI(state, getApiConfig(component))(component);
+  } catch (error) {
+    console.error('DatePicker creation error:', error);
+    throw new Error(`Failed to create DatePicker: ${(error as Error).message}`);
+  }
+};
+
+export default createDatePicker;

package/src/components/datepicker/index.ts

@@ -0,0 +1,9 @@
+// src/components/datepicker/index.ts
+export { default } from './datepicker'
+export {
+  DATEPICKER_VARIANTS,
+  DATEPICKER_VIEWS,
+  DATEPICKER_SELECTION_MODES,
+  DEFAULT_DATE_FORMAT
+} from './constants'
+export { DatePickerConfig, DatePickerComponent } from './types'