@aerogel/core 0.0.0-next.d824b40e5d06757cd9f47c9f771d916185df4f05 → 0.0.0-next.e4c0d5bd2801fbe93545477ea515af53df69b522

package/src/services/utils.ts

@@ -0,0 +1,18 @@
+import { objectOnly } from '@noeldemartin/utils';
+
+export type Replace<
+    TOriginal extends Record<string, unknown>,
+    TReplacements extends Partial<Record<keyof TOriginal, unknown>>,
+> = {
+    [K in keyof TOriginal]: TReplacements extends Record<K, infer Replacement> ? Replacement : TOriginal[K];
+};
+
+export function replaceExisting<
+    TOriginal extends Record<string, unknown>,
+    TReplacements extends Partial<Record<keyof TOriginal, unknown>>,
+>(original: TOriginal, replacements: TReplacements): Replace<TOriginal, TReplacements> {
+    return {
+        ...original,
+        ...objectOnly(replacements, Object.keys(original)),
+    } as Replace<TOriginal, TReplacements>;
+}

package/src/testing/index.ts

@@ -0,0 +1,26 @@
+import { isTesting } from '@noeldemartin/utils';
+import type { GetClosureArgs } from '@noeldemartin/utils';
+
+import Events from '@aerogel/core/services/Events';
+import { definePlugin } from '@aerogel/core/plugins';
+
+export interface AerogelTestingRuntime {
+    on: (typeof Events)['on'];
+}
+
+export default definePlugin({
+    async install() {
+        if (!isTesting()) {
+            return;
+        }
+
+        globalThis.testingRuntime = {
+            on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+        };
+    },
+});
+
+declare global {
+    // eslint-disable-next-line no-var
+    var testingRuntime: AerogelTestingRuntime | undefined;
+}

package/src/testing/setup.ts

@@ -0,0 +1,11 @@
+import { FakeLocalStorage } from '@noeldemartin/testing';
+import { beforeEach, vi } from 'vitest';
+
+vi.mock('dompurify', async () => {
+    return { default: { sanitize: (html: string) => html } };
+});
+
+beforeEach(() => {
+    FakeLocalStorage.reset();
+    FakeLocalStorage.patchGlobal();
+});

package/src/ui/UI.state.ts

@@ -1,23 +1,19 @@
 import type { Component } from 'vue';
 
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
 
-export interface Modal<T = unknown> {
+import { Layouts, getCurrentLayout } from './utils';
+
+export interface UIModal<T = unknown> {
     id: string;
     properties: Record<string, unknown>;
     component: Component;
+    closing: boolean;
     beforeClose: Promise<T | undefined>;
     afterClose: Promise<T | undefined>;
 }
 
-export interface ModalComponent<
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Properties extends Record<string, unknown> = Record<string, unknown>,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Result = unknown
-> {}
-
-export interface Snackbar {
+export interface UIToast {
     id: string;
     component: Component;
     properties: Record<string, unknown>;
@@ -26,7 +22,13 @@ export interface Snackbar {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as Modal[],
-        snackbars: [] as Snackbar[],
+        modals: [] as UIModal[],
+        toasts: [] as UIToast[],
+        layout: getCurrentLayout(),
+    },
+    computed: {
+        desktop: ({ layout }) => layout === Layouts.Desktop,
+        mobile: ({ layout }) => layout === Layouts.Mobile,
+        openModals: ({ modals }) => modals.filter(({ closing }) => !closing),
     },
 });

package/src/ui/UI.ts

@@ -1,121 +1,283 @@
-import { facade, fail, uuid } from '@noeldemartin/utils';
+import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 import type { Component } from 'vue';
-import type { ObjectValues } from '@noeldemartin/utils';
-
-import Events from '@/services/Events';
-import type { SnackbarAction, SnackbarColor } from '@/components/headless/snackbars';
+import type { ClosureArgs } from '@noeldemartin/utils';
+
+import App from '@aerogel/core/services/App';
+import Events from '@aerogel/core/services/Events';
+import type {
+    ConfirmModalCheckboxes,
+    ConfirmModalExpose,
+    ConfirmModalProps,
+} from '@aerogel/core/components/contracts/ConfirmModal';
+import type {
+    ErrorReportModalExpose,
+    ErrorReportModalProps,
+} from '@aerogel/core/components/contracts/ErrorReportModal';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { AlertModalExpose, AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { LoadingModalExpose, LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { ToastAction, ToastExpose, ToastProps, ToastVariant } from '@aerogel/core/components/contracts/Toast';
 
 import Service from './UI.state';
-import type { Modal, ModalComponent, Snackbar } from './UI.state';
+import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
+import type { UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
-    closed(result: T | undefined): void;
+    hasClosed(result: T | undefined): void;
 }
 
-type ModalProperties<TComponent> = TComponent extends ModalComponent<infer TProperties, unknown> ? TProperties : never;
-type ModalResult<TComponent> = TComponent extends ModalComponent<Record<string, unknown>, infer TResult>
-    ? TResult
-    : never;
+export type ModalResult<T> = ModalExposeResult<ComponentExposed<T>>;
+export type ModalExposeResult<T> = T extends { close(result?: infer Result): Promise<void> } ? Result : unknown;
+export type UIComponent<Props = {}, Exposed = {}> = { new (...args: ClosureArgs): Exposed & { $props: Props } };
+
+export interface UIComponents {
+    'alert-modal': UIComponent<AlertModalProps, AlertModalExpose>;
+    'confirm-modal': UIComponent<ConfirmModalProps, ConfirmModalExpose>;
+    'error-report-modal': UIComponent<ErrorReportModalProps, ErrorReportModalExpose>;
+    'loading-modal': UIComponent<LoadingModalProps, LoadingModalExpose>;
+    'prompt-modal': UIComponent<PromptModalProps, PromptModalExpose>;
+    'router-link': UIComponent;
+    'startup-crash': UIComponent;
+    toast: UIComponent<ToastProps, ToastExpose>;
+}
 
-export const UIComponents = {
-    AlertModal: 'alert-modal',
-    ConfirmModal: 'confirm-modal',
-    ErrorReportModal: 'error-report-modal',
-    LoadingModal: 'loading-modal',
-    Snackbar: 'snackbar',
-} as const;
+export interface UIModalContext {
+    modal: UIModal;
+    childIndex?: number;
+}
 
-export type UIComponent = ObjectValues<typeof UIComponents>;
+export type ConfirmOptions = AcceptRefs<{
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    actions?: Record<string, () => unknown>;
+    required?: boolean;
+}>;
+
+export type LoadingOptions = AcceptRefs<{
+    title?: string;
+    message?: string;
+    progress?: number;
+}>;
+
+export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
+    extends ConfirmOptions {
+    checkboxes?: T;
+}
 
-export interface ShowSnackbarOptions {
+export type PromptOptions = AcceptRefs<{
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    acceptText?: string;
+    acceptVariant?: ButtonVariant;
+    cancelText?: string;
+    cancelVariant?: ButtonVariant;
+    trim?: boolean;
+}>;
+
+export interface ToastOptions {
     component?: Component;
-    color?: SnackbarColor;
-    actions?: SnackbarAction[];
+    variant?: ToastVariant;
+    actions?: ToastAction[];
 }
 
 export class UIService extends Service {
 
     private modalCallbacks: Record<string, Partial<ModalCallbacks>> = {};
-    private components: Partial<Record<UIComponent, Component>> = {};
+    private components: Partial<UIComponents> = {};
+
+    public registerComponent<T extends keyof UIComponents>(name: T, component: UIComponents[T]): void {
+        this.components[name] = component;
+    }
+
+    public resolveComponent<T extends keyof UIComponents>(name: T): UIComponents[T] | null {
+        return this.components[name] ?? null;
+    }
 
-    public requireComponent(name: UIComponent): Component {
-        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
+    public requireComponent<T extends keyof UIComponents>(name: T): UIComponents[T] {
+        return this.resolveComponent(name) ?? fail(`UI Component '${name}' is not defined!`);
     }
 
     public alert(message: string): void;
     public alert(title: string, message: string): void;
     public alert(messageOrTitle: string, message?: string): void {
-        const options = typeof message === 'string' ? { title: messageOrTitle, message } : { message: messageOrTitle };
+        const getProperties = (): AlertModalProps => {
+            if (typeof message !== 'string') {
+                return { message: messageOrTitle };
+            }
+
+            return {
+                title: messageOrTitle,
+                message,
+            };
+        };
 
-        this.openModal(this.requireComponent(UIComponents.AlertModal), options);
+        this.modal(this.requireComponent('alert-modal'), getProperties());
     }
 
-    public async confirm(message: string): Promise<boolean>;
-    public async confirm(title: string, message: string): Promise<boolean>;
-    public async confirm(messageOrTitle: string, message?: string): Promise<boolean> {
-        const options = typeof message === 'string' ? { title: messageOrTitle, message } : { message: messageOrTitle };
-        const modal = await this.openModal<ModalComponent<{ message: string }, boolean>>(
-            this.requireComponent(UIComponents.ConfirmModal),
-            options,
-        );
-        const result = await modal.beforeClose;
+    /* eslint-disable max-len */
+    public async confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
+    public async confirm(title: string, message: string, options?: ConfirmOptions): Promise<boolean>;
+    public async confirm<T extends ConfirmModalCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmModalCheckboxes>(title: string, message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    /* eslint-enable max-len */
+
+    public async confirm(
+        messageOrTitle: string,
+        messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
+        options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
+    ): Promise<boolean | [boolean, Record<string, boolean>]> {
+        const getProperties = (): AcceptRefs<ConfirmModalProps> => {
+            if (typeof messageOrOptions !== 'string') {
+                return {
+                    ...(messageOrOptions ?? {}),
+                    message: messageOrTitle,
+                    required: !!messageOrOptions?.required,
+                };
+            }
 
-        return result ?? false;
-    }
+            return {
+                ...(options ?? {}),
+                title: messageOrTitle,
+                message: messageOrOptions,
+                required: !!options?.required,
+            };
+        };
 
-    public async loading<T>(operation: Promise<T>): Promise<T>;
-    public async loading<T>(message: string, operation: Promise<T>): Promise<T>;
-    public async loading<T>(messageOrOperation: string | Promise<T>, operation?: Promise<T>): Promise<T> {
-        operation = typeof messageOrOperation === 'string' ? (operation as Promise<T>) : messageOrOperation;
+        const properties = getProperties();
+        const result = await this.modalForm(this.requireComponent('confirm-modal'), properties);
+        const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
+        const checkboxes =
+            typeof result === 'object'
+                ? result[1]
+                : Object.entries(properties.checkboxes ?? {}).reduce(
+                    (values, [checkbox, { default: defaultValue }]) => ({
+                        [checkbox]: defaultValue ?? false,
+                        ...values,
+                    }),
+                      {} as Record<string, boolean>,
+                );
+
+        for (const [name, checkbox] of Object.entries(properties.checkboxes ?? {})) {
+            if (!checkbox.required || checkboxes[name]) {
+                continue;
+            }
 
-        const message = typeof messageOrOperation === 'string' ? messageOrOperation : undefined;
-        const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), { message });
-        const result = await operation;
+            if (confirmed && isDevelopment()) {
+                // eslint-disable-next-line no-console
+                console.warn(`Confirmed confirm modal was suppressed because required '${name}' checkbox was missing`);
+            }
 
-        await this.closeModal(modal.id);
+            return [false, checkboxes];
+        }
 
-        return result;
+        return 'checkboxes' in properties ? [confirmed, checkboxes] : confirmed;
     }
 
-    public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
-        const snackbar: Snackbar = {
-            id: uuid(),
-            properties: { message, ...options },
-            component: options.component ?? markRaw(this.requireComponent(UIComponents.Snackbar)),
+    public async prompt(message: string, options?: PromptOptions): Promise<string | null>;
+    public async prompt(title: string, message: string, options?: PromptOptions): Promise<string | null>;
+    public async prompt(
+        messageOrTitle: string,
+        messageOrOptions?: string | PromptOptions,
+        options?: PromptOptions,
+    ): Promise<string | null> {
+        const trim = options?.trim ?? true;
+        const getProperties = (): PromptModalProps => {
+            if (typeof messageOrOptions !== 'string') {
+                return {
+                    message: messageOrTitle,
+                    ...(messageOrOptions ?? {}),
+                } as PromptModalProps;
+            }
+
+            return {
+                title: messageOrTitle,
+                message: messageOrOptions,
+                ...(options ?? {}),
+            } as PromptModalProps;
         };
 
-        this.setState('snackbars', this.snackbars.concat(snackbar));
+        const rawResult = await this.modalForm(this.requireComponent('prompt-modal'), getProperties());
+        const result = trim && typeof rawResult === 'string' ? rawResult?.trim() : rawResult;
 
-        setTimeout(() => this.hideSnackbar(snackbar.id), 5000);
+        return result ?? null;
     }
 
-    public hideSnackbar(id: string): void {
-        this.setState(
-            'snackbars',
-            this.snackbars.filter((snackbar) => snackbar.id !== id),
-        );
+    public async loading<T>(operation: Promise<T> | (() => T)): Promise<T>;
+    public async loading<T>(message: string, operation: Promise<T> | (() => T)): Promise<T>;
+    public async loading<T>(options: LoadingOptions, operation: Promise<T> | (() => T)): Promise<T>;
+    public async loading<T>(
+        operationOrMessageOrOptions: string | LoadingOptions | Promise<T> | (() => T),
+        operation?: Promise<T> | (() => T),
+    ): Promise<T> {
+        const processOperation = (o: Promise<T> | (() => T)) => (typeof o === 'function' ? Promise.resolve(o()) : o);
+        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
+            if (typeof operationOrMessageOrOptions === 'string') {
+                return {
+                    props: { message: operationOrMessageOrOptions },
+                    operationPromise: processOperation(operation as Promise<T> | (() => T)),
+                };
+            }
+
+            if (typeof operationOrMessageOrOptions === 'function' || operationOrMessageOrOptions instanceof Promise) {
+                return { operationPromise: processOperation(operationOrMessageOrOptions) };
+            }
+
+            return {
+                props: operationOrMessageOrOptions,
+                operationPromise: processOperation(operation as Promise<T> | (() => T)),
+            };
+        };
+
+        const { operationPromise, props } = processArgs();
+        const modal = await this.modal(this.requireComponent('loading-modal'), props);
+
+        try {
+            const result = await operationPromise;
+
+            await after({ ms: 500 });
+
+            return result;
+        } finally {
+            await this.closeModal(modal.id);
+        }
     }
 
-    public registerComponent(name: UIComponent, component: Component): void {
-        this.components[name] = component;
+    public toast(message: string, options: ToastOptions = {}): void {
+        const { component, ...otherOptions } = options;
+        const toast: UIToast = {
+            id: uuid(),
+            properties: { message, ...otherOptions },
+            component: markRaw(component ?? this.requireComponent('toast')),
+        };
+
+        this.setState('toasts', this.toasts.concat(toast));
     }
 
-    public async openModal<TModalComponent extends ModalComponent>(
-        component: TModalComponent,
-        properties?: ModalProperties<TModalComponent>,
-    ): Promise<Modal<ModalResult<TModalComponent>>> {
+    public modal<T extends Component>(
+        ...args: {} extends ComponentProps<T>
+            ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
+            : [component: T, props: AcceptRefs<ComponentProps<T>>]
+    ): Promise<UIModal<ModalResult<T>>>;
+
+    public async modal<T extends Component>(component: T, props?: ComponentProps<T>): Promise<UIModal<ModalResult<T>>> {
         const id = uuid();
-        const callbacks: Partial<ModalCallbacks<ModalResult<TModalComponent>>> = {};
-        const modal: Modal<ModalResult<TModalComponent>> = {
+        const callbacks: Partial<ModalCallbacks<ModalResult<T>>> = {};
+        const modal: UIModal<ModalResult<T>> = {
             id,
-            properties: properties ?? {},
+            closing: false,
+            properties: props ?? {},
             component: markRaw(component),
             beforeClose: new Promise((resolve) => (callbacks.willClose = resolve)),
-            afterClose: new Promise((resolve) => (callbacks.closed = resolve)),
+            afterClose: new Promise((resolve) => (callbacks.hasClosed = resolve)),
         };
-        const activeModal = this.modals.at(-1);
         const modals = this.modals.concat(modal);
 
         this.modalCallbacks[modal.id] = callbacks;
@@ -123,58 +285,115 @@ export class UIService extends Service {
         this.setState({ modals });
 
         await nextTick();
-        await (activeModal && Events.emit('hide-modal', { id: activeModal.id }));
-        await Promise.all([
-            activeModal || Events.emit('show-overlays-backdrop'),
-            Events.emit('show-modal', { id: modal.id }),
-        ]);
 
         return modal;
     }
 
+    public modalForm<T extends Component>(
+        ...args: {} extends ComponentProps<T>
+            ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
+            : [component: T, props: AcceptRefs<ComponentProps<T>>]
+    ): Promise<ModalResult<T> | undefined>;
+
+    public async modalForm<T extends Component>(
+        component: T,
+        props?: ComponentProps<T>,
+    ): Promise<ModalResult<T> | undefined> {
+        const modal = await this.modal<T>(component, props as ComponentProps<T>);
+        const result = await modal.beforeClose;
+
+        return result;
+    }
+
     public async closeModal(id: string, result?: unknown): Promise<void> {
+        if (!App.isMounted()) {
+            await this.removeModal(id, result);
+
+            return;
+        }
+
         await Events.emit('close-modal', { id, result });
     }
 
-    protected async boot(): Promise<void> {
+    public async closeAllModals(): Promise<void> {
+        while (this.modals.length > 0) {
+            await this.closeModal(required(this.modals[this.modals.length - 1]).id);
+        }
+    }
+
+    protected override async boot(): Promise<void> {
         this.watchModalEvents();
+        this.watchMountedEvent();
+        this.watchViewportBreakpoints();
+    }
+
+    private async removeModal(id: string, result?: unknown): Promise<void> {
+        this.setState(
+            'modals',
+            this.modals.filter((m) => m.id !== id),
+        );
+
+        this.modalCallbacks[id]?.hasClosed?.(result);
+
+        delete this.modalCallbacks[id];
     }
 
     private watchModalEvents(): void {
-        Events.on('modal-will-close', ({ modal, result }) => {
-            this.modalCallbacks[modal.id]?.willClose?.(result);
+        Events.on('modal-will-close', ({ modal: { id }, result }) => {
+            const modal = this.modals.find((_modal) => id === _modal.id);
 
-            if (this.modals.length === 1) {
-                Events.emit('hide-overlays-backdrop');
+            if (modal) {
+                modal.closing = true;
             }
+
+            this.modalCallbacks[id]?.willClose?.(result);
+        });
+
+        Events.on('modal-has-closed', async ({ modal: { id }, result }) => {
+            await this.removeModal(id, result);
         });
+    }
 
-        Events.on('modal-closed', async ({ modal, result }) => {
-            this.setState(
-                'modals',
-                this.modals.filter((m) => m.id !== modal.id),
-            );
+    private watchMountedEvent(): void {
+        Events.once('application-mounted', async () => {
+            if (!globalThis.document || !globalThis.getComputedStyle) {
+                return;
+            }
+
+            const splash = globalThis.document.getElementById('splash');
 
-            this.modalCallbacks[modal.id]?.closed?.(result);
+            if (!splash) {
+                return;
+            }
 
-            delete this.modalCallbacks[modal.id];
+            if (globalThis.getComputedStyle(splash).opacity !== '0') {
+                splash.style.opacity = '0';
 
-            const activeModal = this.modals.at(-1);
+                await after({ ms: 600 });
+            }
 
-            await (activeModal && Events.emit('show-modal', { id: activeModal.id }));
+            splash.remove();
         });
     }
 
+    private watchViewportBreakpoints(): void {
+        if (!globalThis.matchMedia) {
+            return;
+        }
+
+        const media = globalThis.matchMedia(`(min-width: ${MOBILE_BREAKPOINT}px)`);
+
+        media.addEventListener('change', () => this.setState({ layout: getCurrentLayout() }));
+    }
+
 }
 
-export default facade(new UIService());
+export default facade(UIService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
-        'modal-will-close': { modal: Modal; result?: unknown };
-        'modal-closed': { modal: Modal; result?: unknown };
         'close-modal': { id: string; result?: unknown };
-        'hide-modal': { id: string };
-        'show-modal': { id: string };
+        'modal-will-close': { modal: UIModal; result?: unknown };
+        'modal-has-closed': { modal: UIModal; result?: unknown };
     }
 }