@cedx/base 0.10.1 → 0.12.0

package/src/Client/UI/Components/MessageBox.old

@@ -0,0 +1,242 @@
+import {Context, getIcon} from "../Context.js";
+import {Variant} from "../Variant.js";
+
+/**
+ * Specifies the return value of a message box.
+ */
+export const MessageBoxResult = Object.freeze({
+
+	/**
+	 * The message box does not return any value.
+	 */
+	None: "",
+
+	/**
+	 * The return value of the message box is "OK".
+	 */
+	OK: "OK",
+
+	/**
+	 * The return value of the message box is "Cancel".
+	 */
+	Cancel: "Cancel"
+});
+
+/**
+ * Specifies the return value of a message box.
+ */
+export type MessageBoxResult = typeof MessageBoxResult[keyof typeof MessageBoxResult];
+
+/**
+ * Displays a message window, also known as dialog box, which presents a message to the user.
+ */
+export class MessageBox extends HTMLElement {
+
+	/**
+	 * Value indicating whether to vertically center this message box.
+	 */
+	@property({type: Boolean}) centered = false;
+
+	/**
+	 * The buttons displayed in the footer.
+	 */
+	@state() private buttons: MessageBoxButton[] = [];
+
+	/**
+	 * The title displayed in the header.
+	 */
+	@state() private caption = "";
+
+	/**
+	 * The message displayed in the body.
+	 */
+	@state() private content: TemplateResult = html``;
+
+	/**
+	 * A contextual modifier.
+	 */
+	@state() private context: Context|null = null;
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	@state() private icon = "";
+
+	/**
+	 * The root element.
+	 */
+	@query("dialog", true) private readonly root!: HTMLDialogElement;
+
+	/**
+	 * The function invoked to return the dialog box result.
+	 */
+	#resolve: (value: string) => void = () => { /* Noop */ };
+
+	/**
+	 * Opens an alert dialog with the specified message and an "OK" button.
+	 * @param caption The title displayed in the header.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	alert(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		const context = options.context ?? Context.Warning;
+		return this.show(message, {
+			buttons: options.buttons ?? [{label: "OK", value: MessageBoxResult.OK}],
+			caption,
+			context,
+			icon: options.icon ?? getIcon(context)
+		});
+	}
+
+	/**
+	 * Closes the message box.
+	 * @param result The message box result.
+	 */
+	close(result: MessageBoxResult = MessageBoxResult.None): void {
+		this.root.close(result);
+	}
+
+	/**
+	 * Opens a confirmation dialog with the specified message and two buttons, "OK" and "Cancel".
+	 * @param caption The title displayed in the header.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	confirm(caption: string, message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		const context = options.context ?? Context.Warning;
+		return this.show(message, {
+			caption,
+			context,
+			icon: options.icon ?? getIcon(context),
+			buttons: options.buttons ?? [
+				{label: "OK", value: MessageBoxResult.OK},
+				{label: "Annuler", value: MessageBoxResult.Cancel, variant: Variant.Secondary}
+			]
+		});
+	}
+
+	/**
+	 * Opens a modal dialog with the specified message and options.
+	 * @param message The message to show.
+	 * @param options The message box options.
+	 * @returns Resolves with the value of the clicked button.
+	 */
+	show(message: TemplateResult, options: MessageBoxOptions = {}): Promise<string> {
+		this.buttons = options.buttons ?? [];
+		this.caption = options.caption ?? "";
+		this.content = message;
+		this.context = options.context ?? null;
+		this.icon = options.icon ?? "";
+
+		this.root.returnValue = MessageBoxResult.None;
+		this.root.showModal();
+		this.root.querySelector<HTMLButtonElement>(".btn-close")?.blur();
+
+		const {promise, resolve} = Promise.withResolvers<string>();
+		this.#resolve = resolve;
+		return promise;
+	}
+
+	/**
+	 * Renders this component.
+	 * @returns The view template.
+	 */
+	protected override render(): TemplateResult {
+		const centered = classMap({"modal-dialog-centered": this.centered});
+		return html`
+			<dialog class="modal modal-dialog modal-dialog-scrollable ${centered}" @click=${this.#onDialogClick} @close=${this.#onDialogClose}>
+				<form class="modal-content" method="dialog">
+					<div class="modal-header user-select-none">
+						${when(this.caption, () => html`<h1 class="modal-title fs-5">${this.caption}</h1>`)}
+						<button class="btn-close"></button>
+					</div>
+					<div class="modal-body d-flex">
+						${when(this.icon, () => html`
+							<i class="icon icon-fill fs-1 fw-semibold me-2 ${classMap({[`text-${this.context}`]: this.context ?? ""})}">${this.icon}</i>
+						`)}
+						<div class="flex-grow-1">${this.content}</div>
+					</div>
+					${when(this.buttons.length, () => html`
+						<div class="modal-footer user-select-none">
+							${this.buttons.map(button => html`
+								<button class="btn btn-${button.variant ?? Variant.Primary}" value=${button.value ?? MessageBoxResult.None}>
+									${when(button.icon, () => html`<i class="icon icon-fill ${classMap({"me-1": button.label ?? ""})}">${button.icon}</i>`)}
+									${button.label}
+								</button>
+							`)}
+						</div>
+					`)}
+				</form>
+			</dialog>
+		`;
+	}
+
+	/**
+	 * Handles the `click` event.
+	 * @param event The dispatched event.
+	 */
+	#onDialogClick(event: Event): void {
+		if (event.target == this.root) this.close();
+	}
+
+	/**
+	 * Handles the `close` event.
+	 */
+	#onDialogClose(): void {
+		this.#resolve(this.root.returnValue);
+	}
+}
+
+/**
+ * A message box button.
+ */
+export type MessageBoxButton = Partial<{
+
+	/**
+	 * The button icon.
+	 */
+	icon: string;
+
+	/**
+	 * The button label.
+	 */
+	label: string;
+
+	/**
+	 * The button value.
+	 */
+	value: string;
+
+	/**
+	 * A tone variant.
+	 */
+	variant: Context|Variant;
+}>;
+
+/**
+ * Defines the options of a {@link MessageBox} instance.
+ */
+export type MessageBoxOptions = Partial<{
+
+	/**
+	 * The buttons displayed in the footer.
+	 */
+	buttons: MessageBoxButton[];
+
+	/**
+	 * The title displayed in the header.
+	 */
+	caption: string;
+
+	/**
+	 * A contextual modifier.
+	 */
+	context: Context;
+
+	/**
+	 * The icon displayed next to the body.
+	 */
+	icon: string;
+}>;

package/src/Client/UI/Components/OfflineIndicator.ts

@@ -3,14 +3,6 @@
  */
 export class OfflineIndicator extends HTMLElement {
 
-	/**
-	 * Creates a new offline indicator.
-	 */
-	constructor() {
-		super();
-		this.#updateHiddenState();
-	}
-
 	/**
 	 * Registers the component.
 	 */
@@ -22,21 +14,21 @@ export class OfflineIndicator extends HTMLElement {
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const event of ["online", "offline"]) addEventListener(event, this.#updateHiddenState);
+		this.#update();
+		for (const event of ["online", "offline"]) addEventListener(event, this.#update);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const event of ["online", "offline"]) removeEventListener(event, this.#updateHiddenState);
+		for (const event of ["online", "offline"]) removeEventListener(event, this.#update);
 	}
 
 	/**
-	 * Updates the hidden state of this component according to the {@link navigator.onLine} property.
+	 * Updates this component.
 	 */
-	readonly #updateHiddenState: () => void = () =>
-		this.hidden = navigator.onLine;
+	readonly #update: () => void = () => this.hidden = navigator.onLine;
 }
 
 /**

package/src/Client/UI/Components/TabActivator.ts

@@ -14,14 +14,14 @@ export class TabActivator extends HTMLElement {
 	}
 
 	/**
-	 * The one-based index of the active tab.
+	 * The index of the active tab.
 	 */
 	get activeTabIndex(): number {
-		const index = Number.parseInt(this.storage.getItem(this.storageKey) ?? "1");
-		return Math.max(1, Math.min(this.tabs.length, Number.isNaN(index) ? 1 : index));
+		const index = Number(this.storage.getItem(this.storageKey) ?? "1");
+		return Math.max(0, Math.min(this.tabs.length, Number.isNaN(index) ? 0 : index - 1));
 	}
 	set activeTabIndex(value: number) {
-		this.storage.setItem(this.storageKey, value.toString());
+		this.storage.setItem(this.storageKey, (value + 1).toString());
 	}
 
 	/**
@@ -56,7 +56,7 @@ export class TabActivator extends HTMLElement {
 	/**
 	 * The tab list.
 	 */
-	get tabs(): NodeListOf<HTMLButtonElement> {
+	get tabs(): NodeListOf<HTMLElement> {
 		return this.querySelectorAll('[data-bs-toggle="tab"]');
 	}
 
@@ -65,8 +65,8 @@ export class TabActivator extends HTMLElement {
 	 */
 	connectedCallback(): void {
 		const {activeTabIndex, tabs} = this;
-		for (let index = 1; index <= tabs.length; index++) {
-			const tab = tabs.item(index - 1);
+		for (let index = 0; index < tabs.length - 1; index++) {
+			const tab = tabs.item(index);
 			tab.addEventListener("click", () => this.activeTabIndex = index);
 			if (index == activeTabIndex) Tab.getOrCreateInstance(tab).show();
 		}

package/src/Client/UI/Components/ThemeDropdown.ts

@@ -1,3 +1,4 @@
+import {Dropdown} from "bootstrap";
 import {AppTheme, getIcon} from "../AppTheme.js";
 import {MenuAlignment} from "../MenuAlignment.js";
 
@@ -11,11 +12,24 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	static readonly observedAttributes = ["alignment", "apptheme", "label"];
 
+	/**
+	 * The dropdown menu.
+	 */
+	#dropdown!: Dropdown;
+
 	/**
 	 * The media query used to check the application theme.
 	 */
 	readonly #mediaQuery = matchMedia("(prefers-color-scheme: dark)");
 
+	/**
+	 * Creates a new theme dropdown.
+	 */
+	constructor() {
+		super();
+		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setAppTheme);
+	}
+
 	/**
 	 * Registers the component.
 	 */
@@ -43,7 +57,6 @@ export class ThemeDropdown extends HTMLElement {
 	}
 	set appTheme(value: AppTheme) {
 		this.setAttribute("apptheme", value);
-		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
@@ -76,51 +89,63 @@ export class ThemeDropdown extends HTMLElement {
 	 */
 	attributeChangedCallback(attribute: string, oldValue: string|null, newValue: string|null): void {
 		if (newValue != oldValue) switch (attribute) {
-			case "alignment": {
-				const alignment = Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End;
-				const {classList} = this.querySelector(".dropdown-menu")!;
-				if (alignment == MenuAlignment.End) classList.add("dropdown-menu-end");
-				else classList.remove("dropdown-menu-end");
+			case "alignment":
+				this.#updateAlignment(Object.values(MenuAlignment).includes(newValue as MenuAlignment) ? newValue as MenuAlignment : MenuAlignment.End);
 				break;
-			}
-			case "apptheme": {
-				const appTheme = Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System;
-				this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(appTheme);
-				this.querySelector(`button[data-theme="${appTheme}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
-				this.#applyTheme();
+			case "apptheme":
+				this.#updateAppTheme(Object.values(AppTheme).includes(newValue as AppTheme) ? newValue as AppTheme : AppTheme.System);
 				break;
-			}
-			case "label": {
-				this.querySelector(".dropdown-toggle > span")!.textContent = (newValue ?? "").trim() || "Thème";
+			case "label":
+				this.#updateLabel(newValue ?? "");
 				break;
-			}
 			// No default
 		}
 	}
 
+	/**
+	 * Closes the dropdown menu.
+	 */
+	close(): void {
+		this.#dropdown.hide();
+	}
+
 	/**
 	 * Method invoked when this component is connected.
 	 */
 	connectedCallback(): void {
-		for (const button of this.querySelectorAll("button")) button.addEventListener("click", this.#setTheme);
-		this.#mediaQuery.addEventListener("change", this.#applyTheme);
-
 		const appTheme = localStorage.getItem(this.storageKey) as AppTheme|null;
-		if (appTheme) this.setAttribute("apptheme", appTheme);
+		if (appTheme) this.appTheme = appTheme;
+
+		this.#dropdown = new Dropdown(this.querySelector(".dropdown-toggle")!);
+		this.#mediaQuery.addEventListener("change", this.#applyToDocument);
 	}
 
 	/**
 	 * Method invoked when this component is disconnected.
 	 */
 	disconnectedCallback(): void {
-		for (const button of this.querySelectorAll("button")) button.removeEventListener("click", this.#setTheme);
-		this.#mediaQuery.removeEventListener("change", this.#applyTheme);
+		this.#dropdown.dispose();
+		this.#mediaQuery.removeEventListener("change", this.#applyToDocument);
+	}
+
+	/**
+	 * Opens the dropdown menu.
+	 */
+	open(): void {
+		this.#dropdown.show();
+	}
+
+	/**
+	 * Saves the current application theme into the local storage.
+	 */
+	save(): void {
+		localStorage.setItem(this.storageKey, this.appTheme);
 	}
 
 	/**
 	 * Applies the application theme to the document.
 	 */
- 	readonly #applyTheme: () => void = () => {
+ 	readonly #applyToDocument: () => void = () => {
 		const {appTheme} = this;
 		const bsTheme = appTheme == AppTheme.System ? (this.#mediaQuery.matches ? AppTheme.Dark : AppTheme.Light) : appTheme;
 		document.documentElement.dataset.bsTheme = bsTheme.toLowerCase();
@@ -130,11 +155,39 @@ export class ThemeDropdown extends HTMLElement {
 	 * Changes the current application theme.
 	 * @param event The dispatched event.
 	 */
-	readonly #setTheme: (event: Event) => void = event => {
+	readonly #setAppTheme: (event: Event) => void = event => {
 		event.preventDefault();
-		const button = (event.target as HTMLElement).closest("button")!;
-		this.appTheme = button.dataset.theme! as AppTheme;
+		this.appTheme = (event.target as Element).closest("button")!.dataset.theme! as AppTheme;
+		this.save();
 	};
+
+	/**
+	 * Updates the alignment of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateAlignment(value: MenuAlignment): void {
+		const {classList} = this.querySelector(".dropdown-menu")!;
+		if (value == MenuAlignment.End) classList.add("dropdown-menu-end");
+		else classList.remove("dropdown-menu-end");
+	}
+
+	/**
+	 * Updates the application theme.
+	 * @param value The new value.
+	 */
+	#updateAppTheme(value: AppTheme): void {
+		this.querySelector(".dropdown-toggle > .icon")!.textContent = getIcon(value);
+		this.querySelector(`button[data-theme="${value}"]`)!.appendChild(this.querySelector(".dropdown-item > .icon")!);
+		this.#applyToDocument();
+	}
+
+	/**
+	 * Updates the label of the dropdown menu.
+	 * @param value The new value.
+	 */
+	#updateLabel(value: string): void {
+		this.querySelector(".dropdown-toggle > span")!.textContent = value.trim() || "Thème";
+	}
 }
 
 /**