@aerogel/core 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832 → 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2

package/src/services/index.ts

@@ -1,22 +1,28 @@
 import type { App as VueApp } from 'vue';
 
-import { definePlugin } from '@/plugins';
+import { definePlugin } from '@aerogel/core/plugins';
+import { isDevelopment, isTesting } from '@noeldemartin/utils';
 
 import App from './App';
+import Cache from './Cache';
 import Events from './Events';
 import Service from './Service';
+import Storage from './Storage';
 import { getPiniaStore } from './store';
 
 export * from './App';
+export * from './Cache';
 export * from './Events';
 export * from './Service';
 export * from './store';
+export * from './utils';
 
-export { App, Events, Service };
+export { App, Cache, Events, Storage, Service };
 
 const defaultServices = {
     $app: App,
     $events: Events,
+    $storage: Storage,
 };
 
 export type DefaultServices = typeof defaultServices;
@@ -34,7 +40,9 @@ export async function bootServices(app: VueApp, services: Record<string, Service
 
     Object.assign(app.config.globalProperties, services);
 
-    App.development && Object.assign(window, services);
+    if (isDevelopment() || isTesting()) {
+        Object.assign(globalThis, services);
+    }
 }
 
 export default definePlugin({
@@ -50,12 +58,12 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
     }
 }
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
     interface ComponentCustomProperties extends Services {}
 }

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

@@ -1,7 +1,8 @@
+import { isTesting } from '@noeldemartin/utils';
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
-import Events from '@/services/Events';
-import { definePlugin } from '@/plugins';
+import Events from '@aerogel/core/services/Events';
+import { definePlugin } from '@aerogel/core/plugins';
 
 export interface AerogelTestingRuntime {
     on: (typeof Events)['on'];
@@ -9,7 +10,7 @@ export interface AerogelTestingRuntime {
 
 export default definePlugin({
     async install() {
-        if (import.meta.env.MODE !== 'testing') {
+        if (!isTesting()) {
             return;
         }
 

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,6 +1,8 @@
 import type { Component } from 'vue';
 
-import { defineServiceState } from '@/services/Service';
+import { defineServiceState } from '@aerogel/core/services/Service';
+
+import { Layouts, getCurrentLayout } from './utils';
 
 export interface Modal<T = unknown> {
     id: string;
@@ -14,7 +16,7 @@ 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
+    Result = unknown,
 > {}
 
 export interface Snackbar {
@@ -28,5 +30,10 @@ export default defineServiceState({
     initialState: {
         modals: [] as Modal[],
         snackbars: [] as Snackbar[],
+        layout: getCurrentLayout(),
+    },
+    computed: {
+        mobile: ({ layout }) => layout === Layouts.Mobile,
+        desktop: ({ layout }) => layout === Layouts.Desktop,
     },
 });

package/src/ui/UI.ts

@@ -1,13 +1,22 @@
-import { after, facade, fail, uuid } from '@noeldemartin/utils';
+import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
 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 { AGAlertModalProps, AGConfirmModalProps, AGLoadingModalProps, AGPromptModalProps } from '@/components';
+import App from '@aerogel/core/services/App';
+import Events from '@aerogel/core/services/Events';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { Color } from '@aerogel/core/components/constants';
+import type { SnackbarAction, SnackbarColor } from '@aerogel/core/components/headless/snackbars';
+import type {
+    AGAlertModalProps,
+    AGConfirmModalProps,
+    AGLoadingModalProps,
+    AGPromptModalProps,
+} from '@aerogel/core/components';
 
 import Service from './UI.state';
+import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
 import type { Modal, ModalComponent, Snackbar } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
@@ -16,9 +25,8 @@ interface ModalCallbacks<T = unknown> {
 }
 
 type ModalProperties<TComponent> = TComponent extends ModalComponent<infer TProperties, unknown> ? TProperties : never;
-type ModalResult<TComponent> = TComponent extends ModalComponent<Record<string, unknown>, infer TResult>
-    ? TResult
-    : never;
+type ModalResult<TComponent> =
+    TComponent extends ModalComponent<Record<string, unknown>, infer TResult> ? TResult : never;
 
 export const UIComponents = {
     AlertModal: 'alert-modal',
@@ -32,18 +40,37 @@ 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;
     acceptText?: string;
+    acceptColor?: Color;
     cancelText?: string;
-}
+    cancelColor?: Color;
+    trim?: boolean;
+}>;
 
 export interface ShowSnackbarOptions {
     component?: Component;
@@ -77,35 +104,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 && isDevelopment()) {
+                // 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>;
@@ -115,47 +173,63 @@ export class UIService extends Service {
         messageOrOptions?: string | PromptOptions,
         options?: PromptOptions,
     ): Promise<string | null> {
+        const trim = options?.trim ?? true;
         const getProperties = (): AGPromptModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
-                };
+                } as AGPromptModalProps;
             }
 
             return {
                 title: messageOrTitle,
                 message: messageOrOptions,
                 ...(options ?? {}),
-            };
+            } as AGPromptModalProps;
         };
 
         const modal = await this.openModal<ModalComponent<AGPromptModalProps, string | null>>(
             this.requireComponent(UIComponents.PromptModal),
             getProperties(),
         );
-        const result = await modal.beforeClose;
+        const rawResult = await modal.beforeClose;
+        const result = trim && typeof rawResult === 'string' ? rawResult?.trim() : rawResult;
 
         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 {
@@ -217,12 +291,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 });
     }
 
-    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]?.closed?.(result);
+
+        delete this.modalCallbacks[id];
+
+        const activeModal = this.modals.at(-1);
+
+        await (activeModal && Events.emit('show-modal', { id: activeModal.id }));
     }
 
     private watchModalEvents(): void {
@@ -234,31 +336,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 });
@@ -268,11 +363,21 @@ 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);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'close-modal': { id: string; result?: unknown };
         'hide-modal': { id: string };

package/src/ui/index.ts

@@ -1,7 +1,7 @@
 import type { Component } from 'vue';
 
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
 import UI, { UIComponents } from './UI';
 import AGAlertModal from '../components/modals/AGAlertModal.vue';
@@ -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;
@@ -41,12 +42,12 @@ export default definePlugin({
     },
 });
 
-declare module '@/bootstrap/options' {
+declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         components?: Partial<Record<UIComponent, Component>>;
     }
 }
 
-declare module '@/services' {
+declare module '@aerogel/core/services' {
     export interface Services extends UIServices {}
 }

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/events.ts

@@ -1,13 +1,13 @@
 import { onUnmounted } from 'vue';
 
-import Events from '@/services/Events';
+import Events from '@aerogel/core/services/Events';
 import type {
     EventListener,
     EventWithPayload,
     EventWithoutPayload,
     EventsPayload,
     UnknownEvent,
-} from '@/services/Events';
+} from '@aerogel/core/services/Events';
 
 export function useEvent<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): void;
 export function useEvent<Event extends EventWithPayload>(

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,7 @@
 export * from './composition/events';
 export * from './composition/forms';
 export * from './composition/hooks';
+export * from './composition/persistent';
+export * from './markdown';
 export * from './tailwindcss';
 export * from './vue';