juxscript 1.0.20 → 1.0.21

package/lib/components/datepicker.ts

@@ -1,68 +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;
 
 export interface DatePickerOptions {
     value?: string;
     label?: string;
     placeholder?: string;
+    required?: boolean;
     disabled?: boolean;
     name?: string;
     min?: string;
     max?: string;
     style?: string;
     class?: string;
+    onValidate?: (value: string) => boolean | string;
 }
 
-type DatePickerState = {
+interface DatePickerState extends FormInputState {
     value: string;
-    label: string;
     placeholder: string;
-    disabled: boolean;
-    name?: string;
     min?: string;
     max?: string;
-    style: string;
-    class: string;
-};
-
-export class DatePicker {
-    state: DatePickerState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    private _bindings: Array<{ event: string, handler: Function }> = [];
-    private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
+}
 
+export class DatePicker extends FormInput<DatePickerState> {
     constructor(id: string, options: DatePickerOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
+        super(id, {
             value: options.value ?? '',
+            placeholder: options.placeholder ?? 'Select a date',
             label: options.label ?? '',
-            placeholder: options.placeholder ?? '',
+            required: options.required ?? false,
             disabled: options.disabled ?? false,
-            name: options.name,
+            name: options.name ?? id,
             min: options.min,
             max: options.max,
             style: options.style ?? '',
-            class: options.class ?? ''
-        };
+            class: options.class ?? '',
+            errorMessage: undefined
+        });
+
+        if (options.onValidate) {
+            this._onValidate = options.onValidate;
+        }
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
 
-    value(value: string): this {
-        this.state.value = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    label(value: string): this {
-        this.state.label = 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 {
@@ -70,11 +75,6 @@ export class DatePicker {
         return this;
     }
 
-    disabled(value: boolean): this {
-        this.state.disabled = value;
-        return this;
-    }
-
     min(value: string): this {
         this.state.min = value;
         return this;
@@ -85,154 +85,187 @@ export class DatePicker {
         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;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    setValue(value: string): this {
+        this.state.value = value;
+        if (this._inputElement) {
+            (this._inputElement as HTMLInputElement).value = value;
+        }
         return this;
     }
 
-    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`DatePicker.sync: Expected a State object for property "${property}"`);
-        }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
-        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;
-    }
+        if (value) {
+            const date = new Date(value);
 
-    getDate(): Date | null {
-        return this.state.value ? new Date(this.state.value) : null;
-    }
+            if (isNaN(date.getTime())) {
+                return 'Invalid date';
+            }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+            if (min) {
+                const minDate = new Date(min);
+                if (date < minDate) {
+                    return `Date must be on or after ${min}`;
+                }
+            }
 
-    render(targetId?: string): this {
-        // === 1. SETUP: Get or create container ===
-        let container: HTMLElement;
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`DatePicker: Target "${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;
 
-        // === 2. PREPARE: Destructure state and check sync flags ===
-        const { value, label, disabled, name, min, max, style, class: className } = this.state;
-        const hasValueSync = this._syncBindings.some(b => b.property === 'value');
+        if (this._onValidate) {
+            const result = this._onValidate(value);
+            if (result !== true) {
+                return result || 'Invalid date';
+            }
+        }
 
-        // === 3. BUILD: Create DOM elements ===
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-datepicker';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
+        return true;
+    }
 
-        if (label) {
-            const labelEl = document.createElement('label');
-            labelEl.className = 'jux-datepicker-label';
-            labelEl.htmlFor = `${this._id}-input`;
-            labelEl.textContent = label;
-            wrapper.appendChild(labelEl);
-        }
+    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;
 
-        wrapper.appendChild(input);
+        return input;
+    }
+
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
+
+    render(targetId?: string): this {
+        const container = this._setupContainer(targetId);
 
-        // === 4. WIRE: Attach event listeners and sync bindings ===
+        const { style, class: className } = this.state;
 
-        // Default behavior (only if NOT using sync)
-        if (!hasValueSync) {
-            input.addEventListener('change', () => {
-                this.state.value = input.value;
-            });
+        // 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());
         }
 
-        // Wire custom bindings from .bind() calls
-        this._bindings.forEach(({ event, handler }) => {
-            wrapper.addEventListener(event, handler as EventListener);
+        // 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);
         });
 
-        // Wire sync bindings from .sync() calls
-        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
-            if (property === 'value') {
-                const transformToState = toState || ((v: any) => v);
-                const transformToComponent = toComponent || ((v: any) => String(v));
-
-                let isUpdating = false;
-
-                // State → Component
-                stateObj.subscribe((val: any) => {
-                    if (isUpdating) return;
-                    const transformed = transformToComponent(val);
-                    if (input.value !== transformed) {
-                        input.value = transformed;
-                        this.state.value = transformed;
-                    }
-                });
-
-                // Component → State
-                input.addEventListener('change', () => {
-                    if (isUpdating) return;
-                    isUpdating = true;
-
-                    const transformed = transformToState(input.value);
-                    this.state.value = input.value;
-                    stateObj.set(transformed);
-
-                    setTimeout(() => { isUpdating = false; }, 0);
-                });
+        // 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();
             }
         });
 
-        // === 5. RENDER: Append to DOM and finalize ===
-        container.appendChild(wrapper);
         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);
     }
 }