juxscript 1.0.20 → 1.0.21

package/lib/components/dialog.ts

@@ -1,288 +1,285 @@
-import { getOrCreateContainer } from './helpers.js';
-import { State } from '../reactivity/state.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['confirm', 'cancel'] as const;
 
 export interface DialogOptions {
     title?: string;
-    content?: string;
-    showClose?: boolean;
-    modal?: boolean;
-    width?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'default' | 'danger' | 'warning';
     style?: string;
     class?: string;
 }
 
 type DialogState = {
     title: 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;
+    variant: string;
+    open: boolean;
+    style: string;
+    class: string;
 };
 
-export class Dialog {
-    state: DialogState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // 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
-    }> = [];
+export class Dialog extends BaseComponent<DialogState> {
+    private _dialog: HTMLElement | null = null;
+    private _overlay: HTMLElement | null = null;
 
     constructor(id: string, options: DialogOptions = {}) {
-        this._id = id;
-        this.id = id;
-
-        this.state = {
-            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,
+        super(id, {
+            title: options.title ?? 'Confirm',
+            message: options.message ?? 'Are you sure?',
+            confirmText: options.confirmText ?? 'Confirm',
+            cancelText: options.cancelText ?? 'Cancel',
+            variant: options.variant ?? 'default',
             open: false,
-            message: '',
-            type: 'info',
-            confirmText: 'OK',
-            cancelText: 'Cancel'
-        };
+            style: options.style ?? '',
+            class: options.class ?? ''
+        });
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
-
-    title(value: string): this {
-        this.state.title = value;
-        return this;
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
     }
 
-    content(value: string): this {
-        this.state.content = value;
-        return this;
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    showClose(value: boolean): this {
-        this.state.showClose = value;
-        return this;
-    }
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
-    modal(value: boolean): this {
-        this.state.modal = value;
+    title(value: string): this {
+        this.state.title = value;
         return this;
     }
 
-    width(value: string): this {
-        this.state.width = value;
+    message(value: string): this {
+        this.state.message = value;
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
+    confirmText(value: string): this {
+        this.state.confirmText = value;
         return this;
     }
 
-    class(value: string): this {
-        this.state.class = value;
+    cancelText(value: string): this {
+        this.state.cancelText = value;
         return this;
     }
 
-    bind(event: string, handler: Function): this {
-        this._bindings.push({ event, handler });
+    variant(value: 'default' | 'danger' | 'warning'): this {
+        this.state.variant = value;
         return this;
     }
 
-    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}"`);
+    open(): this {
+        this.state.open = true;
+        if (this._overlay) {
+            this._overlay.style.display = 'flex';
         }
-        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    open(): void {
-        this.state.isOpen = true;
-        const dialog = document.getElementById(this._id);
-        if (dialog) {
-            dialog.style.display = 'flex';
-        }
-    }
-
-    close(): void {
-        this.state.isOpen = false;
-        const dialog = document.getElementById(this._id);
-        if (dialog) {
-            dialog.style.display = 'none';
+    close(): this {
+        this.state.open = false;
+        if (this._overlay) {
+            this._overlay.style.display = 'none';
         }
+        return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     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 "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-        this.container = container;
-
-        // === 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');
+        const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
 
-        // === 3. BUILD: Create DOM elements ===
+        // Overlay
         const overlay = document.createElement('div');
         overlay.className = 'jux-dialog-overlay';
-        overlay.id = this._id;
-        overlay.style.display = open ? 'flex' : 'none';
-        if (className) overlay.className += ` ${className}`;
-        if (style) overlay.setAttribute('style', style);
+        overlay.style.display = 'none';
+        this._overlay = overlay;
 
+        // Dialog
         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);
-        }
-
-        const body = document.createElement('div');
-        body.className = 'jux-dialog-body';
-        body.textContent = message;
-        dialog.appendChild(body);
-
-        const footer = document.createElement('div');
-        footer.className = 'jux-dialog-footer';
+        dialog.className = `jux-dialog jux-dialog-${variant}`;
+        dialog.id = this._id;
+        if (className) dialog.className += ` ${className}`;
+        if (style) dialog.setAttribute('style', style);
+        this._dialog = dialog;
+
+        // Title
+        const titleEl = document.createElement('div');
+        titleEl.className = 'jux-dialog-title';
+        titleEl.textContent = title;
+        dialog.appendChild(titleEl);
+
+        // Message
+        const messageEl = document.createElement('div');
+        messageEl.className = 'jux-dialog-message';
+        messageEl.textContent = message;
+        dialog.appendChild(messageEl);
+
+        // Actions
+        const actions = document.createElement('div');
+        actions.className = 'jux-dialog-actions';
+
+        const cancelBtn = document.createElement('button');
+        cancelBtn.className = 'jux-dialog-button jux-dialog-button-cancel';
+        cancelBtn.textContent = cancelText;
+        cancelBtn.addEventListener('click', () => {
+            this._triggerCallback('cancel');
+            this.close();
+        });
 
-        const cancelButton = document.createElement('button');
-        cancelButton.className = 'jux-dialog-button jux-dialog-button-cancel';
-        cancelButton.textContent = cancelText;
+        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._triggerCallback('confirm');
+            this.close();
+        });
 
-        const confirmButton = document.createElement('button');
-        confirmButton.className = 'jux-dialog-button jux-dialog-button-confirm';
-        confirmButton.textContent = confirmText;
+        actions.appendChild(cancelBtn);
+        actions.appendChild(confirmBtn);
+        dialog.appendChild(actions);
 
-        footer.appendChild(cancelButton);
-        footer.appendChild(confirmButton);
-        dialog.appendChild(footer);
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this._triggerCallback('cancel');
+                this.close();
+            }
+        });
 
         overlay.appendChild(dialog);
+        document.body.appendChild(overlay);
 
-        // === 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);
-        });
-
-        // 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;
-                });
-            }
-        });
+        this._injectDialogStyles();
 
-        // === 5. RENDER: Append to DOM and finalize ===
-        container.appendChild(overlay);
         return this;
     }
 
-    renderTo(juxComponent: any): this {
-        if (!juxComponent?._id) {
-            throw new Error('Dialog.renderTo: Invalid component');
+    private _injectDialogStyles(): void {
+        const styleId = 'jux-dialog-styles';
+        if (document.getElementById(styleId)) return;
+
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .jux-dialog-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;
+        z-index: 10000;
+        animation: jux-dialog-fade 0.2s;
+      }
+
+      @keyframes jux-dialog-fade {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      .jux-dialog {
+        background: white;
+        border-radius: 12px;
+        padding: 24px;
+        max-width: 400px;
+        width: 90%;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        animation: jux-dialog-slide 0.3s;
+      }
+
+      @keyframes jux-dialog-slide {
+        from {
+          opacity: 0;
+          transform: translateY(-20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
         }
-        return this.render(`#${juxComponent._id}`);
+      }
+
+      .jux-dialog-title {
+        font-size: 20px;
+        font-weight: 600;
+        margin-bottom: 12px;
+        color: #1f2937;
+      }
+
+      .jux-dialog-message {
+        font-size: 14px;
+        color: #6b7280;
+        margin-bottom: 24px;
+        line-height: 1.5;
+      }
+
+      .jux-dialog-actions {
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+      }
+
+      .jux-dialog-button {
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: none;
+      }
+
+      .jux-dialog-button-cancel {
+        background: #f3f4f6;
+        color: #374151;
+      }
+
+      .jux-dialog-button-cancel:hover {
+        background: #e5e7eb;
+      }
+
+      .jux-dialog-button-confirm {
+        background: #3b82f6;
+        color: white;
+      }
+
+      .jux-dialog-button-confirm:hover {
+        background: #2563eb;
+      }
+
+      .jux-dialog-button-danger {
+        background: #ef4444;
+      }
+
+      .jux-dialog-button-danger:hover {
+        background: #dc2626;
+      }
+
+      .jux-dialog-button-warning {
+        background: #f59e0b;
+      }
+
+      .jux-dialog-button-warning:hover {
+        background: #d97706;
+      }
+    `;
+        document.head.appendChild(style);
     }
 }