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

package/src/components/modals/AGErrorReportModalTitle.vue

@@ -0,0 +1,25 @@
+<template>
+    <AGMarkdown :text="text" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { numberProp, requiredObjectProp } from '@/utils/vue';
+import type { ErrorReport } from '@/errors';
+
+import AGMarkdown from '../lib/AGMarkdown.vue';
+
+const props = defineProps({
+    report: requiredObjectProp<ErrorReport>(),
+    currentReport: numberProp(),
+    totalReports: numberProp(),
+});
+const text = computed(() => {
+    if (!props.totalReports || props.totalReports <= 1) {
+        return props.report.title;
+    }
+
+    return `${props.report.title} (${props.currentReport}/${props.totalReports})`;
+});
+</script>

package/src/components/modals/AGLoadingModal.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithout } from '@noeldemartin/utils';
+
+import { numberProp, stringProp } from '@/utils';
+import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils';
+
+export const loadingModalProps = {
+    title: stringProp(),
+    message: stringProp(),
+    progress: numberProp(),
+};
+
+export type AGLoadingModalProps = AcceptRefs<
+    ObjectWithout<ExtractPropTypes<typeof loadingModalProps>, null | undefined>
+>;
+
+export function useLoadingModalProps(): typeof loadingModalProps {
+    return loadingModalProps;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function useLoadingModal(props: ExtractPropTypes<typeof loadingModalProps>) {
+    const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+    const showProgress = computed(() => typeof props.progress === 'number');
+
+    return { renderedMessage, showProgress };
+}

package/src/components/modals/AGLoadingModal.vue

@@ -5,15 +5,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-import { stringProp } from '@/utils/vue';
-import { translateWithDefault } from '@/lang/utils';
-
 import AGModal from './AGModal.vue';
+import { useLoadingModal, useLoadingModalProps } from './AGLoadingModal';
 
-import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
-const props = defineProps({ message: stringProp() });
-const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+const props = defineProps(useLoadingModalProps());
+const { renderedMessage } = useLoadingModal(props);
 </script>

package/src/components/modals/AGModal.ts

@@ -1,8 +1,9 @@
 import type { Ref } from 'vue';
 
 export interface IAGModal {
+    inline: Ref<boolean>;
     cancellable: Ref<boolean>;
-    close(): Promise<void>;
+    close(result?: unknown): Promise<void>;
 }
 
 export interface IAGModalDefaultSlotProps {

package/src/components/modals/AGModal.vue

@@ -1,13 +1,16 @@
 <template>
     <AGHeadlessModal
-        ref="$headlessModal"
+        ref="$modal"
         v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
-        :cancellable="cancellable"
+        v-bind="props"
         class="relative z-50"
     >
-        <div class="fixed inset-0 flex items-center justify-center">
-            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white">
-                <div class="flex max-h-full flex-col overflow-auto p-4">
+        <div class="fixed inset-0 flex items-center justify-center p-8">
+            <AGHeadlessModalPanel class="flex max-h-full max-w-full flex-col overflow-hidden bg-white p-4">
+                <AGHeadlessModalTitle v-if="title" class="mb-2 text-lg font-semibold">
+                    <AGMarkdown :text="title" inline />
+                </AGHeadlessModalTitle>
+                <div class="flex max-h-full flex-col overflow-auto" v-bind="$attrs">
                     <slot :close="close" />
                 </div>
             </AGHeadlessModalPanel>
@@ -16,21 +19,21 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import { booleanProp } from '@/utils';
+import { useModalExpose, useModalProps } from '@/components/headless/modals/AGHeadlessModal';
 import type { IAGHeadlessModal, IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
 
 import type { IAGModal } from './AGModal';
 
 import AGHeadlessModal from '../headless/modals/AGHeadlessModal.vue';
 import AGHeadlessModalPanel from '../headless/modals/AGHeadlessModalPanel.vue';
+import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
 
-const $headlessModal = ref<IAGHeadlessModal>();
+const props = defineProps(useModalProps());
+const $modal = ref<IAGHeadlessModal>();
 
-defineProps({ cancellable: booleanProp(true) });
-defineExpose<IAGModal>({
-    close: async () => $headlessModal.value?.close(),
-    cancellable: computed(() => !!$headlessModal.value?.cancellable),
-});
+defineOptions({ inheritAttrs: false });
+defineExpose<IAGModal>(useModalExpose($modal));
 </script>

package/src/components/modals/AGModalContext.vue

@@ -1,18 +1,28 @@
 <template>
-    <component :is="modal.component" v-bind="modal.properties" />
+    <component :is="modal.component" v-bind="modalProperties" />
 </template>
 
 <script setup lang="ts">
-import { provide, toRef } from 'vue';
+import { computed, provide, toRef, unref } from 'vue';
 
-import { requiredNumberProp, requiredObjectProp } from '@/utils/vue';
+import { numberProp, requiredObjectProp } from '@/utils/vue';
 import type { Modal } from '@/ui/UI.state';
 
 import type { IAGModalContext } from './AGModalContext';
 
 const props = defineProps({
     modal: requiredObjectProp<Modal>(),
-    childIndex: requiredNumberProp(),
+    childIndex: numberProp(0),
+});
+
+const modalProperties = computed(() => {
+    const properties = {} as typeof props.modal.properties;
+
+    for (const property in props.modal.properties) {
+        properties[property] = unref(props.modal.properties[property]);
+    }
+
+    return properties;
 });
 
 provide<IAGModalContext>('modal', {

package/src/components/modals/AGModalTitle.vue

@@ -0,0 +1,9 @@
+<template>
+    <AGHeadlessModalTitle class="mb-2 font-semibold">
+        <slot />
+    </AGHeadlessModalTitle>
+</template>
+
+<script setup lang="ts">
+import AGHeadlessModalTitle from '../headless/modals/AGHeadlessModalTitle.vue';
+</script>

package/src/components/modals/AGPromptModal.ts

@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+import type { ExtractPropTypes } from 'vue';
+import type { ObjectWithout, Pretty, SubPartial } from '@noeldemartin/utils';
+
+import { Colors } from '@/components/constants';
+import { enumProp, requiredStringProp, stringProp } from '@/utils';
+import { translateWithDefault } from '@/lang';
+import type { AcceptRefs } from '@/utils';
+
+export const promptModalProps = {
+    title: stringProp(),
+    message: requiredStringProp(),
+    label: stringProp(),
+    defaultValue: stringProp(),
+    placeholder: stringProp(),
+    acceptText: stringProp(),
+    acceptColor: enumProp(Colors, Colors.Primary),
+    cancelText: stringProp(),
+    cancelColor: enumProp(Colors, Colors.Clear),
+};
+
+export type AGPromptModalProps = Pretty<
+    AcceptRefs<
+        SubPartial<
+            ObjectWithout<ExtractPropTypes<typeof promptModalProps>, null | undefined>,
+            'acceptColor' | 'cancelColor'
+        >
+    >
+>;
+
+export function usePromptModalProps(): typeof promptModalProps {
+    return promptModalProps;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function usePromptModal(props: ExtractPropTypes<typeof promptModalProps>) {
+    const renderedAcceptText = computed(() => props.acceptText ?? translateWithDefault('ui.accept', 'Ok'));
+    const renderedCancelText = computed(() => props.cancelText ?? translateWithDefault('ui.cancel', 'Cancel'));
+
+    return { renderedAcceptText, renderedCancelText };
+}

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,8 +1,17 @@
-import AGAlertModal from './AGAlertModal.vue';
-import AGConfirmModal from './AGConfirmModal.vue';
-import AGLoadingModal from './AGLoadingModal.vue';
-import AGModal from './AGModal.vue';
-import AGModalContext from './AGModalContext.vue';
-import { IAGModal } from './AGModal';
+export * from './AGAlertModal';
+export * from './AGConfirmModal';
+export * from './AGErrorReportModal';
+export * from './AGLoadingModal';
+export * from './AGModal';
+export * from './AGModalContext';
+export * from './AGPromptModal';
 
-export { AGAlertModal, AGConfirmModal, AGModal, AGModalContext, AGLoadingModal, IAGModal };
+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

@@ -0,0 +1,36 @@
+<template>
+    <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
+        <AGMarkdown :text="message" inline />
+        <AGButton
+            v-for="(action, i) of actions"
+            :key="i"
+            :color="color"
+            @click="activate(action)"
+        >
+            {{ action.text }}
+        </AGButton>
+    </AGHeadlessSnackbar>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { Colors } from '@/components/constants';
+import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
+
+import AGButton from '../forms/AGButton.vue';
+import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
+import AGMarkdown from '../lib/AGMarkdown.vue';
+
+const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
+const styleClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Danger:
+            return 'bg-red-200 text-red-900';
+        default:
+        case Colors.Secondary:
+            return 'bg-gray-900 text-white';
+    }
+});
+</script>

package/src/components/snackbars/index.ts

@@ -0,0 +1,3 @@
+import AGSnackbar from './AGSnackbar.vue';
+
+export { AGSnackbar };

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,13 +3,30 @@ import type { Directive } from 'vue';
 import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
+import measure from './measure';
 
-const directives: Record<string, Directive> = {
+const builtInDirectives: Record<string, Directive> = {
     'initial-focus': initialFocus,
+    'measure': measure,
 };
 
+export * from './measure';
+
 export default definePlugin({
-    install(app) {
-        Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
+    install(app, options) {
+        const directives = {
+            ...builtInDirectives,
+            ...options.directives,
+        };
+
+        for (const [name, directive] of Object.entries(directives)) {
+            app.directive(name, directive);
+        }
     },
 });
+
+declare module '@/bootstrap/options' {
+    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

@@ -1,12 +1,16 @@
-import { JSError, facade, isObject } from '@noeldemartin/utils';
+import { JSError, facade, isObject, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 
 import App from '@/services/App';
 import ServiceBootError from '@/errors/ServiceBootError';
-import UI from '@/ui/UI';
-import { translate } from '@/lang/utils';
+import UI, { UIComponents } from '@/ui/UI';
+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 {
 
@@ -22,14 +26,27 @@ 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)];
 
-        // TODO open errors modal
-        reports;
+        if (reports.length === 0) {
+            UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
+
+            return;
+        }
+
+        UI.openModal<ModalComponent<AGErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
+            reports,
+        });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
-        if (App.isDevelopment || App.isTesting) {
+        await Events.emit('error', { error, message });
+
+        if (App.testing) {
+            throw error;
+        }
+
+        if (App.development) {
             this.logError(error);
         }
 
@@ -37,7 +54,7 @@ export class ErrorsService extends Service {
             throw error;
         }
 
-        if (!App.isMounted) {
+        if (!App.isMounted()) {
             const startupError = await this.createStartupErrorReport(error);
 
             if (startupError) {
@@ -54,8 +71,24 @@ export class ErrorsService extends Service {
             date: new Date(),
         };
 
-        // TODO open error snackbar
-        UI.alert(message ?? 'Something went wrong, but it\'s not your fault! (look at the console for details)');
+        UI.showSnackbar(
+            message ??
+                translateWithDefault('errors.notice', 'Something went wrong, but it\'s not your fault. Try again!'),
+            {
+                color: Colors.Danger,
+                actions: [
+                    {
+                        text: translateWithDefault('errors.viewDetails', 'View details'),
+                        dismiss: true,
+                        handler: () =>
+                            UI.openModal<ModalComponent<AGErrorReportModalProps>>(
+                                UI.requireComponent(UIComponents.ErrorReportModal),
+                                { reports: [report] },
+                            ),
+                    },
+                ],
+            },
+        );
 
         this.setState({ logs: [log].concat(this.logs) });
     }
@@ -102,8 +135,22 @@ export class ErrorsService extends Service {
             return this.createErrorReportFromError(error);
         }
 
+        if (isObject(error)) {
+            return objectWithoutEmpty({
+                title: toString(
+                    error['name'] ?? error['title'] ?? translateWithDefault('errors.unknown', 'Unknown Error'),
+                ),
+                description: toString(
+                    error['message'] ??
+                        error['description'] ??
+                        translateWithDefault('errors.unknownDescription', 'Unknown error object'),
+                ),
+                error,
+            });
+        }
+
         return {
-            title: translate('errors.unknown'),
+            title: translateWithDefault('errors.unknown', 'Unknown Error'),
             error,
         };
     }
@@ -129,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,21 +1,46 @@
+import type { App } from 'vue';
+
 import { bootServices } from '@/services';
 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) => {
+    Errors.report(error);
+
+    return true;
+};
+
+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;
 export type ErrorsServices = typeof services;
 
 export default definePlugin({
-    async install(app) {
+    async install(app, options) {
+        setUpErrorHandler(app, options.handleError);
+
         await bootServices(app, services);
     },
 });
 
+declare module '@/bootstrap/options' {
+    export interface AerogelOptions {
+        handleError?(error: ErrorSource): boolean;
+    }
+}
+
 declare module '@/services' {
     export interface Services extends ErrorsServices {}
 }

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