ezfw-core 1.0.8 → 1.0.10

package/components/dialog/EzDialog.ts

@@ -0,0 +1,168 @@
+import styles from './EzDialog.module.scss';
+import { cx } from '../../utils/cssModules.js';
+import { EzBaseComponent } from '../EzBaseComponent.js';
+
+const css = cx(styles);
+
+declare const ez: {
+    _createElement(config: unknown): Promise<HTMLElement>;
+    _createChildElements(items: unknown[], controller: unknown, parent: unknown): Promise<Node[]>;
+    define(name: string, component: unknown): void;
+};
+
+interface DialogButton {
+    text: string;
+    variant?: string;
+    value?: unknown;
+    onClick?: (instance: DialogInstance) => void;
+}
+
+interface DialogInstance {
+    close: (result?: unknown) => void;
+    toggleMaximize: () => void;
+}
+
+interface EzDialogConfig {
+    props?: {
+        title?: string;
+        message?: string;
+        icon?: string;
+        iconVariant?: 'info' | 'success' | 'warning' | 'danger';
+        size?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'auto';
+        closable?: boolean;
+        maximizable?: boolean;
+        items?: unknown[];
+        buttons?: DialogButton[];
+        _dialogInstance?: DialogInstance;
+    };
+    [key: string]: unknown;
+}
+
+export class EzDialog extends EzBaseComponent {
+    static eztype = 'EzDialog';
+    declare config: EzDialogConfig;
+
+    async render(): Promise<HTMLDivElement> {
+        const props = this.config.props || this.config;
+
+        const {
+            title,
+            message,
+            icon,
+            iconVariant = 'info',
+            size = 'md',
+            closable = true,
+            maximizable = false,
+            items,
+            buttons,
+            _dialogInstance
+        } = props as EzDialogConfig['props'] & { [key: string]: unknown };
+
+        // Create overlay
+        const overlay = document.createElement('div');
+        overlay.className = css('overlay');
+
+        // Create dialog
+        const dialog = document.createElement('div');
+        dialog.className = css('dialog', size);
+
+        // Header
+        if (title || icon || closable || maximizable) {
+            const header = document.createElement('div');
+            header.className = css('header');
+
+            if (icon) {
+                const iconEl = document.createElement('div');
+                iconEl.className = css('headerIcon', iconVariant);
+                iconEl.innerHTML = `<i class="${icon}"></i>`;
+                header.appendChild(iconEl);
+            }
+
+            if (title) {
+                const titleEl = document.createElement('h3');
+                titleEl.className = css('title');
+                titleEl.textContent = title;
+                header.appendChild(titleEl);
+            }
+
+            // Spacer
+            const spacer = document.createElement('div');
+            spacer.style.flex = '1';
+            header.appendChild(spacer);
+
+            if (maximizable) {
+                const maxBtn = document.createElement('button');
+                maxBtn.className = css('headerBtn');
+                maxBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
+                maxBtn.onclick = () => _dialogInstance?.toggleMaximize();
+                header.appendChild(maxBtn);
+            }
+
+            if (closable) {
+                const closeBtn = document.createElement('button');
+                closeBtn.className = css('headerBtn');
+                closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
+                closeBtn.onclick = () => _dialogInstance?.close();
+                header.appendChild(closeBtn);
+            }
+
+            dialog.appendChild(header);
+        }
+
+        // Body
+        const body = document.createElement('div');
+        body.className = css('body');
+
+        if (message) {
+            const messageEl = document.createElement('p');
+            messageEl.className = css('message');
+            messageEl.textContent = message;
+            body.appendChild(messageEl);
+        }
+
+        if (items && items.length > 0) {
+            const children = await ez._createChildElements(items, null, null);
+            for (const child of children) {
+                if (child instanceof Node) {
+                    body.appendChild(child);
+                }
+            }
+        }
+
+        dialog.appendChild(body);
+
+        // Footer with buttons
+        if (buttons && buttons.length > 0) {
+            const footer = document.createElement('div');
+            footer.className = css('footer');
+
+            for (const btn of buttons) {
+                const buttonConfig = {
+                    eztype: 'EzButton',
+                    text: btn.text,
+                    variant: btn.variant || 'secondary',
+                    onClick: () => {
+                        if (btn.onClick) {
+                            btn.onClick(_dialogInstance!);
+                        }
+                        if (btn.value !== undefined) {
+                            _dialogInstance?.close(btn.value);
+                        } else if (!btn.onClick) {
+                            _dialogInstance?.close();
+                        }
+                    }
+                };
+
+                const buttonEl = await ez._createElement(buttonConfig);
+                footer.appendChild(buttonEl);
+            }
+
+            dialog.appendChild(footer);
+        }
+
+        overlay.appendChild(dialog);
+        return overlay;
+    }
+}
+
+ez.define('EzDialog', EzDialog);

package/modules.ts

@@ -38,6 +38,7 @@ export const frameworkModules: Record<string, () => Promise<unknown>> = {
     './components/panel/EzPanel.ts': () => import('./components/panel/EzPanel.js'),
     './components/skeleton/EzSkeleton.ts': () => import('./components/skeleton/EzSkeleton.js'),
     './components/tooltip/EzTooltip.ts': () => import('./components/tooltip/EzTooltip.js'),
+    './components/dialog/EzDialog.ts': () => import('./components/dialog/EzDialog.js'),
 
     // Feed
     './components/feed/EzActivityFeed.ts': () => import('./components/feed/EzActivityFeed.js'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezfw-core",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Ez Framework - A declarative component framework for building modern web applications",
   "type": "module",
   "main": "./core/ez.ts",