mtrl 0.2.7 → 0.2.8

package/src/components/datepicker/render.ts

@@ -8,10 +8,8 @@ import {
   OUTSIDE_MONTH_CLASS,
   RANGE_START_CLASS,
   RANGE_END_CLASS,
-  RANGE_MIDDLE_CLASS,
-  DATEPICKER_VIEWS,
-  DATEPICKER_VARIANTS
-} from './constants';
+  RANGE_MIDDLE_CLASS
+} from './types';
 import { CalendarDate } from './types';
 import { 
   generateCalendarDates,
@@ -71,8 +69,8 @@ export const renderHeader = ({
     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'
+      'aria-label': currentView === 'day' ? 'Previous month' : 
+                    currentView === 'month' ? 'Previous year' : 'Previous year range'
     }
   });
   
@@ -83,8 +81,8 @@ export const renderHeader = ({
     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'
+      'aria-label': currentView === 'day' ? 'Next month' : 
+                    currentView === 'month' ? 'Next year' : 'Next year range'
     }
   });
   
@@ -92,22 +90,22 @@ export const renderHeader = ({
   monthButton.addEventListener('click', (event) => {
     // Prevent event from bubbling up
     event.stopPropagation();
-    emit('viewChange', { view: DATEPICKER_VIEWS.MONTH });
+    emit('viewChange', { view: 'month' });
   });
   
   yearButton.addEventListener('click', (event) => {
     // Prevent event from bubbling up
     event.stopPropagation();
-    emit('viewChange', { view: DATEPICKER_VIEWS.YEAR });
+    emit('viewChange', { view: 'year' });
   });
   
   prevButton.addEventListener('click', (event) => {
     // Prevent event from bubbling up
     event.stopPropagation();
     
-    if (currentView === DATEPICKER_VIEWS.DAY) {
+    if (currentView === 'day') {
       emit('prevMonth');
-    } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+    } else if (currentView === 'month') {
       emit('prevYear');
     } else {
       emit('prevYearRange');
@@ -118,9 +116,9 @@ export const renderHeader = ({
     // Prevent event from bubbling up
     event.stopPropagation();
     
-    if (currentView === DATEPICKER_VIEWS.DAY) {
+    if (currentView === 'day') {
       emit('nextMonth');
-    } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+    } else if (currentView === 'month') {
       emit('nextYear');
     } else {
       emit('nextYearRange');
@@ -406,7 +404,7 @@ export const renderCalendar = (state: any, emit: Function): HTMLElement => {
   calendar.appendChild(header);
   
   // Render content based on current view
-  if (currentView === DATEPICKER_VIEWS.DAY) {
+  if (currentView === 'day') {
     const weekdays = renderWeekdays(prefix);
     calendar.appendChild(weekdays);
     
@@ -421,7 +419,7 @@ export const renderCalendar = (state: any, emit: Function): HTMLElement => {
       emit
     });
     calendar.appendChild(days);
-  } else if (currentView === DATEPICKER_VIEWS.MONTH) {
+  } else if (currentView === 'month') {
     const months = renderMonthSelection({
       currentYear,
       currentMonth,
@@ -429,7 +427,7 @@ export const renderCalendar = (state: any, emit: Function): HTMLElement => {
       emit
     });
     calendar.appendChild(months);
-  } else if (currentView === DATEPICKER_VIEWS.YEAR) {
+  } else if (currentView === 'year') {
     const years = renderYearSelection({
       currentYear,
       prefix,
@@ -439,7 +437,7 @@ export const renderCalendar = (state: any, emit: Function): HTMLElement => {
   }
   
   // Only add footer for modal variants
-  if (variant !== DATEPICKER_VARIANTS.DOCKED) {
+  if (variant !== 'docked') {
     const footer = renderFooter({
       variant,
       prefix,

package/src/components/datepicker/types.ts

@@ -1,9 +1,90 @@
 // src/components/datepicker/types.ts
-import { 
-  DATEPICKER_VARIANTS, 
-  DATEPICKER_VIEWS, 
-  DATEPICKER_SELECTION_MODES 
-} from './constants';
+
+/**
+ * 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
@@ -14,7 +95,7 @@ export interface DatePickerConfig {
    * DatePicker variant that determines display style
    * @default 'docked'
    */
-  variant?: keyof typeof DATEPICKER_VARIANTS | string;
+  variant?: DatePickerVariant | string;
   
   /** 
    * Whether the datepicker is initially disabled
@@ -26,13 +107,13 @@ export interface DatePickerConfig {
    * Initial view to display (day, month, year)
    * @default 'day'
    */
-  initialView?: keyof typeof DATEPICKER_VIEWS | string;
+  initialView?: DatePickerView | string;
   
   /** 
    * Selection mode for the datepicker (single or range)
    * @default 'single'
    */
-  selectionMode?: keyof typeof DATEPICKER_SELECTION_MODES | string;
+  selectionMode?: DatePickerSelectionMode | string;
   
   /** 
    * Initial selected date(s)
@@ -141,6 +222,39 @@ export interface CalendarDate {
   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
@@ -153,35 +267,31 @@ export interface DatePickerComponent {
   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;
+  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
@@ -265,4 +375,23 @@ export interface DatePickerComponent {
    * @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,6 +1,5 @@
 // src/components/datepicker/utils.ts
-import { CalendarDate } from './types';
-import { MONTH_NAMES, MONTH_NAMES_SHORT } from './constants';
+import { CalendarDate, MONTH_NAMES, MONTH_NAMES_SHORT } from './types';
 
 /**
  * Parses a date from various input types

package/src/components/dialog/api.ts

@@ -1,6 +1,5 @@
 // src/components/dialog/api.ts (partial update)
-import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions } from './types';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
+import { DialogComponent, DialogEvent, DialogButton, DialogConfirmOptions, DialogFooterAlignment, DialogSize, DialogEventType } from './types';
 import { removeClass } from '../../core/dom/classes';
 
 interface ApiOptions {
@@ -25,14 +24,14 @@ interface ApiOptions {
     addButton: (button: DialogButton) => void;
     removeButton: (indexOrText: number | string) => void;
     getButtons: () => DialogButton[];
-    setFooterAlignment: (alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) => void;
+    setFooterAlignment: (alignment: DialogFooterAlignment | string) => void;
   };
   focus: {
     trapFocus: () => void;
     releaseFocus: () => void;
   };
   size: {
-    setSize: (size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) => void;
+    setSize: (size: DialogSize | string) => void;
   };
   dividers: {
     toggleHeaderDivider: (show: boolean) => void;
@@ -188,7 +187,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {string} alignment - Footer alignment
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    setFooterAlignment(alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) {
+    setFooterAlignment(alignment: DialogFooterAlignment | string) {
       options.buttons.setFooterAlignment(alignment);
       return this;
     },
@@ -216,7 +215,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {string} size - Size variant
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
+    setSize(size: DialogSize | string) {
       options.size.setSize(size);
       return this;
     },
@@ -227,7 +226,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {Function} handler - Event handler
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    on(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+    on(event: DialogEventType | string, handler: (event: DialogEvent) => void) {
       options.events.on(event, handler);
       return this;
     },
@@ -238,7 +237,7 @@ export const withAPI = (options: ApiOptions) =>
      * @param {Function} handler - Event handler
      * @returns {DialogComponent} Dialog component instance for chaining
      */
-    off(event: keyof typeof DIALOG_EVENTS | DIALOG_EVENTS, handler: (event: DialogEvent) => void) {
+    off(event: DialogEventType | string, handler: (event: DialogEvent) => void) {
       options.events.off(event, handler);
       return this;
     },

package/src/components/dialog/config.ts

@@ -4,15 +4,14 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { DialogConfig } from './types';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS } from './constants';
 
 /**
  * Default configuration for the Dialog component
  */
 export const defaultConfig: DialogConfig = {
-  size: DIALOG_SIZES.MEDIUM,
-  animation: DIALOG_ANIMATIONS.SCALE,
-  footerAlignment: DIALOG_FOOTER_ALIGNMENTS.RIGHT,
+  size: 'medium',
+  animation: 'scale',
+  footerAlignment: 'right',
   open: false,
   closeButton: true,
   closeOnOverlayClick: true,

package/src/components/dialog/features.ts

@@ -1,13 +1,40 @@
 // src/components/dialog/features.ts (partial updated code)
 
 import { getOverlayConfig } from './config';
-import { DIALOG_SIZES, DIALOG_ANIMATIONS, DIALOG_FOOTER_ALIGNMENTS, DIALOG_EVENTS } from './constants';
-import { DialogConfig, DialogButton, DialogEvent } from './types';
+import { DialogConfig, DialogButton } from './types';
 import createButton from '../button';
 import { createDivider } from '../divider'; // Import the divider component
-import { BUTTON_VARIANTS } from '../button/constants';
 import { addClass, removeClass, hasClass } from '../../core/dom/classes';
 
+// Common constants for internal use
+const SIZE_MEDIUM = 'medium';
+const ANIMATION_SCALE = 'scale';
+const FOOTER_ALIGNMENT_RIGHT = 'right';
+const EVENT_BEFORE_OPEN = 'beforeopen';
+const EVENT_OPEN = 'open';
+const EVENT_AFTER_OPEN = 'afteropen';
+const EVENT_BEFORE_CLOSE = 'beforeclose';
+const EVENT_CLOSE = 'close';
+const EVENT_AFTER_CLOSE = 'afterclose';
+
+// Common button variants for internal use
+const BUTTON_VARIANT_TEXT = 'text';
+const BUTTON_VARIANT_FILLED = 'filled';
+
+// Arrays for class management
+const ALL_SIZES = ['small', 'medium', 'large', 'fullwidth', 'fullscreen'];
+const ALL_ANIMATIONS = ['scale', 'slide-up', 'slide-down', 'fade'];
+const ALL_FOOTER_ALIGNMENTS = ['right', 'left', 'center', 'space-between'];
+
+const DIALOG_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  BEFORE_OPEN: 'beforeopen',
+  BEFORE_CLOSE: 'beforeclose',
+  AFTER_OPEN: 'afteropen',
+  AFTER_CLOSE: 'afterclose'
+};
+
 /**
  * Creates the dialog DOM structure with proper divider handling
  * @param config Dialog configuration
@@ -102,8 +129,8 @@ export const withStructure = (config: DialogConfig) => component => {
     footer.classList.add(component.getClass('dialog-footer'));
     
     // Apply footer alignment
-    const alignment = config.footerAlignment || DIALOG_FOOTER_ALIGNMENTS.RIGHT;
-    if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
+    const alignment = config.footerAlignment || 'right';
+    if (alignment !== 'right') {
       addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
     }
     
@@ -132,14 +159,14 @@ export const withStructure = (config: DialogConfig) => component => {
   addClass(component.element, component.getClass('dialog'));
   
   // Apply size class
-  const size = config.size || DIALOG_SIZES.MEDIUM;
-  if (size !== DIALOG_SIZES.MEDIUM) {
+  const size = config.size || 'medium';
+  if (size !== 'medium') {
     addClass(component.element, `${component.getClass('dialog')}--${size}`);
   }
   
   // Apply animation class
-  const animation = config.animation || DIALOG_ANIMATIONS.SCALE;
-  if (animation !== DIALOG_ANIMATIONS.SCALE) {
+  const animation = config.animation || 'scale';
+  if (animation !== 'scale') {
     addClass(component.element, `${component.getClass('dialog')}--${animation}`);
   }
   
@@ -282,7 +309,7 @@ export const withDivider = () => component => {
 const addButton = (footer: HTMLElement, buttonConfig: DialogButton, component: any) => {
   const {
     text,
-    variant = BUTTON_VARIANTS.TEXT,
+    variant = 'text', // Using string literal directly instead of BUTTON_VARIANTS.TEXT
     onClick,
     closeDialog = true,
     autofocus = false,
@@ -718,8 +745,8 @@ export const withButtons = () => component => {
           footer.classList.add(component.getClass('dialog-footer'));
           
           // Apply footer alignment
-          const alignment = component.config.footerAlignment || DIALOG_FOOTER_ALIGNMENTS.RIGHT;
-          if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
+          const alignment = component.config.footerAlignment || 'right';
+          if (alignment !== 'right') {
             addClass(footer, `${component.getClass('dialog-footer')}--${alignment}`);
           }
           
@@ -774,18 +801,21 @@ export const withButtons = () => component => {
        * Sets footer alignment
        * @param alignment Footer alignment
        */
-      setFooterAlignment(alignment: keyof typeof DIALOG_FOOTER_ALIGNMENTS | DIALOG_FOOTER_ALIGNMENTS) {
+      setFooterAlignment(alignment: string) {
         if (!component.structure.footer) return;
         
+        // Define all possible alignments
+        const ALL_ALIGNMENTS = ['right', 'left', 'center', 'space-between'];
+        
         // Remove existing alignment classes
-        Object.values(DIALOG_FOOTER_ALIGNMENTS).forEach(align => {
-          if (align !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
+        ALL_ALIGNMENTS.forEach(align => {
+          if (align !== 'right') {
             removeClass(component.structure.footer, `${component.getClass('dialog-footer')}--${align}`);
           }
         });
         
         // Add new alignment class if not right (default)
-        if (alignment !== DIALOG_FOOTER_ALIGNMENTS.RIGHT) {
+        if (alignment !== 'right') {
           addClass(component.structure.footer, `${component.getClass('dialog-footer')}--${alignment}`);
         }
       }
@@ -805,14 +835,17 @@ export const withSize = () => component => {
        * Sets dialog size
        * @param size Size variant
        */
-      setSize(size: keyof typeof DIALOG_SIZES | DIALOG_SIZES) {
+      setSize(size: string) {
+        // Define all possible sizes
+        const ALL_SIZES = ['small', 'medium', 'large', 'fullwidth', 'fullscreen'];
+        
         // Remove existing size classes
-        Object.values(DIALOG_SIZES).forEach(sizeValue => {
+        ALL_SIZES.forEach(sizeValue => {
           removeClass(component.element, `${component.getClass('dialog')}--${sizeValue}`);
         });
         
         // Add new size class if not medium (default)
-        if (size !== DIALOG_SIZES.MEDIUM) {
+        if (size !== 'medium') {
           addClass(component.element, `${component.getClass('dialog')}--${size}`);
         }
       }
@@ -834,9 +867,10 @@ export const withConfirm = () => component => {
           message,
           confirmText = 'Yes',
           cancelText = 'No',
-          confirmVariant = BUTTON_VARIANTS.FILLED,
-          cancelVariant = BUTTON_VARIANTS.TEXT,
-          size = DIALOG_SIZES.SMALL
+          // Use string literals directly
+          confirmVariant = 'filled',
+          cancelVariant = 'text',
+          size = 'small'
         } = options;
         
         // Set dialog properties

package/src/components/dialog/index.ts

@@ -1,15 +1,45 @@
 // src/components/dialog/index.ts
 export { default } from './dialog';
-export { 
-  DIALOG_SIZES, 
-  DIALOG_ANIMATIONS, 
-  DIALOG_FOOTER_ALIGNMENTS, 
-  DIALOG_EVENTS 
-} from './constants';
 export { 
   DialogConfig, 
   DialogComponent, 
   DialogButton, 
   DialogEvent, 
-  DialogConfirmOptions 
-} from './types';
+  DialogConfirmOptions,
+  DialogSize,
+  DialogAnimation,
+  DialogFooterAlignment,
+  DialogEventType
+} from './types';
+
+// Export common dialog constants for convenience and backward compatibility
+export const DIALOG_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+  FULLWIDTH: 'fullwidth',
+  FULLSCREEN: 'fullscreen'
+} as const;
+
+export const DIALOG_ANIMATIONS = {
+  SCALE: 'scale',
+  SLIDE_UP: 'slide-up',
+  SLIDE_DOWN: 'slide-down',
+  FADE: 'fade'
+} as const;
+
+export const DIALOG_FOOTER_ALIGNMENTS = {
+  RIGHT: 'right',
+  LEFT: 'left',
+  CENTER: 'center',
+  SPACE_BETWEEN: 'space-between'
+} as const;
+
+export const DIALOG_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  BEFORE_OPEN: 'beforeopen',
+  BEFORE_CLOSE: 'beforeclose',
+  AFTER_OPEN: 'afteropen',
+  AFTER_CLOSE: 'afterclose'
+} as const;