juxscript 1.0.19 → 1.0.21

package/lib/components/datepicker.ts

@@ -1,92 +1,73 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { FormInput, FormInputState } from './base/FormInput.js';
+import { renderIcon } from './icons.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['change'] as const;
 
-/**
- * DatePicker component options
- */
 export interface DatePickerOptions {
     value?: string;
-    min?: string;
-    max?: string;
+    label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     name?: string;
-    onChange?: (value: string) => void;
+    min?: string;
+    max?: string;
     style?: string;
     class?: string;
+    onValidate?: (value: string) => boolean | string;
 }
 
-/**
- * DatePicker component state
- */
-type DatePickerState = {
+interface DatePickerState extends FormInputState {
     value: string;
-    min: string;
-    max: string;
     placeholder: string;
-    disabled: boolean;
-    name: string;
-    style: string;
-    class: string;
-};
-
-/**
- * DatePicker component - Calendar input
- * 
- * Usage:
- *   jux.datepicker('start-date', {
- *     placeholder: 'Select date',
- *     value: '2024-01-15',
- *     onChange: (date) => console.log(date)
- *   }).render('#form');
- * 
- *   // Two-way binding
- *   const dateState = state('2024-01-15');
- *   jux.datepicker('date').bind(dateState).render('#form');
- */
-export class DatePicker {
-    state: DatePickerState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-    private _onChange?: (value: string) => void;
-    private _boundState?: State<string>;
+    min?: string;
+    max?: string;
+}
 
+export class DatePicker extends FormInput<DatePickerState> {
     constructor(id: string, options: DatePickerOptions = {}) {
-        this._id = id;
-        this.id = id;
-        this._onChange = options.onChange;
-
-        this.state = {
+        super(id, {
             value: options.value ?? '',
-            min: options.min ?? '',
-            max: options.max ?? '',
-            placeholder: options.placeholder ?? 'Select date',
+            placeholder: options.placeholder ?? 'Select a date',
+            label: options.label ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
             name: options.name ?? id,
+            min: options.min,
+            max: options.max,
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
-    }
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
+    }
 
-    value(value: string): this {
-        this.state.value = value;
-        this._updateElement();
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    min(value: string): this {
-        this.state.min = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    max(value: string): this {
-        this.state.max = value;
-        return this;
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
+
+    // ✅ Inherited from FormInput/BaseComponent:
+    // - label(), required(), name(), onValidate()
+    // - validate(), isValid()
+    // - style(), class()
+    // - bind(), sync(), renderTo()
+    // - disabled(), enable(), disable()
+
+    value(value: string): this {
+        return this.setValue(value);
     }
 
     placeholder(value: string): this {
@@ -94,130 +75,197 @@ export class DatePicker {
         return this;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        this._updateElement();
+    min(value: string): this {
+        this.state.min = value;
         return this;
     }
 
-    name(value: string): this {
-        this.state.name = value;
+    max(value: string): this {
+        this.state.max = value;
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FORM INPUT IMPLEMENTATION
+     * ═════════════════════════════════════════════════════════════════ */
 
-    class(value: string): this {
-        this.state.class = value;
-        return this;
+    getValue(): string {
+        return this.state.value;
     }
 
-    onChange(handler: (value: string) => void): this {
-        this._onChange = handler;
+    setValue(value: string): this {
+        this.state.value = value;
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).value = value;
+        }
         return this;
     }
 
-    /**
-     * Two-way binding to state
-     */
-    bind(stateObj: State<string>): this {
-        this._boundState = stateObj;
-
-        stateObj.subscribe((val) => {
-            this.state.value = val;
-            this._updateElement();
-        });
-
-        this.onChange((value) => stateObj.set(value));
-
-        return this;
+    getDate(): Date | null {
+        if (!this.state.value) return null;
+        const date = new Date(this.state.value);
+        return isNaN(date.getTime()) ? null : date;
     }
 
-    /* -------------------------
-     * Helpers
-     * ------------------------- */
+    protected _validateValue(value: string): boolean | string {
+        const { required, min, max } = this.state;
 
-    private _updateElement(): void {
-        const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
-        if (input) {
-            input.value = this.state.value;
-            input.disabled = this.state.disabled;
+        if (required && !value) {
+            return 'Please select a date';
         }
-    }
-
-    getValue(): string {
-        return this.state.value;
-    }
 
-    getDate(): Date | null {
-        return this.state.value ? new Date(this.state.value) : null;
-    }
+        if (value) {
+            const date = new Date(value);
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+            if (isNaN(date.getTime())) {
+                return 'Invalid date';
+            }
 
-    render(targetId?: string): this {
-        let container: HTMLElement;
+            if (min) {
+                const minDate = new Date(min);
+                if (date < minDate) {
+                    return `Date must be on or after ${min}`;
+                }
+            }
 
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`DatePicker: Target element "${targetId}" not found`);
+            if (max) {
+                const maxDate = new Date(max);
+                if (date > maxDate) {
+                    return `Date must be on or before ${max}`;
+                }
             }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
         }
 
-        this.container = container;
-        const { value, min, max, placeholder, disabled, name, style, class: className } = this.state;
-
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-datepicker';
-        wrapper.id = this._id;
-
-        if (className) {
-            wrapper.className += ` ${className}`;
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid date';
+            }
         }
 
-        if (style) {
-            wrapper.setAttribute('style', style);
-        }
+        return true;
+    }
+
+    protected _buildInputElement(): HTMLElement {
+        const { value, placeholder, required, disabled, name, min, max } = this.state;
 
         const input = document.createElement('input');
         input.type = 'date';
-        input.className = 'jux-datepicker-input';
+        input.className = 'jux-input-element jux-datepicker-input';
         input.id = `${this._id}-input`;
         input.name = name;
         input.value = value;
+        input.placeholder = placeholder;
+        input.required = required;
         input.disabled = disabled;
 
         if (min) input.min = min;
         if (max) input.max = max;
-        if (placeholder) input.setAttribute('placeholder', placeholder);
 
-        input.addEventListener('change', (e) => {
-            const target = e.target as HTMLInputElement;
-            this.state.value = target.value;
-            if (this._onChange) {
-                this._onChange(target.value);
-            }
+        return input;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
+
+        const { style, class: className } = this.state;
+
+        // Build wrapper
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-input jux-datepicker';
+        wrapper.id = this._id;
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        // Label
+        if (this.state.label) {
+            wrapper.appendChild(this._renderLabel());
+        }
+
+        // Input container
+        const inputContainer = document.createElement('div');
+        inputContainer.className = 'jux-input-container jux-datepicker-container';
+
+        // Calendar icon
+        const iconEl = document.createElement('span');
+        iconEl.className = 'jux-input-icon';
+        iconEl.appendChild(renderIcon('calendar'));
+        inputContainer.appendChild(iconEl);
+
+        // Date input
+        const inputEl = this._buildInputElement();
+        this._inputElement = inputEl;
+        inputContainer.appendChild(inputEl);
+        wrapper.appendChild(inputContainer);
+
+        // Error element
+        wrapper.appendChild(this._renderError());
+
+        // Wire events
+        this._wireStandardEvents(wrapper);
+        this._wireFormSync(inputEl, 'change');
+
+        // 🎯 Fire change event when date changes
+        inputEl.addEventListener('change', () => {
+            const input = inputEl as HTMLInputElement;
+            this._triggerCallback('change', input.value);
         });
 
-        wrapper.appendChild(input);
+        // Sync label changes
+        const labelSync = this._syncBindings.find(b => b.property === 'label');
+        if (labelSync) {
+            const transform = labelSync.toComponent || ((v: any) => String(v));
+            labelSync.stateObj.subscribe((val: any) => {
+                this.label(transform(val));
+            });
+        }
+
         container.appendChild(wrapper);
+        this._injectDatePickerStyles();
+        this._injectFormStyles();
+
+        requestAnimationFrame(() => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        });
+
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('DatePicker.renderTo: Invalid component');
-        }
-        return this.render(`#${juxComponent._id}`);
+    private _injectDatePickerStyles(): void {
+        const styleId = 'jux-datepicker-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-datepicker-container {
+        position: relative;
+      }
+
+      .jux-datepicker-container .jux-input-icon {
+        pointer-events: none;
+      }
+
+      .jux-datepicker-input {
+        padding-left: 40px;
+      }
+
+      .jux-datepicker-input::-webkit-calendar-picker-indicator {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        width: 100%;
+        height: 100%;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }