juxscript 1.0.19 → 1.0.20

package/lib/components/datepicker.ts

@@ -1,69 +1,51 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
 
-/**
- * DatePicker component options
- */
 export interface DatePickerOptions {
     value?: string;
-    min?: string;
-    max?: string;
+    label?: string;
     placeholder?: string;
     disabled?: boolean;
     name?: string;
-    onChange?: (value: string) => void;
+    min?: string;
+    max?: string;
     style?: string;
     class?: string;
 }
 
-/**
- * DatePicker component state
- */
 type DatePickerState = {
     value: string;
-    min: string;
-    max: string;
+    label: string;
     placeholder: string;
     disabled: boolean;
-    name: string;
+    name?: string;
+    min?: string;
+    max?: 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>;
+
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
 
     constructor(id: string, options: DatePickerOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
 
         this.state = {
             value: options.value ?? '',
-            min: options.min ?? '',
-            max: options.max ?? '',
-            placeholder: options.placeholder ?? 'Select date',
+            label: options.label ?? '',
+            placeholder: options.placeholder ?? '',
             disabled: options.disabled ?? false,
-            name: options.name ?? id,
+            name: options.name,
+            min: options.min,
+            max: options.max,
             style: options.style ?? '',
             class: options.class ?? ''
         };
@@ -75,17 +57,11 @@ export class DatePicker {
 
     value(value: string): this {
         this.state.value = value;
-        this._updateElement();
         return this;
     }
 
-    min(value: string): this {
-        this.state.min = value;
-        return this;
-    }
-
-    max(value: string): this {
-        this.state.max = value;
+    label(value: string): this {
+        this.state.label = value;
         return this;
     }
 
@@ -96,12 +72,16 @@ export class DatePicker {
 
     disabled(value: boolean): this {
         this.state.disabled = value;
-        this._updateElement();
         return this;
     }
 
-    name(value: string): this {
-        this.state.name = value;
+    min(value: string): this {
+        this.state.min = value;
+        return this;
+    }
+
+    max(value: string): this {
+        this.state.max = value;
         return this;
     }
 
@@ -115,24 +95,16 @@ export class DatePicker {
         return this;
     }
 
-    onChange(handler: (value: string) => void): this {
-        this._onChange = handler;
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         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));
-
+    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;
     }
 
@@ -161,31 +133,36 @@ export class DatePicker {
      * ------------------------- */
 
     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 element "${targetId}" not found`);
+                throw new Error(`DatePicker: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { value, min, max, placeholder, disabled, name, style, class: className } = this.state;
 
+        // === 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');
+
+        // === 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);
+        if (className) wrapper.className += ` ${className}`;
+        if (style) wrapper.setAttribute('style', style);
+
+        if (label) {
+            const labelEl = document.createElement('label');
+            labelEl.className = 'jux-datepicker-label';
+            labelEl.htmlFor = `${this._id}-input`;
+            labelEl.textContent = label;
+            wrapper.appendChild(labelEl);
         }
 
         const input = document.createElement('input');
@@ -195,20 +172,58 @@ export class DatePicker {
         input.name = name;
         input.value = value;
         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);
+        wrapper.appendChild(input);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Default behavior (only if NOT using sync)
+        if (!hasValueSync) {
+            input.addEventListener('change', () => {
+                this.state.value = input.value;
+            });
+        }
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // 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);
+                });
             }
         });
 
-        wrapper.appendChild(input);
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }

package/lib/components/dialog.ts

@@ -1,76 +1,67 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Dialog component options
- */
 export interface DialogOptions {
     title?: string;
-    message?: string;
-    confirmText?: string;
-    cancelText?: string;
-    variant?: 'default' | 'danger' | 'warning';
-    onConfirm?: () => void;
-    onCancel?: () => void;
+    content?: string;
+    showClose?: boolean;
+    modal?: boolean;
+    width?: string;
     style?: string;
     class?: string;
 }
 
-/**
- * Dialog component state
- */
 type DialogState = {
     title: string;
-    message: string;
-    confirmText: string;
-    cancelText: string;
-    variant: string;
+    content: string;
+    showClose: boolean;
+    modal: boolean;
+    width: string;
     style: string;
     class: string;
     isOpen: boolean;
+    open: boolean;
+    message: string;
+    type: string;
+    confirmText: string;
+    cancelText: string;
+    onConfirm?: Function;
+    onCancel?: Function;
 };
 
-/**
- * Dialog component - Confirmation dialogs
- * 
- * Usage:
- *   jux.dialog('confirm-delete', {
- *     title: 'Delete Item?',
- *     message: 'This action cannot be undone.',
- *     confirmText: 'Delete',
- *     cancelText: 'Cancel',
- *     variant: 'danger',
- *     onConfirm: () => console.log('Deleted'),
- *     onCancel: () => console.log('Cancelled')
- *   }).render();
- * 
- *   // Open/close programmatically
- *   const dialog = jux.dialog('my-dialog').render();
- *   dialog.open();
- *   dialog.close();
- */
 export class Dialog {
     state: DialogState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _onConfirm?: () => void;
-    private _onCancel?: () => void;
+
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
 
     constructor(id: string, options: DialogOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onConfirm = options.onConfirm;
-        this._onCancel = options.onCancel;
 
         this.state = {
-            title: options.title ?? 'Confirm',
-            message: options.message ?? '',
-            confirmText: options.confirmText ?? 'Confirm',
-            cancelText: options.cancelText ?? 'Cancel',
-            variant: options.variant ?? 'default',
+            title: options.title ?? '',
+            content: options.content ?? '',
+            showClose: options.showClose ?? true,
+            modal: options.modal ?? true,
+            width: options.width ?? '500px',
             style: options.style ?? '',
             class: options.class ?? '',
-            isOpen: false
+            isOpen: false,
+            open: false,
+            message: '',
+            type: 'info',
+            confirmText: 'OK',
+            cancelText: 'Cancel'
         };
     }
 
@@ -83,23 +74,23 @@ export class Dialog {
         return this;
     }
 
-    message(value: string): this {
-        this.state.message = value;
+    content(value: string): this {
+        this.state.content = value;
         return this;
     }
 
-    confirmText(value: string): this {
-        this.state.confirmText = value;
+    showClose(value: boolean): this {
+        this.state.showClose = value;
         return this;
     }
 
-    cancelText(value: string): this {
-        this.state.cancelText = value;
+    modal(value: boolean): this {
+        this.state.modal = value;
         return this;
     }
 
-    variant(value: 'default' | 'danger' | 'warning'): this {
-        this.state.variant = value;
+    width(value: string): this {
+        this.state.width = value;
         return this;
     }
 
@@ -113,13 +104,16 @@ export class Dialog {
         return this;
     }
 
-    onConfirm(handler: () => void): this {
-        this._onConfirm = handler;
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
-    onCancel(handler: () => void): this {
-        this._onCancel = handler;
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Dialog.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
@@ -129,19 +123,17 @@ export class Dialog {
 
     open(): void {
         this.state.isOpen = true;
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.style.display = 'flex';
-            setTimeout(() => element.classList.add('jux-dialog-open'), 10);
+        const dialog = document.getElementById(this._id);
+        if (dialog) {
+            dialog.style.display = 'flex';
         }
     }
 
     close(): void {
         this.state.isOpen = false;
-        const element = document.getElementById(this._id);
-        if (element) {
-            element.classList.remove('jux-dialog-open');
-            setTimeout(() => element.style.display = 'none', 200);
+        const dialog = document.getElementById(this._id);
+        if (dialog) {
+            dialog.style.display = 'none';
         }
     }
 
@@ -150,98 +142,139 @@ export class Dialog {
      * ------------------------- */
 
     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(`Dialog: Target element "${targetId}" not found`);
+                throw new Error(`Dialog: Target "${targetId}" not found`);
             }
             container = target;
         } else {
-            container = document.body;
+            container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
 
-        // Overlay
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { open, title, message, type, confirmText, cancelText, onConfirm, onCancel, style, class: className } = this.state;
+        const hasOpenSync = this._syncBindings.some(b => b.property === 'open');
+
+        // === 3. BUILD: Create DOM elements ===
         const overlay = document.createElement('div');
-        overlay.className = 'jux-dialog';
+        overlay.className = 'jux-dialog-overlay';
         overlay.id = this._id;
-        overlay.style.display = 'none';
-        overlay.setAttribute('role', 'dialog');
-        overlay.setAttribute('aria-modal', 'true');
-
-        if (className) {
-            overlay.className += ` ${className}`;
+        overlay.style.display = open ? 'flex' : 'none';
+        if (className) overlay.className += ` ${className}`;
+        if (style) overlay.setAttribute('style', style);
+
+        const dialog = document.createElement('div');
+        dialog.className = `jux-dialog jux-dialog-${type}`;
+
+        if (title) {
+            const header = document.createElement('div');
+            header.className = 'jux-dialog-header';
+            header.textContent = title;
+            dialog.appendChild(header);
         }
 
-        if (style) {
-            overlay.setAttribute('style', style);
-        }
-
-        // Click outside to close
-        overlay.addEventListener('click', (e) => {
-            if (e.target === overlay) {
-                this.close();
-                if (this._onCancel) {
-                    this._onCancel();
-                }
-            }
-        });
-
-        // Dialog container
-        const dialogBox = document.createElement('div');
-        dialogBox.className = `jux-dialog-box jux-dialog-${variant}`;
-
-        // Header
-        const header = document.createElement('div');
-        header.className = 'jux-dialog-header';
-
-        const titleEl = document.createElement('h3');
-        titleEl.className = 'jux-dialog-title';
-        titleEl.textContent = title;
-        header.appendChild(titleEl);
-
-        // Body
         const body = document.createElement('div');
         body.className = 'jux-dialog-body';
         body.textContent = message;
+        dialog.appendChild(body);
 
-        // Footer
         const footer = document.createElement('div');
         footer.className = 'jux-dialog-footer';
 
-        const cancelBtn = document.createElement('button');
-        cancelBtn.className = 'jux-dialog-button jux-dialog-button-cancel';
-        cancelBtn.textContent = cancelText;
-        cancelBtn.addEventListener('click', () => {
-            this.close();
-            if (this._onCancel) {
-                this._onCancel();
-            }
+        const cancelButton = document.createElement('button');
+        cancelButton.className = 'jux-dialog-button jux-dialog-button-cancel';
+        cancelButton.textContent = cancelText;
+
+        const confirmButton = document.createElement('button');
+        confirmButton.className = 'jux-dialog-button jux-dialog-button-confirm';
+        confirmButton.textContent = confirmText;
+
+        footer.appendChild(cancelButton);
+        footer.appendChild(confirmButton);
+        dialog.appendChild(footer);
+
+        overlay.appendChild(dialog);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
+
+        // Default button behavior (only if NOT using sync)
+        if (!hasOpenSync) {
+            cancelButton.addEventListener('click', () => {
+                this.state.open = false;
+                overlay.style.display = 'none';
+                if (onCancel) onCancel();
+            });
+
+            confirmButton.addEventListener('click', () => {
+                this.state.open = false;
+                overlay.style.display = 'none';
+                if (onConfirm) onConfirm();
+            });
+        }
+
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            overlay.addEventListener(event, handler as EventListener);
         });
 
-        const confirmBtn = document.createElement('button');
-        confirmBtn.className = `jux-dialog-button jux-dialog-button-confirm jux-dialog-button-${variant}`;
-        confirmBtn.textContent = confirmText;
-        confirmBtn.addEventListener('click', () => {
-            this.close();
-            if (this._onConfirm) {
-                this._onConfirm();
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'open') {
+                const transformToState = toState || ((v: any) => Boolean(v));
+                const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transformToComponent(val);
+                    this.state.open = transformed;
+                    overlay.style.display = transformed ? 'flex' : 'none';
+                });
+
+                // Component → State (button clicks)
+                cancelButton.addEventListener('click', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    this.state.open = false;
+                    overlay.style.display = 'none';
+                    if (onCancel) onCancel();
+                    stateObj.set(transformToState(false));
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+
+                confirmButton.addEventListener('click', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    this.state.open = false;
+                    overlay.style.display = 'none';
+                    if (onConfirm) onConfirm();
+                    stateObj.set(transformToState(false));
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+            }
+            else if (property === 'message') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    body.textContent = transformed;
+                    this.state.message = transformed;
+                });
             }
         });
 
-        footer.appendChild(cancelBtn);
-        footer.appendChild(confirmBtn);
-
-        dialogBox.appendChild(header);
-        dialogBox.appendChild(body);
-        dialogBox.appendChild(footer);
-        overlay.appendChild(dialogBox);
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(overlay);
-
         return this;
     }