@olenbetong/appframe-core 2.7.0 → 2.7.2

package/es/alert.d.ts

@@ -8,11 +8,20 @@ export type AlertDialogOptions = {
     buttons: AlertDialogButton[];
     content: string | HTMLElement;
     className?: string;
+    id?: string;
+    title?: string;
 };
-export declare function openAlertDialog({ buttons, content, className }: AlertDialogOptions): Promise<string>;
+export declare function openAlertDialog({ buttons, content, className, id, title }: AlertDialogOptions): Promise<string | undefined>;
 export declare enum ConfirmButtons {
     YesNo = 0,
     OkCancel = 1
 }
-export declare function confirm(prompt: string, button?: ConfirmButtons): Promise<boolean>;
-export declare function alert(prompt: string): Promise<void>;
+export type ConfirmOptions = {
+    buttons?: ConfirmButtons;
+    title?: string;
+};
+export declare function confirm(prompt: string, options?: ConfirmOptions): Promise<boolean>;
+export type AlertOptions = {
+    title?: string;
+};
+export declare function alert(prompt: string, options?: AlertOptions): Promise<void>;

package/es/alert.js

@@ -20,18 +20,26 @@ export function waitForDialog(dialog) {
         dialog.addEventListener("close", resolve, { once: true });
     });
 }
-export async function openAlertDialog({ buttons, content, className }) {
+const alertDialogPromiseMap = new Map();
+export async function openAlertDialog({ buttons, content, className, id, title }) {
+    if (id && alertDialogPromiseMap.has(id)) {
+        return await alertDialogPromiseMap.get(id);
+    }
     let $template = document.querySelector("#AlertDialogTemplate");
     if (!$template)
         throw Error("No alert dialog template found");
     let $dialog = $template.content.firstElementChild?.cloneNode(true);
     let $content = $dialog?.querySelector("article");
     let $menu = $dialog?.querySelector("footer menu");
-    console.log({ $dialog, $content, $menu });
     if (!$dialog || !$content || !$menu)
         throw Error("Invalid alert dialog template");
     if (className) {
-        $dialog.classList.add(className);
+        className.split(/\s+/).forEach((className) => $dialog?.classList.add(className));
+    }
+    if (title) {
+        let $header = document.createElement("header");
+        $header.append(title);
+        $content.parentNode?.insertBefore($header, $content);
     }
     $content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
     for (let { label, value, primary } of buttons) {
@@ -47,35 +55,47 @@ export async function openAlertDialog({ buttons, content, className }) {
     }
     document.body.appendChild($dialog);
     $dialog.showModal();
-    await waitForDialog($dialog);
-    let result = $dialog.returnValue || "cancel";
-    document.body.removeChild($dialog);
-    return result;
+    let dialogPromise = waitForDialog($dialog)
+        .then(() => {
+        if (id && alertDialogPromiseMap.has(id)) {
+            alertDialogPromiseMap.delete(id);
+        }
+    })
+        .then(() => {
+        let result = $dialog?.returnValue || "cancel";
+        if ($dialog)
+            document.body.removeChild($dialog);
+        return result;
+    });
+    if (id) {
+        alertDialogPromiseMap.set(id, dialogPromise);
+    }
+    return await dialogPromise;
 }
 export var ConfirmButtons;
 (function (ConfirmButtons) {
     ConfirmButtons[ConfirmButtons["YesNo"] = 0] = "YesNo";
     ConfirmButtons[ConfirmButtons["OkCancel"] = 1] = "OkCancel";
 })(ConfirmButtons || (ConfirmButtons = {}));
-export async function confirm(prompt, button = ConfirmButtons.YesNo) {
-    let buttons = [
-        { label: getLocalizedString("No"), value: "no" },
-        { label: getLocalizedString("Yes"), value: "yes", primary: true },
-    ];
-    console.log(button);
-    if (button == ConfirmButtons.OkCancel) {
-        buttons = [
-            { label: getLocalizedString("Cancel"), value: "no" },
+export async function confirm(prompt, options = {}) {
+    let { buttons: optionButtons = ConfirmButtons.YesNo, title } = options;
+    let buttons = optionButtons === ConfirmButtons.OkCancel
+        ? [
             { label: getLocalizedString("OK"), value: "yes", primary: true },
+            { label: getLocalizedString("Cancel"), value: "no" },
+        ]
+        : [
+            { label: getLocalizedString("Yes"), value: "yes", primary: true },
+            { label: getLocalizedString("No"), value: "no" },
         ];
-    }
-    let result = await openAlertDialog({ content: prompt, buttons });
+    let result = await openAlertDialog({ content: prompt, buttons, className: "alert-dialog-confirm", title });
     return result === "yes";
 }
-export async function alert(prompt) {
+export async function alert(prompt, options = {}) {
     await openAlertDialog({
         content: prompt,
-        className: "alert",
+        className: "alert-dialog-alert",
         buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+        ...options,
     });
 }

package/es/index.d.ts

@@ -1,4 +1,5 @@
 import { UserSession } from "./UserSession.js";
+import { alert, confirm, openAlertDialog } from "./alert.js";
 import "./errorHandler.js";
 import { expose } from "./expose.js";
 import { getLocalizedString } from "./getLocalizedString.js";
@@ -22,7 +23,7 @@ export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
 export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
-export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions, AlertOptions, ConfirmOptions } from "./alert.js";
 export declare const version: string;
 declare global {
     var __VERSION__: string;
@@ -45,6 +46,9 @@ export interface AfCore {
         localize: typeof localize;
         logActivity: typeof logActivity;
         startActivity: typeof startActivity;
+        alert: typeof alert;
+        confirm: typeof confirm;
+        openAlertDialog: typeof openAlertDialog;
     };
     controls?: {
         alert?: (message: string, callback?: () => void) => void;

package/es/index.js

@@ -16,4 +16,4 @@ export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
 export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
-export const version = "2.7.0";
+export const version = "2.7.2";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-core",
-	"version": "2.7.0",
+	"version": "2.7.2",
 	"description": "Javascript libraries to utilize the Appframe framework",
 	"type": "module",
 	"sideEffects": [
@@ -48,5 +48,5 @@
 	"devDependencies": {
 		"chalk": "^5.1.2"
 	},
-	"gitHead": "33c7f963b43ac6c4993b1da34d5761663e4c1546"
+	"gitHead": "4ba1cde385d7df1be5a90c7594af2e2ff2f662dd"
 }

package/src/alert.ts

@@ -34,20 +34,34 @@ export type AlertDialogOptions = {
 	buttons: AlertDialogButton[];
 	content: string | HTMLElement;
 	className?: string;
+	id?: string;
+	title?: string;
 };
 
-export async function openAlertDialog({ buttons, content, className }: AlertDialogOptions) {
+const alertDialogPromiseMap = new Map<string, Promise<string>>();
+
+export async function openAlertDialog({ buttons, content, className, id, title }: AlertDialogOptions) {
+	if (id && alertDialogPromiseMap.has(id)) {
+		return await alertDialogPromiseMap.get(id);
+	}
+
 	let $template = document.querySelector<HTMLTemplateElement>("#AlertDialogTemplate");
 	if (!$template) throw Error("No alert dialog template found");
 
 	let $dialog = $template.content.firstElementChild?.cloneNode(true) as HTMLDialogElement | null;
 	let $content = $dialog?.querySelector("article");
 	let $menu = $dialog?.querySelector("footer menu");
-	console.log({ $dialog, $content, $menu });
+
 	if (!$dialog || !$content || !$menu) throw Error("Invalid alert dialog template");
 
 	if (className) {
-		$dialog.classList.add(className);
+		className.split(/\s+/).forEach((className) => $dialog?.classList.add(className));
+	}
+
+	if (title) {
+		let $header = document.createElement("header");
+		$header.append(title);
+		$content.parentNode?.insertBefore($header, $content);
 	}
 
 	$content.appendChild(typeof content === "string" ? document.createTextNode(content) : content);
@@ -66,11 +80,24 @@ export async function openAlertDialog({ buttons, content, className }: AlertDial
 	document.body.appendChild($dialog);
 	$dialog.showModal();
 
-	await waitForDialog($dialog);
-	let result = $dialog.returnValue || "cancel";
-	document.body.removeChild($dialog);
+	let dialogPromise = waitForDialog($dialog)
+		.then(() => {
+			if (id && alertDialogPromiseMap.has(id)) {
+				alertDialogPromiseMap.delete(id);
+			}
+		})
+		.then(() => {
+			let result = $dialog?.returnValue || "cancel";
+			if ($dialog) document.body.removeChild($dialog);
+
+			return result;
+		});
+
+	if (id) {
+		alertDialogPromiseMap.set(id, dialogPromise);
+	}
 
-	return result;
+	return await dialogPromise;
 }
 
 export enum ConfirmButtons {
@@ -78,29 +105,37 @@ export enum ConfirmButtons {
 	OkCancel,
 }
 
-export async function confirm(prompt: string, button: ConfirmButtons = ConfirmButtons.YesNo): Promise<boolean> {
-	let buttons: AlertDialogButton[] = [
-		{ label: getLocalizedString("No"), value: "no" },
-		{ label: getLocalizedString("Yes"), value: "yes", primary: true },
-	];
-
-	console.log(button);
-
-	if (button == ConfirmButtons.OkCancel) {
-		buttons = [
-			{ label: getLocalizedString("Cancel"), value: "no" },
-			{ label: getLocalizedString("OK"), value: "yes", primary: true },
-		];
-	}
+export type ConfirmOptions = {
+	buttons?: ConfirmButtons;
+	title?: string;
+};
 
-	let result = await openAlertDialog({ content: prompt, buttons });
+export async function confirm(prompt: string, options: ConfirmOptions = {}): Promise<boolean> {
+	let { buttons: optionButtons = ConfirmButtons.YesNo, title } = options;
+	let buttons: AlertDialogButton[] =
+		optionButtons === ConfirmButtons.OkCancel
+			? [
+					{ label: getLocalizedString("OK"), value: "yes", primary: true },
+					{ label: getLocalizedString("Cancel"), value: "no" },
+			  ]
+			: [
+					{ label: getLocalizedString("Yes"), value: "yes", primary: true },
+					{ label: getLocalizedString("No"), value: "no" },
+			  ];
+
+	let result = await openAlertDialog({ content: prompt, buttons, className: "alert-dialog-confirm", title });
 	return result === "yes";
 }
 
-export async function alert(prompt: string): Promise<void> {
+export type AlertOptions = {
+	title?: string;
+};
+
+export async function alert(prompt: string, options: AlertOptions = {}): Promise<void> {
 	await openAlertDialog({
 		content: prompt,
-		className: "alert",
+		className: "alert-dialog-alert",
 		buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+		...options,
 	});
 }

package/src/index.ts

@@ -1,4 +1,5 @@
 import { UserSession } from "./UserSession.js";
+import { alert, confirm, openAlertDialog } from "./alert.js";
 import "./errorHandler.js";
 import { expose } from "./expose.js";
 import { getLocalizedString } from "./getLocalizedString.js";
@@ -23,7 +24,7 @@ export { default as SessionHandler } from "./SessionHandler.js";
 export { UserSession };
 export { getSettings, saveSettings } from "./settings.js";
 export { alert, confirm, ConfirmButtons, openAlertDialog, waitForDialog } from "./alert.js";
-export type { AlertDialogButton, AlertDialogOptions } from "./alert.js";
+export type { AlertDialogButton, AlertDialogOptions, AlertOptions, ConfirmOptions } from "./alert.js";
 
 export const version = __VERSION__;
 
@@ -51,6 +52,9 @@ export interface AfCore {
 		localize: typeof localize;
 		logActivity: typeof logActivity;
 		startActivity: typeof startActivity;
+		alert: typeof alert;
+		confirm: typeof confirm;
+		openAlertDialog: typeof openAlertDialog;
 	};
 	controls?: {
 		alert?: (message: string, callback?: () => void) => void;