@aerogel/core 0.0.0-next.b656a964404fbde17d9cce7668722596098e47fd → 0.0.0-next.b9379d15fd4f40346d655134b49c9015ead9c536

package/src/services/Events.test.ts

@@ -10,12 +10,12 @@ describe('Events', () => {
         // Arrange
         let counter = 0;
 
-        Events.on('trigger', () => counter++);
+        Events.on('application-mounted', () => counter++);
 
         // Act
-        await Events.emit('trigger');
-        await Events.emit('trigger');
-        await Events.emit('trigger');
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
+        await Events.emit('application-mounted');
 
         // Assert
         expect(counter).toEqual(3);
@@ -25,12 +25,12 @@ describe('Events', () => {
         // Arrange
         const storage: string[] = [];
 
-        Events.on('trigger', () => storage.push('second'));
-        Events.on('trigger', { priority: EventListenerPriorities.Low }, () => storage.push('third'));
-        Events.on('trigger', { priority: EventListenerPriorities.High }, () => storage.push('first'));
+        Events.on('application-mounted', () => storage.push('second'));
+        Events.on('application-mounted', { priority: EventListenerPriorities.Low }, () => storage.push('third'));
+        Events.on('application-mounted', { priority: EventListenerPriorities.High }, () => storage.push('first'));
 
         // Act
-        await Events.emit('trigger');
+        await Events.emit('application-mounted');
 
         // Assert
         expect(storage).toEqual(['first', 'second', 'third']);

package/src/services/Events.ts

@@ -10,7 +10,6 @@ export type AerogelGlobalEvents = Partial<{ [Event in EventWithoutPayload]: () =
     Partial<{ [Event in EventWithPayload]: EventListener<EventsPayload[Event]> }>;
 
 export type EventListener<T = unknown> = (payload: T) => unknown;
-export type UnknownEvent<T> = T extends keyof EventsPayload ? never : T;
 
 export type EventWithoutPayload = {
     [K in keyof EventsPayload]: EventsPayload[K] extends void ? K : never;
@@ -34,12 +33,12 @@ export class EventsService extends Service {
 
     protected override async boot(): Promise<void> {
         Object.entries(globalThis.__aerogelEvents__ ?? {}).forEach(([event, listener]) =>
-            this.on(event as string, listener as EventListener));
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            this.on(event as any, listener as EventListener));
     }
 
     public emit<Event extends EventWithoutPayload>(event: Event): Promise<void>;
     public emit<Event extends EventWithPayload>(event: Event, payload: EventsPayload[Event]): Promise<void>;
-    public emit<Event extends string>(event: UnknownEvent<Event>, payload?: unknown): Promise<void>;
     public async emit(event: string, payload?: unknown): Promise<void> {
         const listeners = this.listeners[event] ?? { priorities: [], handlers: {} };
 
@@ -55,9 +54,6 @@ export class EventsService extends Service {
     public on<Event extends EventWithPayload>(event: Event, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public on<Event extends EventWithPayload>(event: Event, priority: EventListenerPriority, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public on<Event extends EventWithPayload>(event: Event, options: Partial<EventListenerOptions>, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
-    public on<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): () => void;
-    public on<Event extends string>(event: UnknownEvent<Event>, priority: EventListenerPriority, listener: EventListener): () => void; // prettier-ignore
-    public on<Event extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
     /* eslint-enable max-len */
 
     public on(
@@ -83,8 +79,6 @@ export class EventsService extends Service {
     public once<Event extends EventWithoutPayload>(event: Event, options: Partial<EventListenerOptions>, listener: () => unknown): () => void; // prettier-ignore
     public once<Event extends EventWithPayload>(event: Event, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
     public once<Event extends EventWithPayload>(event: Event, options: Partial<EventListenerOptions>, listener: EventListener<EventsPayload[Event]>): () => void | void; // prettier-ignore
-    public once<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): () => void;
-    public once<Event extends string>(event: UnknownEvent<Event>, options: Partial<EventListenerOptions>, listener: EventListener): () => void; // prettier-ignore
     /* eslint-enable max-len */
 
     public once(

package/src/services/index.ts

@@ -1,4 +1,4 @@
-import type { App as VueApp } from 'vue';
+import type { App as AppInstance } from 'vue';
 
 import { definePlugin } from '@aerogel/core/plugins';
 import { isDevelopment, isTesting } from '@noeldemartin/utils';
@@ -30,7 +30,7 @@ export type DefaultServices = typeof defaultServices;
 
 export interface Services extends DefaultServices {}
 
-export async function bootServices(app: VueApp, services: Record<string, Service>): Promise<void> {
+export async function bootServices(app: AppInstance, services: Record<string, Service>): Promise<void> {
     await Promise.all(
         Object.entries(services).map(async ([name, service]) => {
             await service
@@ -54,7 +54,7 @@ export default definePlugin({
         };
 
         app.use(getPiniaStore());
-        App.settings.push(...(options.settings ?? []));
+        options.settings?.forEach((setting) => App.addSetting(setting));
 
         await bootServices(app, services);
     },

package/src/ui/UI.state.ts

@@ -8,22 +8,11 @@ export interface UIModal<T = unknown> {
     id: string;
     properties: Record<string, unknown>;
     component: Component;
+    closing: boolean;
     beforeClose: Promise<T | undefined>;
     afterClose: Promise<T | undefined>;
 }
 
-export interface UIModalContext {
-    modal: UIModal;
-    childIndex?: number;
-}
-
-export interface ModalComponent<
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Properties extends object = object,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    Result = unknown,
-> {}
-
 export interface UIToast {
     id: string;
     component: Component;
@@ -38,7 +27,8 @@ export default defineServiceState({
         layout: getCurrentLayout(),
     },
     computed: {
-        mobile: ({ layout }) => layout === Layouts.Mobile,
         desktop: ({ layout }) => layout === Layouts.Desktop,
+        mobile: ({ layout }) => layout === Layouts.Mobile,
+        openModals: ({ modals }) => modals.filter(({ closing }) => !closing),
     },
 });

package/src/ui/UI.ts

@@ -1,42 +1,55 @@
 import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
 import { markRaw, nextTick } from 'vue';
+import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 import type { Component } from 'vue';
-import type { ObjectValues } from '@noeldemartin/utils';
+import type { ClosureArgs } from '@noeldemartin/utils';
 
 import App from '@aerogel/core/services/App';
 import Events from '@aerogel/core/services/Events';
+import type {
+    ConfirmModalCheckboxes,
+    ConfirmModalExpose,
+    ConfirmModalProps,
+} from '@aerogel/core/components/contracts/ConfirmModal';
+import type {
+    ErrorReportModalExpose,
+    ErrorReportModalProps,
+} from '@aerogel/core/components/contracts/ErrorReportModal';
 import type { AcceptRefs } from '@aerogel/core/utils';
-import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+import type { AlertModalExpose, 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 type { LoadingModalExpose, LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+import type { PromptModalExpose, PromptModalProps } from '@aerogel/core/components/contracts/PromptModal';
+import type { ToastAction, ToastExpose, ToastProps, ToastVariant } from '@aerogel/core/components/contracts/Toast';
 
 import Service from './UI.state';
 import { MOBILE_BREAKPOINT, getCurrentLayout } from './utils';
-import type { ModalComponent, UIModal, UIToast } from './UI.state';
+import type { UIModal, UIToast } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
-    closed(result: T | undefined): void;
+    hasClosed(result: T | undefined): void;
 }
 
-type ModalProperties<TComponent> = TComponent extends ModalComponent<infer TProperties, unknown> ? TProperties : never;
-type ModalResult<TComponent> =
-    TComponent extends ModalComponent<Record<string, unknown>, infer TResult> ? TResult : never;
-
-export const UIComponents = {
-    AlertModal: 'alert-modal',
-    ConfirmModal: 'confirm-modal',
-    ErrorReportModal: 'error-report-modal',
-    LoadingModal: 'loading-modal',
-    PromptModal: 'prompt-modal',
-    Toast: 'toast',
-    StartupCrash: 'startup-crash',
-} as const;
+export type ModalResult<T> = ModalExposeResult<ComponentExposed<T>>;
+export type ModalExposeResult<T> = T extends { close(result?: infer Result): Promise<void> } ? Result : unknown;
+export type UIComponent<Props = {}, Exposed = {}> = { new (...args: ClosureArgs): Exposed & { $props: Props } };
+
+export interface UIComponents {
+    'alert-modal': UIComponent<AlertModalProps, AlertModalExpose>;
+    'confirm-modal': UIComponent<ConfirmModalProps, ConfirmModalExpose>;
+    'error-report-modal': UIComponent<ErrorReportModalProps, ErrorReportModalExpose>;
+    'loading-modal': UIComponent<LoadingModalProps, LoadingModalExpose>;
+    'prompt-modal': UIComponent<PromptModalProps, PromptModalExpose>;
+    'router-link': UIComponent;
+    'startup-crash': UIComponent;
+    toast: UIComponent<ToastProps, ToastExpose>;
+}
 
-export type UIComponent = ObjectValues<typeof UIComponents>;
+export interface UIModalContext {
+    modal: UIModal;
+    childIndex?: number;
+}
 
 export type ConfirmOptions = AcceptRefs<{
     acceptText?: string;
@@ -78,10 +91,18 @@ export interface ToastOptions {
 export class UIService extends Service {
 
     private modalCallbacks: Record<string, Partial<ModalCallbacks>> = {};
-    private components: Partial<Record<UIComponent, Component>> = {};
+    private components: Partial<UIComponents> = {};
+
+    public registerComponent<T extends keyof UIComponents>(name: T, component: UIComponents[T]): void {
+        this.components[name] = component;
+    }
 
-    public requireComponent(name: UIComponent): Component {
-        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
+    public resolveComponent<T extends keyof UIComponents>(name: T): UIComponents[T] | null {
+        return this.components[name] ?? null;
+    }
+
+    public requireComponent<T extends keyof UIComponents>(name: T): UIComponents[T] {
+        return this.resolveComponent(name) ?? fail(`UI Component '${name}' is not defined!`);
     }
 
     public alert(message: string): void;
@@ -98,10 +119,7 @@ export class UIService extends Service {
             };
         };
 
-        this.openModal<ModalComponent<AlertModalProps>>(
-            this.requireComponent(UIComponents.AlertModal),
-            getProperties(),
-        );
+        this.modal(this.requireComponent('alert-modal'), getProperties());
     }
 
     /* eslint-disable max-len */
@@ -133,18 +151,8 @@ export class UIService extends Service {
             };
         };
 
-        type ConfirmModalComponent = ModalComponent<
-            AcceptRefs<ConfirmModalProps>,
-            boolean | [boolean, Record<string, boolean>]
-        >;
-
         const properties = getProperties();
-        const modal = await this.openModal<ConfirmModalComponent>(
-            this.requireComponent(UIComponents.ConfirmModal),
-            properties,
-        );
-        const result = await modal.beforeClose;
-
+        const result = await this.modalForm(this.requireComponent('confirm-modal'), properties);
         const confirmed = typeof result === 'object' ? result[0] : (result ?? false);
         const checkboxes =
             typeof result === 'object'
@@ -196,11 +204,7 @@ export class UIService extends Service {
             } as PromptModalProps;
         };
 
-        const modal = await this.openModal<ModalComponent<PromptModalProps, string | null>>(
-            this.requireComponent(UIComponents.PromptModal),
-            getProperties(),
-        );
-        const rawResult = await modal.beforeClose;
+        const rawResult = await this.modalForm(this.requireComponent('prompt-modal'), getProperties());
         const result = trim && typeof rawResult === 'string' ? rawResult?.trim() : rawResult;
 
         return result ?? null;
@@ -233,7 +237,7 @@ export class UIService extends Service {
         };
 
         const { operationPromise, props } = processArgs();
-        const modal = await this.openModal(this.requireComponent(UIComponents.LoadingModal), props);
+        const modal = await this.modal(this.requireComponent('loading-modal'), props);
 
         try {
             const result = await operationPromise;
@@ -251,30 +255,29 @@ export class UIService extends Service {
         const toast: UIToast = {
             id: uuid(),
             properties: { message, ...otherOptions },
-            component: markRaw(component ?? this.requireComponent(UIComponents.Toast)),
+            component: markRaw(component ?? this.requireComponent('toast')),
         };
 
         this.setState('toasts', this.toasts.concat(toast));
     }
 
-    public registerComponent(name: UIComponent, component: Component): void {
-        this.components[name] = component;
-    }
+    public modal<T extends Component>(
+        ...args: {} extends ComponentProps<T>
+            ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
+            : [component: T, props: AcceptRefs<ComponentProps<T>>]
+    ): Promise<UIModal<ModalResult<T>>>;
 
-    public async openModal<TModalComponent extends ModalComponent>(
-        component: TModalComponent,
-        properties?: ModalProperties<TModalComponent>,
-    ): Promise<UIModal<ModalResult<TModalComponent>>> {
+    public async modal<T extends Component>(component: T, props?: ComponentProps<T>): Promise<UIModal<ModalResult<T>>> {
         const id = uuid();
-        const callbacks: Partial<ModalCallbacks<ModalResult<TModalComponent>>> = {};
-        const modal: UIModal<ModalResult<TModalComponent>> = {
+        const callbacks: Partial<ModalCallbacks<ModalResult<T>>> = {};
+        const modal: UIModal<ModalResult<T>> = {
             id,
-            properties: properties ?? {},
+            closing: false,
+            properties: props ?? {},
             component: markRaw(component),
             beforeClose: new Promise((resolve) => (callbacks.willClose = resolve)),
-            afterClose: new Promise((resolve) => (callbacks.closed = resolve)),
+            afterClose: new Promise((resolve) => (callbacks.hasClosed = resolve)),
         };
-        const activeModal = this.modals.at(-1);
         const modals = this.modals.concat(modal);
 
         this.modalCallbacks[modal.id] = callbacks;
@@ -282,15 +285,26 @@ export class UIService extends Service {
         this.setState({ modals });
 
         await nextTick();
-        await (activeModal && Events.emit('hide-modal', { id: activeModal.id }));
-        await Promise.all([
-            activeModal || Events.emit('show-overlays-backdrop'),
-            Events.emit('show-modal', { id: modal.id }),
-        ]);
 
         return modal;
     }
 
+    public modalForm<T extends Component>(
+        ...args: {} extends ComponentProps<T>
+            ? [component: T, props?: AcceptRefs<ComponentProps<T>>]
+            : [component: T, props: AcceptRefs<ComponentProps<T>>]
+    ): Promise<ModalResult<T> | undefined>;
+
+    public async modalForm<T extends Component>(
+        component: T,
+        props?: ComponentProps<T>,
+    ): Promise<ModalResult<T> | undefined> {
+        const modal = await this.modal<T>(component, props as ComponentProps<T>);
+        const result = await modal.beforeClose;
+
+        return result;
+    }
+
     public async closeModal(id: string, result?: unknown): Promise<void> {
         if (!App.isMounted()) {
             await this.removeModal(id, result);
@@ -319,25 +333,23 @@ export class UIService extends Service {
             this.modals.filter((m) => m.id !== id),
         );
 
-        this.modalCallbacks[id]?.closed?.(result);
+        this.modalCallbacks[id]?.hasClosed?.(result);
 
         delete this.modalCallbacks[id];
-
-        const activeModal = this.modals.at(-1);
-
-        await (activeModal && Events.emit('show-modal', { id: activeModal.id }));
     }
 
     private watchModalEvents(): void {
-        Events.on('modal-will-close', ({ modal, result }) => {
-            this.modalCallbacks[modal.id]?.willClose?.(result);
+        Events.on('modal-will-close', ({ modal: { id }, result }) => {
+            const modal = this.modals.find((_modal) => id === _modal.id);
 
-            if (this.modals.length === 1) {
-                Events.emit('hide-overlays-backdrop');
+            if (modal) {
+                modal.closing = true;
             }
+
+            this.modalCallbacks[id]?.willClose?.(result);
         });
 
-        Events.on('modal-closed', async ({ modal: { id }, result }) => {
+        Events.on('modal-has-closed', async ({ modal: { id }, result }) => {
             await this.removeModal(id, result);
         });
     }
@@ -381,11 +393,7 @@ export default facade(UIService);
 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: UIModal; result?: unknown };
         'modal-will-close': { modal: UIModal; result?: unknown };
-        'show-modal': { id: string };
-        'show-overlays-backdrop': void;
+        'modal-has-closed': { modal: UIModal; result?: unknown };
     }
 }

package/src/ui/index.ts

@@ -1,5 +1,3 @@
-import type { Component } from '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';
@@ -10,8 +8,9 @@ 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 type { UIComponent } from './UI';
+import UI from './UI';
+import type { UIComponents } from './UI';
+import type { Component } from 'vue';
 
 const services = { $ui: UI };
 
@@ -23,20 +22,20 @@ export type UIServices = typeof services;
 
 export default definePlugin({
     async install(app, options) {
-        const defaultComponents = {
-            [UIComponents.AlertModal]: AlertModal,
-            [UIComponents.ConfirmModal]: ConfirmModal,
-            [UIComponents.ErrorReportModal]: ErrorReportModal,
-            [UIComponents.LoadingModal]: LoadingModal,
-            [UIComponents.PromptModal]: PromptModal,
-            [UIComponents.Toast]: Toast,
-            [UIComponents.StartupCrash]: StartupCrash,
+        const components: Partial<Record<keyof UIComponents, Component>> = {
+            'alert-modal': AlertModal,
+            'confirm-modal': ConfirmModal,
+            'error-report-modal': ErrorReportModal,
+            'loading-modal': LoadingModal,
+            'prompt-modal': PromptModal,
+            'startup-crash': StartupCrash,
+            'toast': Toast,
+            ...options.components,
         };
 
-        Object.entries({
-            ...defaultComponents,
-            ...options.components,
-        }).forEach(([name, component]) => UI.registerComponent(name as UIComponent, component));
+        for (const [name, component] of Object.entries(components)) {
+            UI.registerComponent(name as keyof UIComponents, component as UIComponents[keyof UIComponents]);
+        }
 
         await bootServices(app, services);
     },
@@ -44,7 +43,7 @@ export default definePlugin({
 
 declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
-        components?: Partial<Record<UIComponent, Component>>;
+        components?: Partial<Partial<UIComponents>>;
     }
 }
 

package/src/utils/classes.ts

@@ -1,14 +1,13 @@
 import clsx from 'clsx';
-import { computed, unref } from 'vue';
+import { 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 { PropType } 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 }
@@ -26,22 +25,15 @@ 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>>,
+export function variantClasses<T>(
+    value: { 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);
+): string {
+    const { baseClasses: valueBaseClasses, ...values } = value;
+    const { baseClasses: configBaseClasses, ...configs } = config;
+    const variants = cva(configBaseClasses, configs as CVAConfig<T>);
 
-            return extractedValues;
-        }, {} as CVAProps<T>);
-
-        return classes(variants(values), unref(valueBaseClasses));
-    });
+    return classes(variants(values as CVAProps<T>), unref(valueBaseClasses));
 }
 
 export function classes(...inputs: ClassValue[]): string {

package/src/utils/composition/events.ts

@@ -6,7 +6,6 @@ import type {
     EventWithPayload,
     EventWithoutPayload,
     EventsPayload,
-    UnknownEvent,
 } from '@aerogel/core/services/Events';
 
 export function useEvent<Event extends EventWithoutPayload>(event: Event, listener: () => unknown): void;
@@ -14,11 +13,10 @@ export function useEvent<Event extends EventWithPayload>(
     event: Event,
     listener: EventListener<EventsPayload[Event]>
 ): void;
-export function useEvent<Payload>(event: string, listener: (payload: Payload) => unknown): void;
-export function useEvent<Event extends string>(event: UnknownEvent<Event>, listener: EventListener): void;
 
 export function useEvent(event: string, listener: EventListener): void {
-    const unsubscribe = Events.on(event, listener);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const unsubscribe = Events.on(event as any, listener);
 
     onUnmounted(() => unsubscribe());
 }

package/src/utils/composition/forms.ts

@@ -2,9 +2,11 @@ import { objectWithout } from '@noeldemartin/utils';
 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';
 
+import FormController from '@aerogel/core/forms/FormController';
+import type { FormData, FormFieldDefinitions } from '@aerogel/core/forms/FormController';
+
 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());
@@ -12,6 +14,10 @@ export function onFormFocus(input: { name: Nullable<string> }, listener: () => u
     onUnmounted(() => stop?.());
 }
 
+export function useForm<const T extends FormFieldDefinitions>(fields: T): FormController<T> & FormData<T> {
+    return new FormController(fields) as FormController<T> & FormData<T>;
+}
+
 export function useInputAttrs(): [ComputedRef<{}>, ComputedRef<ClassValue>] {
     const attrs = useAttrs();
     const classes = computed(() => attrs.class);

package/src/utils/index.ts

@@ -5,4 +5,5 @@ export * from './composition/hooks';
 export * from './composition/persistent';
 export * from './composition/state';
 export * from './markdown';
+export * from './types';
 export * from './vue';

package/src/utils/markdown.ts

@@ -2,10 +2,18 @@ import DOMPurify from 'dompurify';
 import { stringMatchAll, tap } from '@noeldemartin/utils';
 import { Renderer, marked } from 'marked';
 
+let router: MarkdownRouter | null = null;
+
 function makeRenderer(): Renderer {
     return tap(new Renderer(), (renderer) => {
         renderer.link = function(link) {
-            return Renderer.prototype.link.apply(this, [link]).replace('<a', '<a target="_blank"');
+            const defaultLink = Renderer.prototype.link.apply(this, [link]);
+
+            if (!link.href.startsWith('#')) {
+                return defaultLink.replace('<a', '<a target="_blank"');
+            }
+
+            return defaultLink;
         };
     });
 }
@@ -20,11 +28,37 @@ function renderActionLinks(html: string): string {
     return html;
 }
 
+function renderRouteLinks(html: string): string {
+    const matches = stringMatchAll<3>(html, /<a[^>]*href="#route:([^"]+)"[^>]*>([^<]+)<\/a>/g);
+
+    for (const [link, route, text] of matches) {
+        const url = router?.resolve(route) ?? route;
+
+        html = html.replace(link, `<a data-markdown-route="${route}" href="${url}">${text}</a>`);
+    }
+
+    return html;
+}
+
+export interface MarkdownRouter {
+    resolve(route: string): string;
+    visit(route: string): Promise<void>;
+}
+
+export function getMarkdownRouter(): MarkdownRouter | null {
+    return router;
+}
+
+export function setMarkdownRouter(markdownRouter: MarkdownRouter): void {
+    router = markdownRouter;
+}
+
 export function renderMarkdown(markdown: string): string {
     let html = marked(markdown, { renderer: makeRenderer(), async: false });
 
     html = safeHtml(html);
     html = renderActionLinks(html);
+    html = renderRouteLinks(html);
 
     return html;
 }

package/src/utils/types.ts

@@ -0,0 +1,3 @@
+import type { Nullable } from '@noeldemartin/utils';
+
+export type Falsifiable<T> = Nullable<T> | false;

package/src/utils/vue.ts

@@ -12,7 +12,12 @@ function renderVNodeAttrs(node: VNode): string {
     }, '');
 }
 
-export function defineDirective(directive: Directive): Directive {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function defineDirective<TValue = any, TModifiers extends string = string>(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    directive: Directive<any, TValue, TModifiers>,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): Directive<any, TValue, TModifiers> {
     return directive;
 }