ezfw-core 1.0.9 → 1.0.11

package/components/dialog/EzDialog.ts

@@ -1,11 +1,49 @@
+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() {
-        const { css, config } = this;
-        const props = config.props || config;
+    async render(): Promise<HTMLDivElement> {
+        const props = this.config.props || this.config;
 
         const {
             title,
@@ -18,31 +56,31 @@ export class EzDialog extends EzBaseComponent {
             items,
             buttons,
             _dialogInstance
-        } = props;
+        } = props as EzDialogConfig['props'] & { [key: string]: unknown };
 
         // Create overlay
         const overlay = document.createElement('div');
-        overlay.className = css.overlay;
+        overlay.className = css('overlay');
 
         // Create dialog
         const dialog = document.createElement('div');
-        dialog.className = `${css.dialog} ${css[size] || css.md}`;
+        dialog.className = css('dialog', size);
 
         // Header
         if (title || icon || closable || maximizable) {
             const header = document.createElement('div');
-            header.className = css.header;
+            header.className = css('header');
 
             if (icon) {
                 const iconEl = document.createElement('div');
-                iconEl.className = `${css.headerIcon} ${css[iconVariant] || ''}`;
+                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.className = css('title');
                 titleEl.textContent = title;
                 header.appendChild(titleEl);
             }
@@ -54,7 +92,7 @@ export class EzDialog extends EzBaseComponent {
 
             if (maximizable) {
                 const maxBtn = document.createElement('button');
-                maxBtn.className = css.headerBtn;
+                maxBtn.className = css('headerBtn');
                 maxBtn.innerHTML = '<i class="fa-solid fa-expand"></i>';
                 maxBtn.onclick = () => _dialogInstance?.toggleMaximize();
                 header.appendChild(maxBtn);
@@ -62,7 +100,7 @@ export class EzDialog extends EzBaseComponent {
 
             if (closable) {
                 const closeBtn = document.createElement('button');
-                closeBtn.className = css.headerBtn;
+                closeBtn.className = css('headerBtn');
                 closeBtn.innerHTML = '<i class="fa-solid fa-xmark"></i>';
                 closeBtn.onclick = () => _dialogInstance?.close();
                 header.appendChild(closeBtn);
@@ -73,11 +111,11 @@ export class EzDialog extends EzBaseComponent {
 
         // Body
         const body = document.createElement('div');
-        body.className = css.body;
+        body.className = css('body');
 
         if (message) {
             const messageEl = document.createElement('p');
-            messageEl.className = css.message;
+            messageEl.className = css('message');
             messageEl.textContent = message;
             body.appendChild(messageEl);
         }
@@ -96,7 +134,7 @@ export class EzDialog extends EzBaseComponent {
         // Footer with buttons
         if (buttons && buttons.length > 0) {
             const footer = document.createElement('div');
-            footer.className = css.footer;
+            footer.className = css('footer');
 
             for (const btn of buttons) {
                 const buttonConfig = {
@@ -105,7 +143,7 @@ export class EzDialog extends EzBaseComponent {
                     variant: btn.variant || 'secondary',
                     onClick: () => {
                         if (btn.onClick) {
-                            btn.onClick(_dialogInstance);
+                            btn.onClick(_dialogInstance!);
                         }
                         if (btn.value !== undefined) {
                             _dialogInstance?.close(btn.value);

package/core/ez.ts

@@ -59,6 +59,7 @@ export interface EzFramework {
     grid?: { query: typeof EzGridQuery };
     moment: typeof moment;
 
+    ready: Promise<void>;
     _initModules(): Promise<void>;
     /**
      * Define a component in the Ez framework
@@ -250,6 +251,7 @@ const ez: EzFramework = {
     _services: null,
     _eventBus: null,
     moment: moment,
+    ready: null as unknown as Promise<void>,
 
     async _initModules(): Promise<void> {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -604,7 +606,7 @@ const ez: EzFramework = {
 };
 
 // Initialize framework
-(async () => {
+ez.ready = (async () => {
     await ez._initModules();
     ez._initTheme();
 })();

package/package.json

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