@aerogel/core 0.0.0-next.c29ffcd25bffdbed37ecce3aac1ba14cde3e9d39 → 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e

package/src/services/Cache.ts

@@ -1,6 +1,6 @@
 import { PromisedValue, facade, tap } from '@noeldemartin/utils';
 
-import Service from '@/services/Service';
+import Service from '@aerogel/core/services/Service';
 
 export class CacheService extends Service {
 

package/src/services/Events.ts

@@ -1,6 +1,6 @@
 import { arrayRemove, facade, fail, tap } from '@noeldemartin/utils';
 
-import Service from '@/services/Service';
+import Service from '@aerogel/core/services/Service';
 
 export interface EventsPayload {}
 export interface EventListenerOptions {
@@ -32,7 +32,7 @@ export class EventsService extends Service {
 
     private listeners: Record<string, { priorities: number[]; handlers: Record<number, EventListener[]> }> = {};
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         Object.entries(globalThis.__aerogelEvents__ ?? {}).forEach(([event, listener]) =>
             this.on(event as string, listener as EventListener));
     }

package/src/services/Service.ts

@@ -11,9 +11,9 @@ import {
 import type { Constructor, Nullable } from '@noeldemartin/utils';
 import type { Store } from 'pinia';
 
-import ServiceBootError from '@/errors/ServiceBootError';
-import { defineServiceStore } from '@/services/store';
-import type { Unref } from '@/utils/vue';
+import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
+import { defineServiceStore } from '@aerogel/core/services/store';
+import type { Unref } from '@aerogel/core/utils/vue';
 
 export type ServiceState = Record<string, any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 export type DefaultServiceState = any; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -32,7 +32,7 @@ export type StateWatchers<TService extends Service, TState extends ServiceState>
 export type ServiceWithState<
     State extends ServiceState = ServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 > = Constructor<Unref<State>> &
     Constructor<ComputedState> &
     Constructor<Service<Unref<State>, ComputedState, Unref<ServiceStorage>>>;
@@ -40,7 +40,7 @@ export type ServiceWithState<
 export function defineServiceState<
     State extends ServiceState = ServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 >(options: {
     name: string;
     initialState: State | (() => State);
@@ -52,17 +52,17 @@ export function defineServiceState<
 }): ServiceWithState<State, ComputedState, ServiceStorage> {
     return class extends Service<Unref<State>, ComputedState, ServiceStorage> {
 
-        public static persist = (options.persist as string[]) ?? [];
+        public static override persist = (options.persist as string[]) ?? [];
 
-        protected usesStore(): boolean {
+        protected override usesStore(): boolean {
             return true;
         }
 
-        protected getName(): string | null {
+        protected override getName(): string | null {
             return options.name ?? null;
         }
 
-        protected getInitialState(): Unref<State> {
+        protected override getInitialState(): Unref<State> {
             if (typeof options.initialState === 'function') {
                 return options.initialState();
             }
@@ -86,19 +86,19 @@ export function defineServiceState<
             }, {} as Unref<State>);
         }
 
-        protected getComputedStateDefinition(): ComputedStateDefinition<Unref<State>, ComputedState> {
+        protected override getComputedStateDefinition(): ComputedStateDefinition<Unref<State>, ComputedState> {
             return (options.computed ?? {}) as ComputedStateDefinition<Unref<State>, ComputedState>;
         }
 
-        protected getStateWatchers(): StateWatchers<Service, Unref<State>> {
+        protected override getStateWatchers(): StateWatchers<Service, Unref<State>> {
             return (options.watch ?? {}) as StateWatchers<Service, Unref<State>>;
         }
 
-        protected serializePersistedState(state: Partial<State>): ServiceStorage {
+        protected override serializePersistedState(state: Partial<State>): ServiceStorage {
             return options.serialize?.(state) ?? (state as ServiceStorage);
         }
 
-        protected deserializePersistedState(state: ServiceStorage): Partial<State> {
+        protected override deserializePersistedState(state: ServiceStorage): Partial<State> {
             return options.restore?.(state) ?? (state as Partial<State>);
         }
     
@@ -108,7 +108,7 @@ export function defineServiceState<
 export default class Service<
     State extends ServiceState = DefaultServiceState,
     ComputedState extends ServiceState = {},
-    ServiceStorage = Partial<State>
+    ServiceStorage = Partial<State>,
 > extends MagicObject {
 
     public static persist: string[] = [];
@@ -142,9 +142,9 @@ export default class Service<
         return this._booted;
     }
 
-    public static<T extends typeof Service>(): T;
-    public static<T extends typeof Service, K extends keyof T>(property: K): T[K];
-    public static<T extends typeof Service, K extends keyof T>(property?: K): T | T[K] {
+    public override static<T extends typeof Service>(): T;
+    public override static<T extends typeof Service, K extends keyof T>(property: K): T[K];
+    public override static<T extends typeof Service, K extends keyof T>(property?: K): T | T[K] {
         return super.static<T, K>(property as K);
     }
 
@@ -182,10 +182,10 @@ export default class Service<
         const store = this._store as any;
 
         if (property) {
-            return store ? store[property] : undefined;
+            return store ? store[property] : (undefined as State[P]);
         }
 
-        return store ? store : {};
+        return store ? store : ({} as State);
     }
 
     public setState<P extends keyof State>(property: P, value: State[P]): void;
@@ -219,7 +219,7 @@ export default class Service<
         this.onPersistentStateUpdated(state);
     }
 
-    protected __get(property: string): unknown {
+    protected override __get(property: string): unknown {
         if (this.hasState(property)) {
             return this.getState(property);
         }
@@ -227,7 +227,7 @@ export default class Service<
         return super.__get(property);
     }
 
-    protected __set(property: string, value: unknown): void {
+    protected override __set(property: string, value: unknown): void {
         this.setState({ [property]: value } as Partial<State>);
     }
 

package/src/services/Storage.ts

@@ -1,7 +1,7 @@
 import { facade } from '@noeldemartin/utils';
 
-import Events from '@/services/Events';
-import Service from '@/services/Service';
+import Events from '@aerogel/core/services/Events';
+import Service from '@aerogel/core/services/Service';
 
 export class StorageService extends Service {
 
@@ -13,7 +13,7 @@ export class StorageService extends Service {
 
 export default facade(StorageService);
 
-declare module '@/services/Events' {
+declare module '@aerogel/core/services/Events' {
     export interface EventsPayload {
         'purge-storage': void;
     }

package/src/services/index.ts

@@ -1,6 +1,7 @@
 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';
@@ -39,7 +40,7 @@ export async function bootServices(app: VueApp, services: Record<string, Service
 
     Object.assign(app.config.globalProperties, services);
 
-    if (App.development || App.testing) {
+    if (isDevelopment() || isTesting()) {
         Object.assign(globalThis, services);
     }
 }
@@ -57,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

@@ -2,14 +2,14 @@ import { objectOnly } from '@noeldemartin/utils';
 
 export type Replace<
     TOriginal extends Record<string, unknown>,
-    TReplacements extends Partial<Record<keyof TOriginal, 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>>
+    TReplacements extends Partial<Record<keyof TOriginal, unknown>>,
 >(original: TOriginal, replacements: TReplacements): Replace<TOriginal, TReplacements> {
     return {
         ...original,

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

@@ -1,27 +1,11 @@
-import { mock, tap, toString } from '@noeldemartin/utils';
+import { FakeLocalStorage } from '@noeldemartin/testing';
 import { beforeEach, vi } from 'vitest';
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-tap(globalThis, (global: any) => {
-    const localStorage: Record<string, string> = {};
-
-    global.jest = vi;
-    global.navigator = { languages: ['en'] };
-    global.localStorage = mock<Storage>({
-        getItem: (key) => localStorage[key] ?? null,
-        setItem(key, value) {
-            localStorage[key] = toString(value);
-        },
-    });
-});
-
 vi.mock('dompurify', async () => {
     return { default: { sanitize: (html: string) => html } };
 });
 
 beforeEach(() => {
-    vi.stubGlobal('document', {
-        querySelector: () => null,
-        getElementById: () => null,
-    });
+    FakeLocalStorage.reset();
+    FakeLocalStorage.patchGlobal();
 });

package/src/ui/UI.state.ts

@@ -1,10 +1,10 @@
 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> {
+export interface UIModal<T = unknown> {
     id: string;
     properties: Record<string, unknown>;
     component: Component;
@@ -12,11 +12,16 @@ export interface Modal<T = unknown> {
     afterClose: Promise<T | undefined>;
 }
 
+export interface UIModalContext {
+    modal: UIModal;
+    childIndex?: number;
+}
+
 export interface ModalComponent<
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Properties extends Record<string, unknown> = Record<string, unknown>,
+    Properties extends object = object,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Result = unknown
+    Result = unknown,
 > {}
 
 export interface Snackbar {
@@ -28,7 +33,7 @@ export interface Snackbar {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as Modal[],
+        modals: [] as UIModal[],
         snackbars: [] as Snackbar[],
         layout: getCurrentLayout(),
     },

package/src/ui/UI.ts

@@ -1,18 +1,21 @@
-import { after, facade, fail, required, 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 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 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 { SnackbarAction, SnackbarColor } from '@aerogel/core/components/headless/snackbars';
 
 import Service from './UI.state';
 import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
-import type { Modal, ModalComponent, Snackbar } from './UI.state';
+import type { ModalComponent, Snackbar, UIModal } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -20,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',
@@ -36,13 +38,11 @@ export const UIComponents = {
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
-export type ConfirmCheckboxes = Record<string, { label: string; default?: boolean; required?: boolean }>;
-
 export type ConfirmOptions = AcceptRefs<{
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     actions?: Record<string, () => unknown>;
     required?: boolean;
 }>;
@@ -53,7 +53,8 @@ export type LoadingOptions = AcceptRefs<{
     progress?: number;
 }>;
 
-export interface ConfirmOptionsWithCheckboxes<T extends ConfirmCheckboxes = ConfirmCheckboxes> extends ConfirmOptions {
+export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
+    extends ConfirmOptions {
     checkboxes?: T;
 }
 
@@ -62,9 +63,9 @@ export type PromptOptions = AcceptRefs<{
     defaultValue?: string;
     placeholder?: string;
     acceptText?: string;
-    acceptColor?: Color;
+    acceptVariant?: ButtonVariant;
     cancelText?: string;
-    cancelColor?: Color;
+    cancelVariant?: ButtonVariant;
     trim?: boolean;
 }>;
 
@@ -86,7 +87,7 @@ export class UIService extends Service {
     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 };
             }
@@ -97,14 +98,17 @@ 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 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
+    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(
@@ -112,7 +116,7 @@ export class UIService extends Service {
         messageOrOptions?: string | ConfirmOptions | ConfirmOptionsWithCheckboxes,
         options?: ConfirmOptions | ConfirmOptionsWithCheckboxes,
     ): Promise<boolean | [boolean, Record<string, boolean>]> {
-        const getProperties = (): AGConfirmModalProps => {
+        const getProperties = (): AcceptRefs<ConfirmModalProps> => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     ...(messageOrOptions ?? {}),
@@ -128,13 +132,20 @@ export class UIService extends Service {
                 required: !!options?.required,
             };
         };
+
+        type ConfirmModalComponent = ModalComponent<
+            AcceptRefs<ConfirmModalProps>,
+            boolean | [boolean, Record<string, boolean>]
+        >;
+
         const properties = getProperties();
-        const modal = await this.openModal<
-            ModalComponent<AGConfirmModalProps, boolean | [boolean, Record<string, boolean>]>
-        >(this.requireComponent(UIComponents.ConfirmModal), properties);
+        const modal = await this.openModal<ConfirmModalComponent>(
+            this.requireComponent(UIComponents.ConfirmModal),
+            properties,
+        );
         const result = await modal.beforeClose;
 
-        const confirmed = typeof result === 'object' ? result[0] : result ?? false;
+        const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
         const checkboxes =
             typeof result === 'object'
                 ? result[1]
@@ -151,7 +162,7 @@ export class UIService extends Service {
                 continue;
             }
 
-            if (confirmed && App.development) {
+            if (confirmed && isDevelopment()) {
                 // eslint-disable-next-line no-console
                 console.warn(`Confirmed confirm modal was suppressed because required '${name}' checkbox was missing`);
             }
@@ -170,22 +181,22 @@ export class UIService extends Service {
         options?: PromptOptions,
     ): Promise<string | null> {
         const trim = options?.trim ?? true;
-        const getProperties = (): AGPromptModalProps => {
+        const getProperties = (): PromptModalProps => {
             if (typeof messageOrOptions !== 'string') {
                 return {
                     message: messageOrTitle,
                     ...(messageOrOptions ?? {}),
-                } as AGPromptModalProps;
+                } as PromptModalProps;
             }
 
             return {
                 title: messageOrTitle,
                 message: messageOrOptions,
                 ...(options ?? {}),
-            } as AGPromptModalProps;
+            } 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(),
         );
@@ -203,7 +214,7 @@ export class UIService extends Service {
         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 } => {
+        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
             if (typeof operationOrMessageOrOptions === 'string') {
                 return {
                     props: { message: operationOrMessageOrOptions },
@@ -225,7 +236,9 @@ export class UIService extends Service {
         const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), props);
 
         try {
-            const [result] = await Promise.all([operationPromise, after({ seconds: 1 })]);
+            const result = await operationPromise;
+
+            await after({ ms: 500 });
 
             return result;
         } finally {
@@ -259,10 +272,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),
@@ -302,7 +315,7 @@ export class UIService extends Service {
         }
     }
 
-    protected async boot(): Promise<void> {
+    protected override async boot(): Promise<void> {
         this.watchModalEvents();
         this.watchMountedEvent();
         this.watchViewportBreakpoints();
@@ -373,13 +386,13 @@ export class UIService extends Service {
 
 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,16 +1,16 @@
 import type { Component } from 'vue';
 
-import { bootServices } from '@/services';
-import { definePlugin } from '@/plugins';
+import AGSnackbar from '@aerogel/core/components/snackbars/AGSnackbar.vue';
+import AGStartupCrash from '@aerogel/core/components/lib/AGStartupCrash.vue';
+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 { 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 };
@@ -24,11 +24,11 @@ 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.AlertModal]: AlertModal,
+            [UIComponents.ConfirmModal]: ConfirmModal,
+            [UIComponents.ErrorReportModal]: ErrorReportModal,
+            [UIComponents.LoadingModal]: LoadingModal,
+            [UIComponents.PromptModal]: PromptModal,
             [UIComponents.Snackbar]: AGSnackbar,
             [UIComponents.StartupCrash]: AGStartupCrash,
         };
@@ -42,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/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,12 @@
 import { objectWithout } from '@noeldemartin/utils';
 import { computed, useAttrs } from 'vue';
+import type { ClassValue } from 'clsx';
 import type { ComputedRef } from 'vue';
 
-export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<unknown>] {
+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>];
 }