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

package/src/ui/UI.ts

@@ -1,14 +1,21 @@
-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 { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
+import type { ConfirmModalCheckboxes, ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+import type { LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { ToastAction, 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 { ModalComponent, UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -16,9 +23,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',
@@ -26,29 +32,48 @@ export const UIComponents = {
     ErrorReportModal: 'error-report-modal',
     LoadingModal: 'loading-modal',
     PromptModal: 'prompt-modal',
-    Snackbar: 'snackbar',
+    Toast: 'toast',
     StartupCrash: 'startup-crash',
+    RouterLink: 'router-link',
 } as const;
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
-export interface ConfirmOptions {
+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 PromptOptions {
+export type PromptOptions = AcceptRefs<{
     label?: string;
     defaultValue?: string;
     placeholder?: string;
     acceptText?: string;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-}
+    cancelVariant?: ButtonVariant;
+    trim?: boolean;
+}>;
 
-export interface ShowSnackbarOptions {
+export interface ToastOptions {
     component?: Component;
-    color?: SnackbarColor;
-    actions?: SnackbarAction[];
+    variant?: ToastVariant;
+    actions?: ToastAction[];
 }
 
 export class UIService extends Service {
@@ -56,14 +81,18 @@ export class UIService extends Service {
     private modalCallbacks: Record<string, Partial<ModalCallbacks>> = {};
     private components: Partial<Record<UIComponent, Component>> = {};
 
+    public resolveComponent(name: UIComponent): Component | null {
+        return this.components[name] ?? null;
+    }
+
     public requireComponent(name: UIComponent): Component {
-        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
+        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 getProperties = (): AGAlertModalProps => {
+        const getProperties = (): AlertModalProps => {
             if (typeof message !== 'string') {
                 return { message: messageOrTitle };
             }
@@ -74,38 +103,79 @@ export class UIService extends Service {
             };
         };
 
-        this.openModal(this.requireComponent(UIComponents.AlertModal), getProperties());
+        this.openModal<ModalComponent<AlertModalProps>>(
+            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 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,
-        options?: ConfirmOptions,
-    ): Promise<boolean> {
-        const getProperties = (): AGConfirmModalProps => {
+        messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
+        options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
+    ): Promise<boolean | [boolean, Record<string, boolean>]> {
+        const getProperties = (): AcceptRefs<ConfirmModalProps> => {
             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>>(
+        type ConfirmModalComponent = ModalComponent<
+            AcceptRefs<ConfirmModalProps>,
+            boolean | [boolean, Record<string, boolean>]
+        >;
+
+        const properties = getProperties();
+        const modal = await this.openModal<ConfirmModalComponent>(
             this.requireComponent(UIComponents.ConfirmModal),
-            getProperties(),
+            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 +185,65 @@ export class UIService extends Service {
         messageOrOptions?: string | PromptOptions,
         options?: PromptOptions,
     ): Promise<string | null> {
-        const getProperties = (): AGPromptModalProps => {
+        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;
         };
 
-        const modal = await this.openModal<ModalComponent<AGPromptModalProps, string | null>>(
+        const modal = await this.openModal<ModalComponent<PromptModalProps, 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?: AcceptRefs<LoadingModalProps> } => {
+            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 operationPromise;
 
-            const [result] = await Promise.all([operation, after({ seconds: 1 })]);
+            await after({ ms: 500 });
 
             return result;
         } finally {
@@ -163,23 +251,15 @@ export class UIService extends Service {
         }
     }
 
-    public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
-        const snackbar: Snackbar = {
+    public toast(message: string, options: ToastOptions = {}): void {
+        const { component, ...otherOptions } = options;
+        const toast: UIToast = {
             id: uuid(),
-            properties: { message, ...options },
-            component: markRaw(options.component ?? this.requireComponent(UIComponents.Snackbar)),
+            properties: { message, ...otherOptions },
+            component: markRaw(component ?? this.requireComponent(UIComponents.Toast)),
         };
 
-        this.setState('snackbars', this.snackbars.concat(snackbar));
-
-        setTimeout(() => this.hideSnackbar(snackbar.id), 5000);
-    }
-
-    public hideSnackbar(id: string): void {
-        this.setState(
-            'snackbars',
-            this.snackbars.filter((snackbar) => snackbar.id !== id),
-        );
+        this.setState('toasts', this.toasts.concat(toast));
     }
 
     public registerComponent(name: UIComponent, component: Component): void {
@@ -189,10 +269,10 @@ export class UIService extends Service {
     public async openModal<TModalComponent extends ModalComponent>(
         component: TModalComponent,
         properties?: ModalProperties<TModalComponent>,
-    ): Promise<Modal<ModalResult<TModalComponent>>> {
+    ): Promise<UIModal<ModalResult<TModalComponent>>> {
         const id = uuid();
         const callbacks: Partial<ModalCallbacks<ModalResult<TModalComponent>>> = {};
-        const modal: Modal<ModalResult<TModalComponent>> = {
+        const modal: UIModal<ModalResult<TModalComponent>> = {
             id,
             properties: properties ?? {},
             component: markRaw(component),
@@ -217,12 +297,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 +342,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,17 +369,27 @@ 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 };
         'hide-overlays-backdrop': void;
-        'modal-closed': { modal: Modal; result?: unknown };
-        'modal-will-close': { modal: Modal; result?: unknown };
+        'modal-closed': { modal: UIModal; result?: unknown };
+        'modal-will-close': { modal: UIModal; result?: unknown };
         'show-modal': { id: string };
         'show-overlays-backdrop': void;
     }

package/src/ui/index.ts

@@ -1,21 +1,22 @@
 import type { Component } from 'vue';
 
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import AlertModal from '@aerogel/core/components/ui/AlertModal.vue';
+import ConfirmModal from '@aerogel/core/components/ui/ConfirmModal.vue';
+import ErrorReportModal from '@aerogel/core/components/ui/ErrorReportModal.vue';
+import LoadingModal from '@aerogel/core/components/ui/LoadingModal.vue';
+import PromptModal from '@aerogel/core/components/ui/PromptModal.vue';
+import StartupCrash from '@aerogel/core/components/ui/StartupCrash.vue';
+import Toast from '@aerogel/core/components/ui/Toast.vue';
+import { bootServices } from '@aerogel/core/services';
+import { definePlugin } from '@aerogel/core/plugins';
 
 import UI, { UIComponents } from './UI';
-import AGAlertModal from '../components/modals/AGAlertModal.vue';
-import AGConfirmModal from '../components/modals/AGConfirmModal.vue';
-import AGErrorReportModal from '../components/modals/AGErrorReportModal.vue';
-import AGLoadingModal from '../components/modals/AGLoadingModal.vue';
-import AGPromptModal from '../components/modals/AGPromptModal.vue';
-import AGSnackbar from '../components/snackbars/AGSnackbar.vue';
-import AGStartupCrash from '../components/lib/AGStartupCrash.vue';
 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;
@@ -23,13 +24,13 @@ export type UIServices = typeof services;
 export default definePlugin({
     async install(app, options) {
         const defaultComponents = {
-            [UIComponents.AlertModal]: AGAlertModal,
-            [UIComponents.ConfirmModal]: AGConfirmModal,
-            [UIComponents.ErrorReportModal]: AGErrorReportModal,
-            [UIComponents.LoadingModal]: AGLoadingModal,
-            [UIComponents.PromptModal]: AGPromptModal,
-            [UIComponents.Snackbar]: AGSnackbar,
-            [UIComponents.StartupCrash]: AGStartupCrash,
+            [UIComponents.AlertModal]: AlertModal,
+            [UIComponents.ConfirmModal]: ConfirmModal,
+            [UIComponents.ErrorReportModal]: ErrorReportModal,
+            [UIComponents.LoadingModal]: LoadingModal,
+            [UIComponents.PromptModal]: PromptModal,
+            [UIComponents.Toast]: Toast,
+            [UIComponents.StartupCrash]: StartupCrash,
         };
 
         Object.entries({
@@ -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/classes.ts

@@ -0,0 +1,49 @@
+import clsx from 'clsx';
+import { computed, unref } from 'vue';
+import { cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+import type { ClassValue } from 'clsx';
+import type { ComputedRef, PropType, Ref } from 'vue';
+import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
+
+export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type RefsObject<T> = { [K in keyof T]: Ref<T[K]> | T[K] };
+export type Variants<T extends Record<string, string | boolean>> = Required<{
+    [K in keyof T]: Exclude<T[K], undefined> extends string
+        ? { [key in Exclude<T[K], undefined>]: string | null }
+        : { true: string | null; false: string | null };
+}>;
+
+export type ComponentPropDefinitions<T> = {
+    [K in keyof T]: {
+        type?: PropType<T[K]>;
+        default: T[K] | (() => T[K]) | null;
+    };
+};
+
+export type PickComponentProps<TValues, TDefinitions> = {
+    [K in keyof TValues]: K extends keyof TDefinitions ? TValues[K] : never;
+};
+
+export function computedVariantClasses<T>(
+    value: RefsObject<{ baseClasses?: string } & CVAProps<T>>,
+    config: { baseClasses?: string } & CVAConfig<T>,
+): ComputedRef<string> {
+    return computed(() => {
+        const { baseClasses: valueBaseClasses, ...valueRefs } = value;
+        const { baseClasses: configBaseClasses, ...configs } = config;
+        const variants = cva(configBaseClasses, configs as CVAConfig<T>);
+        const values = Object.entries(valueRefs).reduce((extractedValues, [name, valueRef]) => {
+            extractedValues[name as keyof CVAProps<T>] = unref(valueRef);
+
+            return extractedValues;
+        }, {} as CVAProps<T>);
+
+        return classes(variants(values), unref(valueBaseClasses));
+    });
+}
+
+export function classes(...inputs: ClassValue[]): string {
+    return twMerge(clsx(inputs));
+}

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

@@ -1,11 +1,21 @@
 import { objectWithout } from '@noeldemartin/utils';
-import { computed, useAttrs } from 'vue';
+import { computed, inject, onUnmounted, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
 import type { ComputedRef } from 'vue';
+import type { FormController } from '@aerogel/core/forms';
+import type { Nullable } from '@noeldemartin/utils';
 
-export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<unknown>] {
+export function onFormFocus(input: { name: Nullable<string> }, listener: () => unknown): void {
+    const form = inject<FormController | null>('form', null);
+    const stop = form?.on('focus', (name) => input.name === name && listener());
+
+    onUnmounted(() => stop?.());
+}
+
+export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<ClassValue>] {
     const attrs = useAttrs();
-    const className = computed(() => attrs.class);
+    const classes = computed(() => attrs.class);
     const inputAttrs = computed(() => objectWithout(attrs, 'class'));
 
-    return [inputAttrs, className];
+    return [inputAttrs, classes as ComputedRef<ClassValue>];
 }

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;
+}