@olenbetong/appframe-core 2.7.1 → 2.7.3

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,7 +20,11 @@ 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");
@@ -30,7 +34,12 @@ export async function openAlertDialog({ buttons, content, className }) {
     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) {
@@ -46,34 +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("Yes"), value: "yes", primary: true },
-        { label: getLocalizedString("No"), value: "no" },
-    ];
-    if (button == ConfirmButtons.OkCancel) {
-        buttons = [
+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, className: "alert-dialog-confirm" });
+    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-dialog-alert",
         buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+        ...options,
     });
 }

package/es/index.d.ts

@@ -1,7 +1,9 @@
 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";
+import afLocalStorage from "./localStorage.js";
 import { localize } from "./localize.js";
 import { logActivity, startActivity } from "./logActivity.js";
 export { default as mitt } from "mitt";
@@ -16,13 +18,13 @@ export { getLocalizedString } from "./getLocalizedString.js";
 export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
-export { default as localStorage } from "./localStorage.js";
+export { afLocalStorage as localStorage };
 export { logActivity, startActivity } from "./logActivity.js";
 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;
@@ -43,8 +45,12 @@ export interface AfCore {
         getLocalizedString: typeof getLocalizedString;
         expose: typeof expose;
         localize: typeof localize;
+        localStorage: typeof afLocalStorage;
         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

@@ -1,5 +1,6 @@
 import { UserSession } from "./UserSession.js";
 import "./errorHandler.js";
+import afLocalStorage from "./localStorage.js";
 export { default as mitt } from "mitt";
 export { toLocalISODate, toLocalISODateTime } from "./date.js";
 export { downloadBlob } from "./downloadBlob.js";
@@ -10,10 +11,10 @@ export { getLocalizedString } from "./getLocalizedString.js";
 export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
-export { default as localStorage } from "./localStorage.js";
+export { afLocalStorage as localStorage };
 export { logActivity, startActivity } from "./logActivity.js";
 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.1";
+export const version = "2.7.3";

package/es/localStorage.d.ts

@@ -1,5 +1,5 @@
 declare class LocalStorage {
-    isPersisted(): boolean;
+    isPersisted: () => boolean;
     getLocalStorageKey(key: string, global?: boolean): string;
     get(key: string, defaultValue: unknown, global?: boolean): any;
     set(key: string, value: unknown, global?: boolean): void;

package/es/localStorage.js

@@ -2,8 +2,8 @@ function getLocalKey(key) {
     return [af?.article?.id || "", "common", key].join(".");
 }
 class LocalStorage {
-    isPersisted() {
-        return true;
+    constructor() {
+        this.isPersisted = () => true;
     }
     getLocalStorageKey(key, global) {
         return global ? ["common", key].join(".") : getLocalKey(key);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olenbetong/appframe-core",
-	"version": "2.7.1",
+	"version": "2.7.3",
 	"description": "Javascript libraries to utilize the Appframe framework",
 	"type": "module",
 	"sideEffects": [
@@ -48,5 +48,5 @@
 	"devDependencies": {
 		"chalk": "^5.1.2"
 	},
-	"gitHead": "45942718b312253e1113e5ef8177bf5b753fb898"
+	"gitHead": "a98679d30bbd34f2507d87b84502fef1c1e96e52"
 }

package/src/alert.ts

@@ -34,9 +34,17 @@ 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");
 
@@ -47,7 +55,13 @@ export async function openAlertDialog({ buttons, content, className }: AlertDial
 	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,27 +105,37 @@ export enum ConfirmButtons {
 	OkCancel,
 }
 
-export async function confirm(prompt: string, button: ConfirmButtons = ConfirmButtons.YesNo): Promise<boolean> {
-	let buttons: AlertDialogButton[] = [
-		{ label: getLocalizedString("Yes"), value: "yes", primary: true },
-		{ label: getLocalizedString("No"), value: "no" },
-	];
-
-	if (button == ConfirmButtons.OkCancel) {
-		buttons = [
-			{ label: getLocalizedString("OK"), value: "yes", primary: true },
-			{ label: getLocalizedString("Cancel"), value: "no" },
-		];
-	}
+export type ConfirmOptions = {
+	buttons?: ConfirmButtons;
+	title?: string;
+};
 
-	let result = await openAlertDialog({ content: prompt, buttons, className: "alert-dialog-confirm" });
+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-dialog-alert",
 		buttons: [{ label: getLocalizedString("OK"), value: "ok", primary: true }],
+		...options,
 	});
 }

package/src/index.ts

@@ -1,7 +1,9 @@
 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";
+import afLocalStorage from "./localStorage.js";
 import { localize } from "./localize.js";
 import { logActivity, startActivity } from "./logActivity.js";
 
@@ -17,13 +19,13 @@ export { getLocalizedString } from "./getLocalizedString.js";
 export { has } from "./has.js";
 export { invariant } from "./invariant.js";
 export { localize } from "./localize.js";
-export { default as localStorage } from "./localStorage.js";
+export { afLocalStorage as localStorage };
 export { logActivity, startActivity } from "./logActivity.js";
 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__;
 
@@ -49,8 +51,12 @@ export interface AfCore {
 		getLocalizedString: typeof getLocalizedString;
 		expose: typeof expose;
 		localize: typeof localize;
+		localStorage: typeof afLocalStorage;
 		logActivity: typeof logActivity;
 		startActivity: typeof startActivity;
+		alert: typeof alert;
+		confirm: typeof confirm;
+		openAlertDialog: typeof openAlertDialog;
 	};
 	controls?: {
 		alert?: (message: string, callback?: () => void) => void;

package/src/localStorage.ts

@@ -3,9 +3,7 @@ function getLocalKey(key: string): string {
 }
 
 class LocalStorage {
-	isPersisted() {
-		return true;
-	}
+	isPersisted = () => true;
 
 	getLocalStorageKey(key: string, global?: boolean) {
 		return global ? ["common", key].join(".") : getLocalKey(key);