juxscript 1.0.2 → 1.0.4

package/lib/components/dialog.ts

@@ -0,0 +1,258 @@
+import { getOrCreateContainer } from './helpers.js';
+
+/**
+ * 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;
+    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;
+
+    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',
+            style: options.style ?? '',
+            class: options.class ?? '',
+            isOpen: false
+        };
+    }
+
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
+    title(value: string): this {
+        this.state.title = value;
+        return this;
+    }
+
+    message(value: string): this {
+        this.state.message = value;
+        return this;
+    }
+
+    confirmText(value: string): this {
+        this.state.confirmText = value;
+        return this;
+    }
+
+    cancelText(value: string): this {
+        this.state.cancelText = value;
+        return this;
+    }
+
+    variant(value: 'default' | 'danger' | 'warning'): this {
+        this.state.variant = value;
+        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);
+        }
+    }
+
+    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);
+        }
+    }
+
+    /* -------------------------
+     * 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.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');
+        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;
+
+        // 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 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();
+            }
+        });
+
+        footer.appendChild(cancelBtn);
+        footer.appendChild(confirmBtn);
+
+        dialogBox.appendChild(header);
+        dialogBox.appendChild(body);
+        dialogBox.appendChild(footer);
+        overlay.appendChild(dialogBox);
+        container.appendChild(overlay);
+
+        return this;
+    }
+
+    renderTo(juxComponent: any): this {
+        if (!juxComponent?._id) {
+            throw new Error('Dialog.renderTo: Invalid component');
+        }
+        return this.render(`#${juxComponent._id}`);
+    }
+}
+
+export function dialog(id: string, options: DialogOptions = {}): Dialog {
+    return new Dialog(id, options);
+}