@aerogel/core 0.0.0-next.b58141fee5d2fe7d25debdbca6b1d2bf1c13e48e → 0.0.0-next.bb9dcdbb118a15d146d3a1c4cf861ca2f4f1eebd

package/src/components/modals/AGPromptModal.vue

@@ -0,0 +1,34 @@
+<template>
+    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false" :title="title">
+        <AGMarkdown :text="message" />
+
+        <AGForm :form="form" @submit="close(form.draft)">
+            <AGInput name="draft" :placeholder="placeholder" :label="label" />
+
+            <div class="mt-2 flex flex-row-reverse gap-2">
+                <AGButton :color="acceptColor" submit>
+                    {{ renderedAcceptText }}
+                </AGButton>
+                <AGButton :color="cancelColor" @click="close()">
+                    {{ renderedCancelText }}
+                </AGButton>
+            </div>
+        </AGForm>
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+import AGModal from './AGModal.vue';
+import { usePromptModal, usePromptModalProps } from './AGPromptModal';
+import type { IAGModalDefaultSlotProps } from './AGModal';
+
+import AGButton from '../forms/AGButton.vue';
+import AGForm from '../forms/AGForm.vue';
+import AGInput from '../forms/AGInput.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
+import { requiredStringInput, useForm } from '../../forms';
+
+const props = defineProps(usePromptModalProps());
+const form = useForm({ draft: requiredStringInput(props.defaultValue ?? '') });
+const { renderedAcceptText, renderedCancelText } = usePromptModal(props);
+</script>

package/src/components/modals/index.ts

@@ -1,23 +1,17 @@
-import AGAlertModal from './AGAlertModal.vue';
-import AGConfirmModal from './AGConfirmModal.vue';
-import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
-import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
-import AGLoadingModal from './AGLoadingModal.vue';
-import AGModal from './AGModal.vue';
-import AGModalTitle from './AGModalTitle.vue';
-import AGModalContext from './AGModalContext.vue';
-
+export * from './AGAlertModal';
+export * from './AGConfirmModal';
 export * from './AGErrorReportModal';
+export * from './AGLoadingModal';
 export * from './AGModal';
 export * from './AGModalContext';
+export * from './AGPromptModal';
 
-export {
-    AGAlertModal,
-    AGConfirmModal,
-    AGErrorReportModalButtons,
-    AGErrorReportModalTitle,
-    AGLoadingModal,
-    AGModal,
-    AGModalTitle,
-    AGModalContext,
-};
+export { default as AGAlertModal } from './AGAlertModal.vue';
+export { default as AGConfirmModal } from './AGConfirmModal.vue';
+export { default as AGErrorReportModalButtons } from './AGErrorReportModalButtons.vue';
+export { default as AGErrorReportModalTitle } from './AGErrorReportModalTitle.vue';
+export { default as AGLoadingModal } from './AGLoadingModal.vue';
+export { default as AGModal } from './AGModal.vue';
+export { default as AGModalContext } from './AGModalContext.vue';
+export { default as AGModalTitle } from './AGModalTitle.vue';
+export { default as AGPromptModal } from './AGPromptModal.vue';

package/src/components/snackbars/AGSnackbar.vue

@@ -15,16 +15,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import UI from '@/ui/UI';
 import { Colors } from '@/components/constants';
-import { useSnackbarProps } from '@/components/headless';
-import type { SnackbarAction } from '@/components/headless';
+import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
 
 import AGButton from '../forms/AGButton.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
 const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
 const styleClasses = computed(() => {
     switch (props.color) {
         case Colors.Danger:
@@ -34,9 +33,4 @@ const styleClasses = computed(() => {
             return 'bg-gray-900 text-white';
     }
 });
-
-function activate(action: SnackbarAction): void {
-    action.handler?.();
-    action.dismiss && UI.hideSnackbar(props.id);
-}
 </script>

package/src/components/utils.ts

@@ -0,0 +1,10 @@
+export function extractComponentProps<T extends Record<string, unknown>>(
+    values: Record<string, unknown>,
+    definitions: Record<string, unknown>,
+): T {
+    return Object.keys(definitions).reduce((extracted, prop) => {
+        extracted[prop] = values[prop];
+
+        return extracted;
+    }, {} as Record<string, unknown>) as T;
+}

package/src/directives/index.ts

@@ -3,11 +3,15 @@ import type { Directive } from 'vue';
 import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
+import measure from './measure';
 
 const builtInDirectives: Record<string, Directive> = {
     'initial-focus': initialFocus,
+    'measure': measure,
 };
 
+export * from './measure';
+
 export default definePlugin({
     install(app, options) {
         const directives = {
@@ -22,7 +26,7 @@ export default definePlugin({
 });
 
 declare module '@/bootstrap/options' {
-    interface AerogelOptions {
+    export interface AerogelOptions {
         directives?: Record<string, Directive>;
     }
 }

package/src/directives/measure.ts

@@ -0,0 +1,40 @@
+import { defineDirective } from '@/utils/vue';
+import { tap } from '@noeldemartin/utils';
+
+const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
+
+export interface ElementSize {
+    width: number;
+    height: number;
+}
+
+export type MeasureDirectiveListener = (size: ElementSize) => unknown;
+
+export default defineDirective({
+    mounted(element: HTMLElement, { value }) {
+        // TODO replace with argument when typed properly
+        const modifiers = { css: true, watch: true };
+
+        const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
+        const update = () => {
+            const sizes = element.getBoundingClientRect();
+
+            if (modifiers.css) {
+                element.style.setProperty('--width', `${sizes.width}px`);
+                element.style.setProperty('--height', `${sizes.height}px`);
+            }
+
+            listener?.({ width: sizes.width, height: sizes.height });
+        };
+
+        if (modifiers.watch) {
+            resizeObservers.set(element, tap(new ResizeObserver(update)).observe(element));
+        }
+
+        update();
+    },
+    unmounted(element) {
+        resizeObservers.get(element)?.unobserve(element);
+        resizeObservers.delete(element);
+    },
+});

package/src/errors/Errors.ts

@@ -7,7 +7,10 @@ import { translateWithDefault } from '@/lang/utils';
 
 import Service from './Errors.state';
 import { Colors } from '@/components/constants';
+import { Events } from '@/services';
+import type { AGErrorReportModalProps } from '@/components/modals/AGErrorReportModal';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
+import type { ModalComponent } from '@/ui/UI.state';
 
 export class ErrorsService extends Service {
 
@@ -23,7 +26,7 @@ export class ErrorsService extends Service {
     }
 
     public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
-        const reports = Array.isArray(error) ? error : [await this.createErrorReport(error)];
+        const reports = Array.isArray(error) ? (error as ErrorReport[]) : [await this.createErrorReport(error)];
 
         if (reports.length === 0) {
             UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
@@ -31,11 +34,19 @@ export class ErrorsService extends Service {
             return;
         }
 
-        UI.openModal(UI.requireComponent(UIComponents.ErrorReportModal), { reports });
+        UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
+            reports,
+        });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
-        if (App.development || App.testing) {
+        await Events.emit('error', { error, message });
+
+        if (App.testing) {
+            throw error;
+        }
+
+        if (App.development) {
             this.logError(error);
         }
 
@@ -43,7 +54,7 @@ export class ErrorsService extends Service {
             throw error;
         }
 
-        if (!App.isMounted) {
+        if (!App.isMounted()) {
             const startupError = await this.createStartupErrorReport(error);
 
             if (startupError) {
@@ -70,9 +81,10 @@ export class ErrorsService extends Service {
                         text: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
                         handler: () =>
-                            UI.openModal(UI.requireComponent(UIComponents.ErrorReportModal), {
-                                reports: [report],
-                            }),
+                            UI.openModal<ModalComponent<AGErrorReportModalProps>>(
+                                UI.requireComponent(UIComponents.ErrorReportModal),
+                                { reports: [report] },
+                            ),
                     },
                 ],
             },
@@ -105,22 +117,6 @@ export class ErrorsService extends Service {
         });
     }
 
-    public getErrorMessage(error: ErrorSource): string {
-        if (typeof error === 'string') {
-            return error;
-        }
-
-        if (error instanceof Error || error instanceof JSError) {
-            return error.message;
-        }
-
-        if (isObject(error)) {
-            return toString(error['message'] ?? error['description'] ?? 'Unknown error object');
-        }
-
-        return translateWithDefault('errors.unknown', 'Unknown Error');
-    }
-
     private logError(error: unknown): void {
         // eslint-disable-next-line no-console
         console.error(error);
@@ -180,4 +176,10 @@ export class ErrorsService extends Service {
 
 }
 
-export default facade(new ErrorsService());
+export default facade(ErrorsService);
+
+declare module '@/services/Events' {
+    export interface EventsPayload {
+        error: { error: ErrorSource; message?: string };
+    }
+}

package/src/errors/JobCancelledError.ts

@@ -0,0 +1,3 @@
+import { JSError } from '@noeldemartin/utils';
+
+export default class JobCancelledError extends JSError {}

package/src/errors/index.ts

@@ -1,4 +1,4 @@
-import { tap } from '@noeldemartin/utils';
+import type { App } from 'vue';
 
 import { bootServices } from '@/services';
 import { definePlugin } from '@/plugins';
@@ -6,33 +6,22 @@ import { definePlugin } from '@/plugins';
 import Errors from './Errors';
 import { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
+export * from './utils';
 export { Errors, ErrorSource, ErrorReport, ErrorReportLog };
 
 const services = { $errors: Errors };
 const frameworkHandler: ErrorHandler = (error) => {
-    if (!Errors.instance) {
-        // eslint-disable-next-line no-console
-        console.warn('Errors service hasn\'t been initialized properly!');
-
-        // eslint-disable-next-line no-console
-        console.error(error);
-
-        return true;
-    }
-
     Errors.report(error);
 
     return true;
 };
 
-function setUpErrorHandler(baseHandler: ErrorHandler = () => false): ErrorHandler {
-    return tap(
-        (error) => baseHandler(error) || frameworkHandler(error),
-        (errorHandler) => {
-            globalThis.onerror = (message, _, __, ___, error) => errorHandler(error ?? message);
-            globalThis.onunhandledrejection = (event) => errorHandler(event.reason);
-        },
-    );
+function setUpErrorHandler(app: App, baseHandler: ErrorHandler = () => false): void {
+    const errorHandler: ErrorHandler = (error) => baseHandler(error) || frameworkHandler(error);
+
+    app.config.errorHandler = errorHandler;
+    globalThis.onerror = (event, _, __, ___, error) => errorHandler(error ?? event);
+    globalThis.onunhandledrejection = (event) => errorHandler(event.reason);
 }
 
 export type ErrorHandler = (error: ErrorSource) => boolean;
@@ -40,16 +29,14 @@ export type ErrorsServices = typeof services;
 
 export default definePlugin({
     async install(app, options) {
-        const errorHandler = setUpErrorHandler(options.handleError);
-
-        app.config.errorHandler = errorHandler;
+        setUpErrorHandler(app, options.handleError);
 
         await bootServices(app, services);
     },
 });
 
 declare module '@/bootstrap/options' {
-    interface AerogelOptions {
+    export interface AerogelOptions {
         handleError?(error: ErrorSource): boolean;
     }
 }

package/src/errors/utils.ts

@@ -0,0 +1,35 @@
+import { JSError, isObject, toString } from '@noeldemartin/utils';
+import { translateWithDefault } from '@/lang/utils';
+import type { ErrorSource } from './Errors.state';
+
+const handlers: ErrorHandler[] = [];
+
+export type ErrorHandler = (error: ErrorSource) => string | undefined;
+
+export function registerErrorHandler(handler: ErrorHandler): void {
+    handlers.push(handler);
+}
+
+export function getErrorMessage(error: ErrorSource): string {
+    for (const handler of handlers) {
+        const result = handler(error);
+
+        if (result) {
+            return result;
+        }
+    }
+
+    if (typeof error === 'string') {
+        return error;
+    }
+
+    if (error instanceof Error || error instanceof JSError) {
+        return error.message;
+    }
+
+    if (isObject(error)) {
+        return toString(error['message'] ?? error['description'] ?? 'Unknown error object');
+    }
+
+    return translateWithDefault('errors.unknown', 'Unknown Error');
+}

package/src/forms/Form.test.ts

@@ -55,4 +55,32 @@ describe('Form', () => {
         expect(form.name).toBeNull();
     });
 
+    it('trims values', () => {
+        // Arrange
+        const form = useForm({
+            trimmed: {
+                type: FormFieldTypes.String,
+                rules: 'required',
+            },
+            untrimmed: {
+                type: FormFieldTypes.String,
+                rules: 'required',
+                trim: false,
+            },
+        });
+
+        // Act
+        form.trimmed = '   ';
+        form.untrimmed = '   ';
+
+        form.submit();
+
+        // Assert
+        expect(form.valid).toBe(false);
+        expect(form.submitted).toBe(true);
+        expect(form.trimmed).toEqual('');
+        expect(form.untrimmed).toEqual('   ');
+        expect(form.errors).toEqual({ trimmed: ['required'], untrimmed: null });
+    });
+
 });

package/src/forms/Form.ts

@@ -1,5 +1,6 @@
-import { MagicObject } from '@noeldemartin/utils';
-import { computed, reactive, readonly, ref } from 'vue';
+import { computed, nextTick, reactive, readonly, ref } from 'vue';
+import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
+import { validate } from './validation';
 import type { ObjectValues } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
@@ -7,16 +8,20 @@ export const FormFieldTypes = {
     String: 'string',
     Number: 'number',
     Boolean: 'boolean',
+    Object: 'object',
+    Date: 'date',
 } as const;
 
 export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
     type: TType;
+    trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
 }
 
 export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
+export type FormFieldValue = GetFormFieldValue<FormFieldType>;
 
 export type FormData<T> = {
     -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules>
@@ -36,17 +41,26 @@ export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.Strin
     ? number
     : TType extends typeof FormFieldTypes.Boolean
     ? boolean
+    : TType extends typeof FormFieldTypes.Object
+    ? object
+    : TType extends typeof FormFieldTypes.Date
+    ? Date
     : never;
 
+const validForms: WeakMap<Form, ComputedRef<boolean>> = new WeakMap();
+
+export type SubmitFormListener = () => unknown;
+export type FocusFormListener = (input: string) => unknown;
+
 export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinitions> extends MagicObject {
 
     public errors: DeepReadonly<UnwrapNestedRefs<FormErrors<Fields>>>;
 
     private _fields: Fields;
     private _data: FormData<Fields>;
-    private _valid: ComputedRef<boolean>;
     private _submitted: Ref<boolean>;
     private _errors: FormErrors<Fields>;
+    private _listeners: { focus?: FocusFormListener[]; submit?: SubmitFormListener[] } = {};
 
     constructor(fields: Fields) {
         super();
@@ -55,13 +69,17 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         this._submitted = ref(false);
         this._data = this.getInitialData(fields);
         this._errors = this.getInitialErrors(fields);
-        this._valid = computed(() => !Object.values(this._errors).some((error) => error !== null));
+
+        validForms.set(
+            this,
+            computed(() => !Object.values(this._errors).some((error) => error !== null)),
+        );
 
         this.errors = readonly(this._errors);
     }
 
     public get valid(): boolean {
-        return this._valid.value;
+        return !!validForms.get(this)?.value;
     }
 
     public get submitted(): boolean {
@@ -69,7 +87,13 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
     }
 
     public setFieldValue<T extends keyof Fields>(field: T, value: FormData<Fields>[T]): void {
-        this._data[field] = value;
+        const definition =
+            this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
+
+        this._data[field] =
+            definition.type === FormFieldTypes.String && (definition.trim ?? true)
+                ? (toString(value).trim() as FormData<Fields>[T])
+                : value;
 
         if (this._submitted.value) {
             this.validate();
@@ -80,6 +104,14 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
         return this._data[field] as unknown as GetFormFieldValue<Fields[T]['type']>;
     }
 
+    public getFieldRules<T extends keyof Fields>(field: T): string[] {
+        return this._fields[field]?.rules?.split('|') ?? [];
+    }
+
+    public data(): FormData<Fields> {
+        return { ...this._data };
+    }
+
     public validate(): boolean {
         const errors = Object.entries(this._fields).reduce((formErrors, [name, definition]) => {
             formErrors[name] = this.getFieldErrors(name, definition);
@@ -102,7 +134,35 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
     public submit(): boolean {
         this._submitted.value = true;
 
-        return this.validate();
+        const valid = this.validate();
+
+        valid && this._listeners['submit']?.forEach((listener) => listener());
+
+        return valid;
+    }
+
+    public on(event: 'focus', listener: FocusFormListener): () => void;
+    public on(event: 'submit', listener: SubmitFormListener): () => void;
+    public on(event: 'focus' | 'submit', listener: FocusFormListener | SubmitFormListener): () => void {
+        this._listeners[event] ??= [];
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this._listeners[event]?.push(listener as any);
+
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return () => this.off(event as any, listener);
+    }
+
+    public off(event: 'focus', listener: FocusFormListener): void;
+    public off(event: 'submit', listener: SubmitFormListener): void;
+    public off(event: 'focus' | 'submit', listener: FocusFormListener | SubmitFormListener): void {
+        arrayRemove(this._listeners[event] ?? [], listener);
+    }
+
+    public async focus(input: string): Promise<void> {
+        await nextTick();
+
+        this._listeners['focus']?.forEach((listener) => listener(input));
     }
 
     protected __get(property: string): unknown {
@@ -110,7 +170,7 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return super.__get(property);
         }
 
-        return this._data[property];
+        return this.getFieldValue(property);
     }
 
     protected __set(property: string, value: unknown): void {
@@ -120,14 +180,20 @@ export default class Form<Fields extends FormFieldDefinitions = FormFieldDefinit
             return;
         }
 
-        Object.assign(this._data, { [property]: value });
+        this.setFieldValue(property, value as FormData<Fields>[string]);
     }
 
     private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
         const errors = [];
+        const value = this._data[name];
+        const rules = definition.rules?.split('|') ?? [];
+
+        for (const rule of rules) {
+            if (rule !== 'required' && (value === null || value === undefined)) {
+                continue;
+            }
 
-        if (definition.rules?.includes('required') && !this._data[name]) {
-            errors.push('required');
+            errors.push(...validate(value, rule));
         }
 
         return errors.length > 0 ? errors : null;

package/src/forms/index.ts

@@ -1,3 +1,5 @@
-export * from './Form';
 export * from './composition';
+export * from './Form';
 export * from './utils';
+export * from './validation';
+export { default as Form } from './Form';

package/src/forms/utils.ts

@@ -1,10 +1,25 @@
 import { FormFieldTypes } from './Form';
 import type { FormFieldDefinition } from './Form';
 
-export function booleanInput(defaultValue?: boolean): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
+export function booleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Boolean> {
     return {
         default: defaultValue,
         type: FormFieldTypes.Boolean,
+        rules: options.rules,
+    };
+}
+
+export function dateInput(
+    defaultValue?: Date,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Date> {
+    return {
+        default: defaultValue,
+        type: FormFieldTypes.Date,
+        rules: options.rules,
     };
 }
 
@@ -18,6 +33,14 @@ export function requiredBooleanInput(
     };
 }
 
+export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<typeof FormFieldTypes.Date> {
+    return {
+        default: defaultValue,
+        type: FormFieldTypes.Date,
+        rules: 'required',
+    };
+}
+
 export function requiredNumberInput(
     defaultValue?: number,
 ): FormFieldDefinition<typeof FormFieldTypes.Number, 'required'> {
@@ -38,16 +61,24 @@ export function requiredStringInput(
     };
 }
 
-export function numberInput(defaultValue?: number): FormFieldDefinition<typeof FormFieldTypes.Number> {
+export function numberInput(
+    defaultValue?: number,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.Number> {
     return {
         default: defaultValue,
         type: FormFieldTypes.Number,
+        rules: options.rules,
     };
 }
 
-export function stringInput(defaultValue?: string): FormFieldDefinition<typeof FormFieldTypes.String> {
+export function stringInput(
+    defaultValue?: string,
+    options: { rules?: string } = {},
+): FormFieldDefinition<typeof FormFieldTypes.String> {
     return {
         default: defaultValue,
         type: FormFieldTypes.String,
+        rules: options.rules,
     };
 }