ezfw-core 1.0.0

package/components/datepicker/EzDatePicker.ts

@@ -0,0 +1,519 @@
+import styles from './EzDatePicker.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent, EzBaseComponentConfig } from '../EzBaseComponent.js';
+
+interface MomentInstance {
+    format(pattern: string): string;
+    clone(): MomentInstance;
+    startOf(unit: string): MomentInstance;
+    endOf(unit: string): MomentInstance;
+    add(amount: number, unit: string): MomentInstance;
+    subtract(amount: number, unit: string): MomentInstance;
+    date(day?: number): MomentInstance | number;
+    day(): number;
+    isSame(other: MomentInstance, unit: string): boolean;
+    isBefore(other: MomentInstance, unit: string): boolean;
+    isAfter(other: MomentInstance, unit: string): boolean;
+    isValid(): boolean;
+}
+
+declare const ez: {
+    moment(input?: string | Date | null): MomentInstance;
+};
+
+const cls = cx(styles);
+
+interface DateRange {
+    startDate: string | null;
+    endDate: string | null;
+}
+
+type OnChangeHandler = (value: unknown) => void;
+
+export interface EzDatePickerConfig extends EzBaseComponentConfig {
+    range?: boolean;
+    placeholder?: string;
+    format?: string;
+    displayFormat?: string;
+    min?: string | Date;
+    max?: string | Date;
+    onDateChange?: (value: string | null | DateRange) => void;
+    value?: string | null;
+    startDate?: string | null;
+    endDate?: string | null;
+    size?: 'sm' | 'lg';
+    disabled?: boolean;
+    name?: string;
+    formData?: string;
+}
+
+export class EzDatePicker extends EzBaseComponent {
+    declare config: EzDatePickerConfig;
+    declare el: HTMLElement;
+
+    range: boolean;
+    placeholder: string;
+    format: string;
+    displayFormat: string;
+    min: MomentInstance | null;
+    max: MomentInstance | null;
+    onDateChange: ((value: string | null | DateRange) => void) | null;
+    value: string | null;
+    startDate: string | null;
+    endDate: string | null;
+
+    private _selectingEnd: boolean = false;
+    private _isOpen: boolean = false;
+    private _viewDate: MomentInstance;
+    private _trigger: HTMLElement | null = null;
+    private _input: HTMLInputElement | null = null;
+    private _error: HTMLElement | null = null;
+    private _dropdown: HTMLElement | null = null;
+    private _outsideClickHandler: ((e: MouseEvent) => void) | null = null;
+
+    constructor(config: EzDatePickerConfig = {}) {
+        super(config);
+
+        this.range = config.range || false;
+        this.placeholder = config.placeholder || (this.range ? 'Select date range...' : 'Select date...');
+        this.format = config.format || 'YYYY-MM-DD';
+        this.displayFormat = config.displayFormat || 'MMM D, YYYY';
+        this.min = config.min ? ez.moment(config.min as string) : null;
+        this.max = config.max ? ez.moment(config.max as string) : null;
+        this.onDateChange = config.onDateChange || null;
+
+        this.value = config.value ?? null;
+        this.startDate = config.startDate ?? null;
+        this.endDate = config.endDate ?? null;
+
+        this._viewDate = this._getInitialViewDate();
+    }
+
+    private _getInitialViewDate(): MomentInstance {
+        if (this.range && this.startDate) {
+            return ez.moment(this.startDate);
+        }
+        if (this.value) {
+            return ez.moment(this.value);
+        }
+        return ez.moment();
+    }
+
+    render(): HTMLElement {
+        const cfg = this.config;
+
+        if (cfg.name && cfg.formData) {
+            this.config.bind = `${cfg.formData}.${cfg.name}`;
+        }
+
+        this.el = document.createElement('div');
+        this.el.className = cls('datepicker', cfg.size, cfg.disabled && 'disabled');
+
+        this._trigger = document.createElement('div');
+        this._trigger.className = cls('trigger');
+
+        this._input = document.createElement('input');
+        this._input.type = 'text';
+        this._input.className = cls('input');
+        this._input.placeholder = this.placeholder;
+        this._input.readOnly = true;
+
+        if (cfg.name) {
+            this._input.setAttribute('data-ez-field', cfg.name);
+        }
+        if (cfg.disabled) {
+            this._input.disabled = true;
+        }
+
+        const icon = document.createElement('i');
+        icon.className = cls('icon') + ' fa-solid fa-calendar';
+
+        this._trigger.appendChild(this._input);
+        this._trigger.appendChild(icon);
+        this.el.appendChild(this._trigger);
+
+        this._error = document.createElement('div');
+        this._error.className = cls('fieldError');
+        this.el.appendChild(this._error);
+
+        this._dropdown = document.createElement('div');
+        this._dropdown.className = cls('dropdown');
+        this._dropdown.style.opacity = '0';
+        this._dropdown.style.visibility = 'hidden';
+        document.body.appendChild(this._dropdown);
+
+        this._updateDisplay();
+        this._bindEvents();
+
+        return this.el;
+    }
+
+    private _updateDisplay(): void {
+        if (!this._input) return;
+
+        if (this.range) {
+            if (this.startDate && this.endDate) {
+                const start = ez.moment(this.startDate);
+                const end = ez.moment(this.endDate);
+                this._input.value = `${start.format(this.displayFormat)} - ${end.format(this.displayFormat)}`;
+            } else if (this.startDate) {
+                const start = ez.moment(this.startDate);
+                this._input.value = `${start.format(this.displayFormat)} - ...`;
+            } else {
+                this._input.value = '';
+            }
+        } else {
+            if (this.value) {
+                const m = ez.moment(this.value);
+                this._input.value = m.isValid() ? m.format(this.displayFormat) : '';
+            } else {
+                this._input.value = '';
+            }
+        }
+    }
+
+    private _buildCalendar(): void {
+        if (!this._dropdown) return;
+        this._dropdown.innerHTML = '';
+
+        const header = document.createElement('div');
+        header.className = cls('header');
+
+        const prevBtn = document.createElement('button');
+        prevBtn.type = 'button';
+        prevBtn.className = cls('navBtn');
+        prevBtn.innerHTML = '<i class="fa-solid fa-chevron-left"></i>';
+        prevBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._viewDate.subtract(1, 'month');
+            this._buildCalendar();
+        });
+
+        const title = document.createElement('span');
+        title.className = cls('title');
+        title.textContent = this._viewDate.format('MMMM YYYY');
+
+        const nextBtn = document.createElement('button');
+        nextBtn.type = 'button';
+        nextBtn.className = cls('navBtn');
+        nextBtn.innerHTML = '<i class="fa-solid fa-chevron-right"></i>';
+        nextBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._viewDate.add(1, 'month');
+            this._buildCalendar();
+        });
+
+        header.appendChild(prevBtn);
+        header.appendChild(title);
+        header.appendChild(nextBtn);
+        this._dropdown.appendChild(header);
+
+        const weekdays = document.createElement('div');
+        weekdays.className = cls('weekdays');
+        ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].forEach(day => {
+            const d = document.createElement('span');
+            d.className = cls('weekday');
+            d.textContent = day;
+            weekdays.appendChild(d);
+        });
+        this._dropdown.appendChild(weekdays);
+
+        const grid = document.createElement('div');
+        grid.className = cls('grid');
+
+        const startOfMonth = this._viewDate.clone().startOf('month');
+        const endOfMonth = this._viewDate.clone().endOf('month');
+        const startDay = startOfMonth.day();
+        const daysInMonth = Number(endOfMonth.date());
+
+        const today = ez.moment().startOf('day');
+
+        const rangeStart = this.range && this.startDate ? ez.moment(this.startDate).startOf('day') : null;
+        const rangeEnd = this.range && this.endDate ? ez.moment(this.endDate).startOf('day') : null;
+        const selectedDate = !this.range && this.value ? ez.moment(this.value).startOf('day') : null;
+
+        for (let i = 0; i < startDay; i++) {
+            const empty = document.createElement('span');
+            empty.className = cls('day', 'empty');
+            grid.appendChild(empty);
+        }
+
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = (this._viewDate.clone().date(day) as MomentInstance).startOf('day');
+            const dayEl = document.createElement('button');
+            dayEl.type = 'button';
+            dayEl.className = cls('day');
+            dayEl.textContent = String(day);
+
+            let isDisabled = false;
+            if (this.min && date.isBefore(this.min, 'day')) isDisabled = true;
+            if (this.max && date.isAfter(this.max, 'day')) isDisabled = true;
+
+            if (isDisabled) {
+                dayEl.classList.add(cls('disabled'));
+                dayEl.disabled = true;
+            }
+
+            if (date.isSame(today, 'day')) {
+                dayEl.classList.add(cls('today'));
+            }
+
+            if (this.range) {
+                if (rangeStart && date.isSame(rangeStart, 'day')) {
+                    dayEl.classList.add(cls('rangeStart'));
+                    dayEl.classList.add(cls('selected'));
+                }
+                if (rangeEnd && date.isSame(rangeEnd, 'day')) {
+                    dayEl.classList.add(cls('rangeEnd'));
+                    dayEl.classList.add(cls('selected'));
+                }
+                if (rangeStart && rangeEnd && date.isAfter(rangeStart, 'day') && date.isBefore(rangeEnd, 'day')) {
+                    dayEl.classList.add(cls('inRange'));
+                }
+            } else {
+                if (selectedDate && date.isSame(selectedDate, 'day')) {
+                    dayEl.classList.add(cls('selected'));
+                }
+            }
+
+            if (!isDisabled) {
+                dayEl.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this._selectDate(date);
+                });
+            }
+
+            grid.appendChild(dayEl);
+        }
+
+        this._dropdown.appendChild(grid);
+
+        const footer = document.createElement('div');
+        footer.className = cls('footer');
+
+        const todayBtn = document.createElement('button');
+        todayBtn.type = 'button';
+        todayBtn.className = cls('todayBtn');
+        todayBtn.textContent = 'Today';
+        todayBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._selectDate(ez.moment());
+        });
+
+        const clearBtn = document.createElement('button');
+        clearBtn.type = 'button';
+        clearBtn.className = cls('clearBtn');
+        clearBtn.textContent = 'Clear';
+        clearBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this._selectDate(null);
+        });
+
+        footer.appendChild(clearBtn);
+        footer.appendChild(todayBtn);
+        this._dropdown.appendChild(footer);
+    }
+
+    private _selectDate(date: MomentInstance | null): void {
+        if (this.range) {
+            this._selectRangeDate(date);
+        } else {
+            this._selectSingleDate(date);
+        }
+    }
+
+    private _selectSingleDate(date: MomentInstance | null): void {
+        if (date) {
+            this.value = date.format(this.format);
+            this._viewDate = date.clone();
+        } else {
+            this.value = null;
+        }
+
+        this._updateDisplay();
+        this._close();
+
+        if (this.onDateChange) {
+            this.onDateChange(this.value);
+        }
+    }
+
+    private _selectRangeDate(date: MomentInstance | null): void {
+        if (!date) {
+            this.startDate = null;
+            this.endDate = null;
+            this._selectingEnd = false;
+            this._updateDisplay();
+            this._buildCalendar();
+            this._fireRangeChange();
+            return;
+        }
+
+        const dateStr = date.format(this.format);
+
+        if (!this.startDate || this._selectingEnd === false) {
+            this.startDate = dateStr;
+            this.endDate = null;
+            this._selectingEnd = true;
+            this._updateDisplay();
+            this._buildCalendar();
+        } else {
+            const start = ez.moment(this.startDate);
+
+            if (date.isBefore(start, 'day')) {
+                this.endDate = this.startDate;
+                this.startDate = dateStr;
+            } else {
+                this.endDate = dateStr;
+            }
+
+            this._selectingEnd = false;
+            this._updateDisplay();
+            this._close();
+            this._fireRangeChange();
+        }
+    }
+
+    private _fireRangeChange(): void {
+        if (this.onDateChange) {
+            this.onDateChange({
+                startDate: this.startDate,
+                endDate: this.endDate
+            });
+        }
+    }
+
+    private _bindEvents(): void {
+        if (!this._trigger || !this._input) return;
+
+        this._trigger.addEventListener('click', (e) => {
+            if (this.config.disabled) return;
+            e.stopPropagation();
+            this._isOpen ? this._close() : this._open();
+        });
+
+        this._outsideClickHandler = (e: MouseEvent) => {
+            if (!this.el.contains(e.target as Node) && !this._dropdown?.contains(e.target as Node)) {
+                this._close();
+            }
+        };
+        document.addEventListener('click', this._outsideClickHandler);
+
+        this._input.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                this._close();
+            } else if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this._isOpen ? this._close() : this._open();
+            }
+        });
+    }
+
+    private _open(): void {
+        if (this._isOpen) return;
+        this._isOpen = true;
+
+        if (this.value) {
+            this._viewDate = ez.moment(this.value);
+        } else {
+            this._viewDate = ez.moment();
+        }
+
+        this._buildCalendar();
+        this.el.classList.add(cls('isOpen'));
+        this._positionDropdown();
+
+        if (this._dropdown) {
+            this._dropdown.style.opacity = '1';
+            this._dropdown.style.visibility = 'visible';
+        }
+    }
+
+    private _positionDropdown(): void {
+        if (!this._trigger || !this._dropdown) return;
+
+        const rect = this._trigger.getBoundingClientRect();
+        const dropdownHeight = 300;
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - rect.bottom;
+
+        this._dropdown.style.position = 'fixed';
+        this._dropdown.style.left = `${rect.left}px`;
+        this._dropdown.style.width = `${Math.max(rect.width, 280)}px`;
+        this._dropdown.style.zIndex = '9999';
+
+        if (spaceBelow < dropdownHeight && rect.top > spaceBelow) {
+            this._dropdown.style.bottom = `${viewportHeight - rect.top + 4}px`;
+            this._dropdown.style.top = 'auto';
+            this.el.classList.add(cls('isDropup'));
+        } else {
+            this._dropdown.style.top = `${rect.bottom + 4}px`;
+            this._dropdown.style.bottom = 'auto';
+            this.el.classList.remove(cls('isDropup'));
+        }
+    }
+
+    private _close(): void {
+        if (!this._isOpen) return;
+        this._isOpen = false;
+        this.el.classList.remove(cls('isOpen'));
+        this.el.classList.remove(cls('isDropup'));
+
+        if (this._dropdown) {
+            this._dropdown.style.opacity = '0';
+            this._dropdown.style.visibility = 'hidden';
+        }
+    }
+
+    setValue(value: string | DateRange | null): void {
+        if (this.range && typeof value === 'object' && value !== null) {
+            this.startDate = value.startDate ?? null;
+            this.endDate = value.endDate ?? null;
+            if (this.startDate) {
+                this._viewDate = ez.moment(this.startDate);
+            }
+        } else {
+            this.value = value as string | null;
+            if (this.value) {
+                this._viewDate = ez.moment(this.value);
+            }
+        }
+        this._updateDisplay();
+    }
+
+    getValue(): string | DateRange | null {
+        if (this.range) {
+            return {
+                startDate: this.startDate,
+                endDate: this.endDate
+            };
+        }
+        return this.value;
+    }
+
+    showError(message: string): void {
+        this.el.classList.add(cls('hasError'));
+        if (this._error) {
+            this._error.classList.add(cls('fieldErrorVisible'));
+            this._error.textContent = message;
+        }
+    }
+
+    clearError(): void {
+        this.el.classList.remove(cls('hasError'));
+        if (this._error) {
+            this._error.classList.remove(cls('fieldErrorVisible'));
+            this._error.textContent = '';
+        }
+    }
+
+    destroy(): void {
+        if (this._outsideClickHandler) {
+            document.removeEventListener('click', this._outsideClickHandler);
+        }
+        if (this._dropdown && this._dropdown.parentNode) {
+            this._dropdown.parentNode.removeChild(this._dropdown);
+        }
+        super.destroy();
+    }
+}

package/components/dialog/EzDialog.module.scss

@@ -0,0 +1,180 @@
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    // Global classes added by EzDialogService
+    &:global(.visible) {
+        opacity: 1;
+
+        .dialog {
+            transform: scale(1);
+            opacity: 1;
+        }
+    }
+
+    &:global(.closing) {
+        opacity: 0;
+
+        .dialog {
+            transform: scale(0.95);
+            opacity: 0;
+        }
+    }
+
+    &:global(.hidden) {
+        opacity: 0;
+        pointer-events: none;
+
+        .dialog {
+            transform: scale(0.95);
+            opacity: 0;
+        }
+    }
+}
+
+.dialog {
+    background: var(--ez-surface-secondary, #ffffff);
+    border-radius: 12px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-height: calc(100vh - 48px);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transform: scale(0.95);
+    opacity: 0;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--ez-border, #e2e8f0);
+}
+
+.headerIcon {
+    width: 40px;
+    height: 40px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+
+    &.info {
+        background: var(--ez-primary-light, #dbeafe);
+        color: var(--ez-primary, #2563eb);
+    }
+
+    &.success {
+        background: #dcfce7;
+        color: #16a34a;
+    }
+
+    &.warning {
+        background: #fef3c7;
+        color: #d97706;
+    }
+
+    &.danger {
+        background: #fee2e2;
+        color: #dc2626;
+    }
+}
+
+.title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--ez-text-primary, #1e293b);
+    margin: 0;
+    line-height: 1.4;
+}
+
+.headerBtn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: transparent;
+    border-radius: 8px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ez-text-tertiary, #94a3b8);
+    transition: all 0.15s ease;
+    flex-shrink: 0;
+
+    &:hover {
+        background: var(--ez-surface-primary, #f1f5f9);
+        color: var(--ez-text-primary, #1e293b);
+    }
+}
+
+.body {
+    padding: 20px;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
+}
+
+.message {
+    margin: 0;
+    font-size: 14px;
+    color: var(--ez-text-secondary, #64748b);
+    line-height: 1.6;
+}
+
+.footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 16px 20px;
+    border-top: 1px solid var(--ez-border, #e2e8f0);
+    background: var(--ez-surface-primary, #f8fafc);
+}
+
+.sm {
+    width: 400px;
+}
+
+.md {
+    width: 500px;
+}
+
+.lg {
+    width: 700px;
+}
+
+.xl {
+    width: 900px;
+}
+
+.full {
+    width: 90vw;
+}
+
+.auto {
+    width: auto;
+    min-width: 300px;
+}
+
+// Applied via JS toggleMaximize
+.dialog:global(.maximized) {
+    width: calc(100vw - 48px);
+    height: calc(100vh - 48px);
+    max-height: calc(100vh - 48px);
+    border-radius: 8px;
+    transition: all 0.2s ease;
+}