juxscript 1.0.19 → 1.0.21

package/lib/components/dialog.ts

@@ -1,82 +1,58 @@
-import { getOrCreateContainer } from './helpers.js';
+import { BaseComponent } from './base/BaseComponent.js';
+
+// Event definitions
+const TRIGGER_EVENTS = [] as const;
+const CALLBACK_EVENTS = ['confirm', 'cancel'] as const;
 
-/**
- * Dialog component options
- */
 export interface DialogOptions {
     title?: string;
     message?: string;
     confirmText?: string;
     cancelText?: string;
     variant?: 'default' | 'danger' | 'warning';
-    onConfirm?: () => void;
-    onCancel?: () => void;
     style?: string;
     class?: string;
 }
 
-/**
- * Dialog component state
- */
 type DialogState = {
     title: string;
     message: string;
     confirmText: string;
     cancelText: string;
     variant: string;
+    open: boolean;
     style: string;
     class: string;
-    isOpen: boolean;
 };
 
-/**
- * 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;
+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._onConfirm = options.onConfirm;
-        this._onCancel = options.onCancel;
-
-        this.state = {
+        super(id, {
             title: options.title ?? 'Confirm',
-            message: options.message ?? '',
+            message: options.message ?? 'Are you sure?',
             confirmText: options.confirmText ?? 'Confirm',
             cancelText: options.cancelText ?? 'Cancel',
             variant: options.variant ?? 'default',
+            open: false,
             style: options.style ?? '',
-            class: options.class ?? '',
-            isOpen: false
-        };
+            class: options.class ?? ''
+        });
+    }
+
+    protected getTriggerEvents(): readonly string[] {
+        return TRIGGER_EVENTS;
+    }
+
+    protected getCallbackEvents(): readonly string[] {
+        return CALLBACK_EVENTS;
     }
 
-    /* -------------------------
-     * Fluent API
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * FLUENT API
+     * ═════════════════════════════════════════════════════════════════ */
 
     title(value: string): this {
         this.state.title = value;
@@ -103,153 +79,207 @@ export class Dialog {
         return this;
     }
 
-    style(value: string): this {
-        this.state.style = value;
-        return this;
-    }
-
-    class(value: string): this {
-        this.state.class = value;
-        return this;
-    }
-
-    onConfirm(handler: () => void): this {
-        this._onConfirm = handler;
-        return this;
-    }
-
-    onCancel(handler: () => void): this {
-        this._onCancel = handler;
-        return this;
-    }
-
-    /* -------------------------
-     * Methods
-     * ------------------------- */
-
-    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);
+    open(): this {
+        this.state.open = true;
+        if (this._overlay) {
+            this._overlay.style.display = 'flex';
         }
+        return this;
     }
 
-    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);
+    close(): this {
+        this.state.open = false;
+        if (this._overlay) {
+            this._overlay.style.display = 'none';
         }
+        return this;
     }
 
-    /* -------------------------
-     * Render
-     * ------------------------- */
+    /* ═════════════════════════════════════════════════════════════════
+     * RENDER
+     * ═════════════════════════════════════════════════════════════════ */
 
     render(targetId?: string): this {
-        let container: HTMLElement;
-
-        if (targetId) {
-            const target = document.querySelector(targetId);
-            if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Dialog: Target element "${targetId}" not found`);
-            }
-            container = target;
-        } else {
-            container = document.body;
-        }
-
-        this.container = container;
         const { title, message, confirmText, cancelText, variant, style, class: className } = this.state;
 
         // Overlay
         const overlay = document.createElement('div');
-        overlay.className = 'jux-dialog';
-        overlay.id = this._id;
+        overlay.className = 'jux-dialog-overlay';
         overlay.style.display = 'none';
-        overlay.setAttribute('role', 'dialog');
-        overlay.setAttribute('aria-modal', 'true');
-
-        if (className) {
-            overlay.className += ` ${className}`;
-        }
-
-        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');
+        this._overlay = overlay;
+
+        // Dialog
+        const dialog = document.createElement('div');
+        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;
-        header.appendChild(titleEl);
+        dialog.appendChild(titleEl);
 
-        // Body
-        const body = document.createElement('div');
-        body.className = 'jux-dialog-body';
-        body.textContent = message;
+        // Message
+        const messageEl = document.createElement('div');
+        messageEl.className = 'jux-dialog-message';
+        messageEl.textContent = message;
+        dialog.appendChild(messageEl);
 
-        // Footer
-        const footer = document.createElement('div');
-        footer.className = 'jux-dialog-footer';
+        // 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();
-            if (this._onCancel) {
-                this._onCancel();
-            }
         });
 
         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();
-            if (this._onConfirm) {
-                this._onConfirm();
+        });
+
+        actions.appendChild(cancelBtn);
+        actions.appendChild(confirmBtn);
+        dialog.appendChild(actions);
+
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                this._triggerCallback('cancel');
+                this.close();
             }
         });
 
-        footer.appendChild(cancelBtn);
-        footer.appendChild(confirmBtn);
+        overlay.appendChild(dialog);
+        document.body.appendChild(overlay);
 
-        dialogBox.appendChild(header);
-        dialogBox.appendChild(body);
-        dialogBox.appendChild(footer);
-        overlay.appendChild(dialogBox);
-        container.appendChild(overlay);
+        this._injectDialogStyles();
 
         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);
     }
 }