mtrl 0.3.8 → 0.4.0

package/dist/components/datepicker/render.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Renders the calendar header with navigation controls
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Calendar header element
+ */
+export declare const renderHeader: ({ currentMonth, currentYear, currentView, prefix, emit }: any) => HTMLElement;
+/**
+ * Renders the days of the week (S, M, T, etc.)
+ * @param {string} prefix - CSS class prefix
+ * @returns {HTMLElement} Weekdays element
+ */
+export declare const renderWeekdays: (prefix: string) => HTMLElement;
+/**
+ * Renders the calendar days
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Calendar days element
+ */
+export declare const renderDays: ({ currentYear, currentMonth, selectedDate, rangeEndDate, minDate, maxDate, prefix, emit }: any) => HTMLElement;
+/**
+ * Renders the month selection view
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Month selection element
+ */
+export declare const renderMonthSelection: ({ currentYear, currentMonth, prefix, emit }: any) => HTMLElement;
+/**
+ * Renders the year selection view
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Year selection element
+ */
+export declare const renderYearSelection: ({ currentYear, prefix, emit }: any) => HTMLElement;
+/**
+ * Renders the footer with action buttons
+ * @param {Object} params - Rendering parameters
+ * @returns {HTMLElement} Footer element
+ */
+export declare const renderFooter: ({ variant, prefix, emit }: any) => HTMLElement;
+/**
+ * Renders a complete calendar view
+ * @param {Object} state - Current datepicker state
+ * @param {Function} emit - Event emission function
+ * @returns {HTMLElement} Rendered calendar
+ */
+export declare const renderCalendar: (state: any, emit: Function) => HTMLElement;

package/dist/components/datepicker/types.d.ts

@@ -0,0 +1,321 @@
+/**
+ * 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 declare const DAY_NAMES: string[];
+/**
+ * Month names for the calendar
+ * @internal
+ */
+export declare const MONTH_NAMES: string[];
+/**
+ * Month names abbreviated
+ * @internal
+ */
+export declare const MONTH_NAMES_SHORT: string[];
+/**
+ * Default format for displaying dates
+ * @internal
+ */
+export declare const DEFAULT_DATE_FORMAT = "MM/DD/YYYY";
+/**
+ * CSS class name for today's date
+ * @internal
+ */
+export declare const TODAY_CLASS = "today";
+/**
+ * CSS class name for selected date
+ * @internal
+ */
+export declare const SELECTED_CLASS = "selected";
+/**
+ * CSS class name for dates outside the current month
+ * @internal
+ */
+export declare const OUTSIDE_MONTH_CLASS = "outside-month";
+/**
+ * CSS class for the first date in a range
+ * @internal
+ */
+export declare const RANGE_START_CLASS = "range-start";
+/**
+ * CSS class for the last date in a range
+ * @internal
+ */
+export declare const RANGE_END_CLASS = "range-end";
+/**
+ * CSS class for dates between start and end in a range
+ * @internal
+ */
+export declare 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/dist/components/datepicker/utils.d.ts

@@ -0,0 +1,84 @@
+import { CalendarDate } 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 declare const parseDate: (date: Date | string | null) => Date | 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 declare const formatDate: (date: Date | null, format?: string) => string;
+/**
+ * Gets the days in a month
+ * @param year - Year
+ * @param month - Month (0-11)
+ * @returns Number of days in the month
+ */
+export declare const getDaysInMonth: (year: number, month: number) => number;
+/**
+ * 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 declare const getFirstDayOfMonth: (year: number, month: number) => number;
+/**
+ * Checks if two dates are the same day
+ * @param date1 - First date
+ * @param date2 - Second date
+ * @returns True if same day, false otherwise
+ */
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+/**
+ * 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 declare const isDateInRange: (date: Date, startDate: Date, endDate: Date) => boolean;
+/**
+ * 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 declare const generateCalendarDates: (year: number, month: number, selectedDate?: Date | null, rangeEndDate?: Date | null, minDate?: Date | null, maxDate?: Date | null) => CalendarDate[];
+/**
+ * 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 declare const generateYearRange: (currentYear: number, range?: number) => number[];
+/**
+ * Adds days to a date
+ * @param date - Base date
+ * @param days - Number of days to add
+ * @returns New date with days added
+ */
+export declare const addDays: (date: Date, days: number) => Date;
+/**
+ * Adds months to a date
+ * @param date - Base date
+ * @param months - Number of months to add
+ * @returns New date with months added
+ */
+export declare const addMonths: (date: Date, months: number) => Date;
+/**
+ * Adds years to a date
+ * @param date - Base date
+ * @param years - Number of years to add
+ * @returns New date with years added
+ */
+export declare const addYears: (date: Date, years: number) => Date;

package/dist/components/dialog/api.d.ts

@@ -0,0 +1,59 @@
+import { DialogComponent, DialogButton, DialogConfirmOptions, DialogFooterAlignment, DialogSize } from './types';
+interface ApiOptions {
+    visibility: {
+        open: () => void;
+        close: () => void;
+        toggle: (open?: boolean) => void;
+        isOpen: () => boolean;
+    };
+    content: {
+        setTitle: (title: string) => void;
+        getTitle: () => string;
+        setSubtitle: (subtitle: string) => void;
+        getSubtitle: () => string;
+        setContent: (content: string) => void;
+        getContent: () => string;
+        getHeaderElement: () => HTMLElement | null;
+        getContentElement: () => HTMLElement | null;
+        getFooterElement: () => HTMLElement | null;
+    };
+    buttons: {
+        addButton: (button: DialogButton) => void;
+        removeButton: (indexOrText: number | string) => void;
+        getButtons: () => DialogButton[];
+        setFooterAlignment: (alignment: DialogFooterAlignment | string) => void;
+    };
+    focus: {
+        trapFocus: () => void;
+        releaseFocus: () => void;
+    };
+    size: {
+        setSize: (size: DialogSize | string) => void;
+    };
+    divider: {
+        toggleDivider: (show: boolean) => void;
+        hasDivider: () => boolean;
+    };
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+        trigger: (event: string, data: any) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithElements {
+    element: HTMLElement;
+    overlay: HTMLElement;
+    getClass: (name: string) => string;
+    confirm?: (options: DialogConfirmOptions) => Promise<boolean>;
+}
+/**
+ * Enhances a dialog component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Dialog component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: ComponentWithElements) => DialogComponent;
+export {};

package/dist/components/dialog/config.d.ts

@@ -0,0 +1,91 @@
+import { DialogConfig } from './types';
+/**
+ * Default configuration for the Dialog component
+ */
+export declare const defaultConfig: DialogConfig;
+/**
+ * Creates the base configuration for Dialog component
+ * @param {DialogConfig} config - User provided configuration
+ * @returns {DialogConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: DialogConfig) => DialogConfig;
+/**
+ * Generates element configuration for the Dialog component
+ * @param {DialogConfig} config - Dialog configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: DialogConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Generates element configuration for the Dialog overlay
+ * @param {DialogConfig} config - Dialog configuration
+ * @returns {Object} Element configuration object for overlay
+ */
+export declare const getOverlayConfig: (config: DialogConfig) => {
+    tag: string;
+    attributes: {
+        'aria-modal': boolean;
+        role: string;
+        tabindex: number;
+    };
+    className: string;
+};
+/**
+ * Creates API configuration for the Dialog component
+ * @param {Object} comp - Component with dialog features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    visibility: {
+        open: () => any;
+        close: () => any;
+        toggle: (visible?: boolean) => any;
+        isOpen: () => any;
+    };
+    content: {
+        setTitle: (title: string) => any;
+        getTitle: () => any;
+        setSubtitle: (subtitle: string) => any;
+        getSubtitle: () => any;
+        setContent: (content: string) => any;
+        getContent: () => any;
+        getHeaderElement: () => any;
+        getContentElement: () => any;
+        getFooterElement: () => any;
+    };
+    buttons: {
+        addButton: (button: any) => any;
+        removeButton: (indexOrText: any) => any;
+        getButtons: () => any;
+        setFooterAlignment: (alignment: any) => any;
+    };
+    focus: {
+        trapFocus: () => any;
+        releaseFocus: () => any;
+    };
+    size: {
+        setSize: (size: any) => any;
+    };
+    divider: {
+        toggleDivider: (show: any) => any;
+        hasDivider: () => any;
+    };
+    events: {
+        on: (event: any, handler: any) => any;
+        off: (event: any, handler: any) => any;
+        trigger: (event: any, data: any) => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;