@aerogel/core 0.0.0-next.bde642c4a8096c5fc3d5e676c2115da23f4bf1d8 → 0.0.0-next.c4825c5cbe0fe3257e478c2a7ec8df27d5a72305

package/src/ui/UI.ts

@@ -1,14 +1,17 @@
-import { after, facade, fail, uuid } from '@noeldemartin/utils';
+import { after, facade, fail, required, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
 import type { Component } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
 
+import App from '@/services/App';
 import Events from '@/services/Events';
+import type { AcceptRefs } from '@/utils';
 import type { Color } from '@/components/constants';
 import type { SnackbarAction, SnackbarColor } from '@/components/headless/snackbars';
 import type { AGAlertModalProps, AGConfirmModalProps, AGLoadingModalProps, AGPromptModalProps } from '@/components';
 
 import Service from './UI.state';
+import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
 import type { Modal, ModalComponent, Snackbar } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
@@ -33,14 +36,28 @@ export const UIComponents = {
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
-export interface ConfirmOptions {
+export type ConfirmCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
+
+export type ConfirmOptions = AcceptRefs<{
     acceptText?: string;
     acceptColor?: Color;
     cancelText?: string;
     cancelColor?: Color;
+    actions?: Record<string, () => unknown>;
+    required?: boolean;
+}>;
+
+export type LoadingOptions = AcceptRefs<{
+    title?: string;
+    message?: string;
+    progress?: number;
+}>;
+
+export interface ConfirmOptionsWithCheckboxes<T extends ConfirmCheckboxes = ConfirmCheckboxes> extends ConfirmOptions {
+    checkboxes?: T;
 }
 
-export interface PromptOptions {
+export type PromptOptions = AcceptRefs<{
     label?: string;
     defaultValue?: string;
     placeholder?: string;
@@ -49,7 +66,7 @@ export interface PromptOptions {
     cancelText?: string;
     cancelColor?: Color;
     trim?: boolean;
-}
+}>;
 
 export interface ShowSnackbarOptions {
     component?: Component;
@@ -83,35 +100,66 @@ export class UIService extends Service {
         this.openModal(this.requireComponent(UIComponents.AlertModal), getProperties());
     }
 
+    /* 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 ConfirmCheckboxes>(message: string, options?: ConfirmOptionsWithCheckboxes<T>): Promise<[boolean, Record<keyof T, boolean>]>; // prettier-ignore
+    public async confirm<T extends ConfirmCheckboxes>(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,
-        options?: ConfirmOptions,
-    ): Promise<boolean> {
+        messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
+        options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
+    ): Promise<boolean | [boolean, Record<string, boolean>]> {
         const getProperties = (): AGConfirmModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
-                    message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
+                    message: messageOrTitle,
+                    required: !!messageOrOptions?.required,
                 };
             }
 
             return {
+                ...(options ?? {}),
                 title: messageOrTitle,
                 message: messageOrOptions,
-                ...(options ?? {}),
+                required: !!options?.required,
             };
         };
-
-        const modal = await this.openModal<ModalComponent<AGConfirmModalProps, boolean>>(
-            this.requireComponent(UIComponents.ConfirmModal),
-            getProperties(),
-        );
+        const properties = getProperties();
+        const modal = await this.openModal<
+            ModalComponent<AGConfirmModalProps, boolean | [boolean, Record<string, boolean>]>
+        >(this.requireComponent(UIComponents.ConfirmModal), properties);
         const result = await modal.beforeClose;
 
-        return result ?? false;
+        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;
+            }
+
+            if (confirmed && App.development) {
+                // eslint-disable-next-line no-console
+                console.warn(`Confirmed confirm modal was suppressed because required '${name}' checkbox was missing`);
+            }
+
+            return [false, checkboxes];
+        }
+
+        return 'checkboxes' in properties ? [confirmed, checkboxes] : confirmed;
     }
 
     public async prompt(message: string, options?: PromptOptions): Promise<string | null>;
@@ -127,14 +175,14 @@ export class UIService extends Service {
                 return {
                     message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
-                };
+                } as AGPromptModalProps;
             }
 
             return {
                 title: messageOrTitle,
                 message: messageOrOptions,
                 ...(options ?? {}),
-            };
+            } as AGPromptModalProps;
         };
 
         const modal = await this.openModal<ModalComponent<AGPromptModalProps, string | null>>(
@@ -147,23 +195,37 @@ export class UIService extends Service {
         return result ?? null;
     }
 
-    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> {
-        const getProperties = (): AGLoadingModalProps => {
-            if (typeof messageOrOperation !== 'string') {
-                return {};
+    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?: AGLoadingModalProps } => {
+            if (typeof operationOrMessageOrOptions === 'string') {
+                return {
+                    props: { message: operationOrMessageOrOptions },
+                    operationPromise: processOperation(operation as Promise<T> | (() => T)),
+                };
             }
 
-            return { message: messageOrOperation };
+            if (typeof operationOrMessageOrOptions === 'function' || operationOrMessageOrOptions instanceof Promise) {
+                return { operationPromise: processOperation(operationOrMessageOrOptions) };
+            }
+
+            return {
+                props: operationOrMessageOrOptions,
+                operationPromise: processOperation(operation as Promise<T> | (() => T)),
+            };
         };
 
-        const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), getProperties());
+        const { operationPromise, props } = processArgs();
+        const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), props);
 
         try {
-            operation = typeof messageOrOperation === 'string' ? (operation as Promise<T>) : messageOrOperation;
-
-            const [result] = await Promise.all([operation, after({ seconds: 1 })]);
+            const [result] = await Promise.all([operationPromise, after({ seconds: 1 })]);
 
             return result;
         } finally {
@@ -225,12 +287,40 @@ export class UIService extends Service {
     }
 
     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 });
     }
 
+    public async closeAllModals(): Promise<void> {
+        while (this.modals.length > 0) {
+            await this.closeModal(required(this.modals[this.modals.length - 1]).id);
+        }
+    }
+
     protected 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]?.closed?.(result);
+
+        delete this.modalCallbacks[id];
+
+        const activeModal = this.modals.at(-1);
+
+        await (activeModal && Events.emit('show-modal', { id: activeModal.id }));
     }
 
     private watchModalEvents(): void {
@@ -242,31 +332,24 @@ export class UIService extends Service {
             }
         });
 
-        Events.on('modal-closed', async ({ modal, result }) => {
-            this.setState(
-                'modals',
-                this.modals.filter((m) => m.id !== modal.id),
-            );
-
-            this.modalCallbacks[modal.id]?.closed?.(result);
-
-            delete this.modalCallbacks[modal.id];
-
-            const activeModal = this.modals.at(-1);
-
-            await (activeModal && Events.emit('show-modal', { id: activeModal.id }));
+        Events.on('modal-closed', async ({ modal: { id }, result }) => {
+            await this.removeModal(id, result);
         });
     }
 
     private watchMountedEvent(): void {
         Events.once('application-mounted', async () => {
-            const splash = document.getElementById('splash');
+            if (!globalThis.document || !globalThis.getComputedStyle) {
+                return;
+            }
+
+            const splash = globalThis.document.getElementById('splash');
 
             if (!splash) {
                 return;
             }
 
-            if (window.getComputedStyle(splash).opacity !== '0') {
+            if (globalThis.getComputedStyle(splash).opacity !== '0') {
                 splash.style.opacity = '0';
 
                 await after({ ms: 600 });
@@ -276,6 +359,16 @@ export class UIService extends Service {
         });
     }
 
+    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(UIService);

package/src/ui/index.ts

@@ -16,6 +16,7 @@ import type { UIComponent } from './UI';
 const services = { $ui: UI };
 
 export * from './UI';
+export * from './utils';
 export { default as UI } from './UI';
 
 export type UIServices = typeof services;

package/src/ui/utils.ts

@@ -0,0 +1,16 @@
+export const MOBILE_BREAKPOINT = 768;
+
+export const Layouts = {
+    Mobile: 'mobile',
+    Desktop: 'desktop',
+} as const;
+
+export type Layout = (typeof Layouts)[keyof typeof Layouts];
+
+export function getCurrentLayout(): Layout {
+    if (globalThis.innerWidth > MOBILE_BREAKPOINT) {
+        return Layouts.Desktop;
+    }
+
+    return Layouts.Mobile;
+}

package/src/utils/composition/persistent.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest';
+import { nextTick } from 'vue';
+import { Storage } from '@noeldemartin/utils';
+
+import { persistent } from './persistent';
+
+describe('Vue persistent helper', () => {
+
+    it('serializes to localStorage', async () => {
+        // Arrange
+        const store = persistent<{ foo?: string }>('foobar', {});
+
+        // Act
+        store.foo = 'bar';
+
+        await nextTick();
+
+        // Assert
+        expect(Storage.get('foobar')).toEqual({ foo: 'bar' });
+    });
+
+    it('reads from localStorage', async () => {
+        // Arrange
+        Storage.set('foobar', { foo: 'bar' });
+
+        // Act
+        const store = persistent<{ foo?: string }>('foobar', {});
+
+        // Assert
+        expect(store.foo).toEqual('bar');
+    });
+
+});

package/src/utils/composition/persistent.ts

@@ -0,0 +1,11 @@
+import { reactive, toRaw, watch } from 'vue';
+import { Storage } from '@noeldemartin/utils';
+import type { UnwrapNestedRefs } from 'vue';
+
+export function persistent<T extends object>(name: string, defaults: T): UnwrapNestedRefs<T> {
+    const store = reactive<T>(Storage.get<T>(name) ?? defaults);
+
+    watch(store, () => Storage.set(name, toRaw(store)));
+
+    return store;
+}

package/src/utils/composition/state.test.ts

@@ -0,0 +1,47 @@
+import { after } from '@noeldemartin/utils';
+import { describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+
+import { computedDebounce } from './state';
+
+describe('Vue state helpers', () => {
+
+    it('computes debounced state', async () => {
+        // Initial
+        const state = ref(0);
+        const value = computedDebounce({ delay: 90 }, () => state.value);
+
+        expect(value.value).toBe(null);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(0);
+
+        // Update
+        state.value = 42;
+
+        expect(value.value).toBe(0);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(42);
+
+        // Debounced Update
+        state.value = 23;
+
+        expect(value.value).toBe(42);
+
+        await after({ ms: 50 });
+
+        state.value = 32;
+
+        await after({ ms: 50 });
+
+        expect(value.value).toBe(42);
+
+        await after({ ms: 100 });
+
+        expect(value.value).toBe(32);
+    });
+
+});

package/src/utils/composition/state.ts

@@ -0,0 +1,24 @@
+import { debounce } from '@noeldemartin/utils';
+import { ref, watchEffect } from 'vue';
+import type { ComputedGetter, ComputedRef } from '@vue/runtime-core';
+
+export interface ComputedDebounceOptions<T> {
+    initial?: T;
+    delay?: number;
+}
+
+export function computedDebounce<T>(options: ComputedDebounceOptions<T>, getter: ComputedGetter<T>): ComputedRef<T>;
+export function computedDebounce<T>(getter: ComputedGetter<T>): ComputedRef<T | null>;
+export function computedDebounce<T>(
+    optionsOrGetter: ComputedGetter<T> | ComputedDebounceOptions<T>,
+    inputGetter?: ComputedGetter<T>,
+): ComputedRef<T> {
+    const inputOptions = inputGetter ? (optionsOrGetter as ComputedDebounceOptions<T>) : {};
+    const getter = inputGetter ?? (optionsOrGetter as ComputedGetter<T>);
+    const state = ref(inputOptions.initial ?? null);
+    const update = debounce((value) => (state.value = value), inputOptions.delay ?? 300);
+
+    watchEffect(() => update(getter()));
+
+    return state as unknown as ComputedRef<T>;
+}

package/src/utils/index.ts

@@ -1,5 +1,6 @@
 export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
+export * from './composition/persistent';
 export * from './tailwindcss';
 export * from './vue';

package/src/utils/markdown.test.ts

@@ -0,0 +1,50 @@
+/* eslint-disable max-len */
+import { describe, expect, it } from 'vitest';
+
+import { renderMarkdown } from './markdown';
+
+describe('Markdown utils', () => {
+
+    it('renders basic markdown', () => {
+        // Arrange
+        const expectedHTML = `
+            <h1>Title</h1>
+            <p>body with <a target="_blank" href="https://example.com">link</a></p>
+            <ul>
+                <li>One</li>
+                <li>Two</li>
+                <li>Three</li>
+            </ul>
+        `;
+
+        // Act
+        const html = renderMarkdown(
+            ['# Title', 'body with [link](https://example.com)', '- One', '- Two', '- Three'].join('\n'),
+        );
+
+        // Assert
+        expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
+    });
+
+    it('renders button links', () => {
+        // Arrange
+        const expectedHTML = `
+            <p><button type="button" data-markdown-action="do-something">link</button></p>
+        `;
+
+        // Act
+        const html = renderMarkdown('[link](#action:do-something)');
+
+        // Assert
+        expect(normalizeHTML(html)).toMatch(new RegExp(normalizeHTML(expectedHTML)));
+    });
+
+});
+
+function normalizeHTML(html: string): string {
+    return html
+        .split('\n')
+        .map((line) => line.trim())
+        .join('\n')
+        .trim();
+}

package/src/utils/markdown.ts

@@ -1,5 +1,5 @@
-import { tap } from '@noeldemartin/utils';
 import DOMPurify from 'dompurify';
+import { stringMatchAll, tap } from '@noeldemartin/utils';
 import { Renderer, marked } from 'marked';
 
 function makeRenderer(): Renderer {
@@ -10,8 +10,23 @@ function makeRenderer(): Renderer {
     });
 }
 
+function renderActionLinks(html: string): string {
+    const matches = stringMatchAll<3>(html, /<a[^>]*href="#action:([^"]+)"[^>]*>([^<]+)<\/a>/g);
+
+    for (const [link, action, text] of matches) {
+        html = html.replace(link, `<button type="button" data-markdown-action="${action}">${text}</button>`);
+    }
+
+    return html;
+}
+
 export function renderMarkdown(markdown: string): string {
-    return safeHtml(marked(markdown, { mangle: false, headerIds: false, renderer: makeRenderer() }));
+    let html = marked(markdown, { mangle: false, headerIds: false, renderer: makeRenderer() });
+
+    html = safeHtml(html);
+    html = renderActionLinks(html);
+
+    return html;
 }
 
 export function safeHtml(html: string): string {

package/src/utils/vue.ts

@@ -1,6 +1,6 @@
 import { fail } from '@noeldemartin/utils';
 import { computed, inject, reactive, ref, watch } from 'vue';
-import type { Directive, InjectionKey, PropType, Ref, UnwrapNestedRefs } from 'vue';
+import type { Directive, InjectionKey, MaybeRef, PropType, Ref, UnwrapNestedRefs } from 'vue';
 
 type BaseProp<T> = {
     type?: PropType<T>;
@@ -10,7 +10,10 @@ type BaseProp<T> = {
 type RequiredProp<T> = BaseProp<T> & { required: true };
 type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
 
+export type AcceptRefs<T> = { [K in keyof T]: T[K] | RefUnion<T[K]> };
 export type ComponentProps = Record<string, unknown>;
+export type RefUnion<T> = T extends infer R ? Ref<R> : never;
+export type Unref<T> = { [K in keyof T]: T[K] extends MaybeRef<infer Value> ? Value : T[K] };
 
 export function arrayProp<T>(defaultValue?: () => T[]): OptionalProp<T[]> {
     return {
@@ -73,6 +76,13 @@ export function injectOrFail<T>(key: InjectionKey<T> | string, errorMessage?: st
     return inject(key) ?? fail(errorMessage ?? `Could not resolve '${key}' injection key`);
 }
 
+export function listenerProp<T extends Function = Function>(): OptionalProp<T | null> {
+    return {
+        type: Function as PropType<T>,
+        default: null,
+    };
+}
+
 export function mixedProp<T>(type?: PropType<T>): OptionalProp<T | null>;
 export function mixedProp<T>(type: PropType<T>, defaultValue: T): OptionalProp<T>;
 export function mixedProp<T>(type?: PropType<T>, defaultValue?: T): OptionalProp<T | null> {