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

package/src/components/modals/AGModal.vue

@@ -5,7 +5,7 @@
         :cancellable="cancellable"
         class="relative z-50"
     >
-        <div class="fixed inset-0 flex items-center justify-center">
+        <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">
                 <div class="flex max-h-full flex-col overflow-auto p-4">
                     <slot :close="close" />

package/src/components/modals/index.ts

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

package/src/components/snackbars/AGSnackbar.vue

@@ -0,0 +1,42 @@
+<template>
+    <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
+        <AGMarkdown :text="message" raw />
+        <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 UI from '@/ui/UI';
+import { Colors } from '@/components/constants';
+import { useSnackbarProps } from '@/components/headless';
+import type { SnackbarAction } from '@/components/headless';
+
+import AGButton from '../forms/AGButton.vue';
+import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
+import AGMarkdown from '../basic/AGMarkdown.vue';
+
+const props = defineProps(useSnackbarProps());
+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';
+    }
+});
+
+function activate(action: SnackbarAction): void {
+    action.handler?.();
+    action.dismiss && UI.hideSnackbar(props.id);
+}
+</script>

package/src/components/snackbars/index.ts

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

package/src/directives/index.ts

@@ -4,12 +4,25 @@ import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
 
-const directives: Record<string, Directive> = {
+const builtInDirectives: Record<string, Directive> = {
     'initial-focus': initialFocus,
 };
 
 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' {
+    interface AerogelOptions {
+        directives?: Record<string, Directive>;
+    }
+}

package/src/errors/Errors.ts

@@ -1,11 +1,12 @@
-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 { translate, translateWithDefault } from '@/lang/utils';
 
 import Service from './Errors.state';
+import { Colors } from '@/components/constants';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
 export class ErrorsService extends Service {
@@ -24,8 +25,13 @@ export class ErrorsService extends Service {
     public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
         const reports = Array.isArray(error) ? error : [await this.createErrorReport(error)];
 
-        // TODO open errors modal
-        reports;
+        if (reports.length === 0) {
+            UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
+
+            return;
+        }
+
+        UI.openModal(UI.requireComponent(UIComponents.ErrorReportModal), { reports });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
@@ -54,8 +60,23 @@ 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(UI.requireComponent(UIComponents.ErrorReportModal), {
+                                reports: [report],
+                            }),
+                    },
+                ],
+            },
+        );
 
         this.setState({ logs: [log].concat(this.logs) });
     }
@@ -102,6 +123,14 @@ export class ErrorsService extends Service {
             return this.createErrorReportFromError(error);
         }
 
+        if (isObject(error)) {
+            return objectWithoutEmpty({
+                title: toString(error['name'] ?? error['title'] ?? translate('errors.unknown')),
+                description: toString(error['message'] ?? error['description'] ?? ''),
+                error,
+            });
+        }
+
         return {
             title: translate('errors.unknown'),
             error,

package/src/errors/index.ts

@@ -1,3 +1,5 @@
+import { tap } from '@noeldemartin/utils';
+
 import { bootServices } from '@/services';
 import { definePlugin } from '@/plugins';
 
@@ -7,15 +9,51 @@ import { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 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);
+        },
+    );
+}
+
+export type ErrorHandler = (error: ErrorSource) => boolean;
 export type ErrorsServices = typeof services;
 
 export default definePlugin({
-    async install(app) {
+    async install(app, options) {
+        const errorHandler = setUpErrorHandler(options.handleError);
+
+        app.config.errorHandler = errorHandler;
+
         await bootServices(app, services);
     },
 });
 
+declare module '@/bootstrap/options' {
+    interface AerogelOptions {
+        handleError?(error: ErrorSource): boolean;
+    }
+}
+
 declare module '@/services' {
     export interface Services extends ErrorsServices {}
 }

package/src/main.ts

@@ -1,5 +1,3 @@
-import './globals';
-
 export * from './bootstrap';
 export * from './components';
 export * from './errors';

package/src/services/App.state.ts

@@ -1,9 +1,12 @@
+import Build from 'virtual:aerogel';
+
 import { defineServiceState } from '@/services/Service';
 
 export default defineServiceState({
     name: 'app',
     initialState: {
-        environment: __AG_ENV,
+        environment: Build.environment,
+        sourceUrl: Build.sourceUrl,
         isMounted: false,
     },
     computed: {

package/src/types/virtual.d.ts

@@ -0,0 +1,11 @@
+declare module 'virtual:aerogel' {
+    interface AerogelBuild {
+        environment: 'production' | 'development' | 'testing';
+        basePath?: string;
+        sourceUrl?: string;
+    }
+
+    const build: AerogelBuild;
+
+    export default build;
+}

package/src/ui/UI.state.ts

@@ -17,7 +17,16 @@ export interface ModalComponent<
     Result = unknown
 > {}
 
+export interface Snackbar {
+    id: string;
+    component: Component;
+    properties: Record<string, unknown>;
+}
+
 export default defineServiceState({
     name: 'ui',
-    initialState: { modals: [] as Modal[] },
+    initialState: {
+        modals: [] as Modal[],
+        snackbars: [] as Snackbar[],
+    },
 });

package/src/ui/UI.ts

@@ -4,9 +4,10 @@ import type { Component } from 'vue';
 import type { ObjectValues } from '@noeldemartin/utils';
 
 import Events from '@/services/Events';
+import type { SnackbarAction, SnackbarColor } from '@/components/headless/snackbars';
 
 import Service from './UI.state';
-import type { Modal, ModalComponent } from './UI.state';
+import type { Modal, ModalComponent, Snackbar } from './UI.state';
 
 interface ModalCallbacks<T = unknown> {
     willClose(result: T | undefined): void;
@@ -21,16 +22,28 @@ type ModalResult<TComponent> = TComponent extends ModalComponent<Record<string,
 export const UIComponents = {
     AlertModal: 'alert-modal',
     ConfirmModal: 'confirm-modal',
+    ErrorReportModal: 'error-report-modal',
     LoadingModal: 'loading-modal',
+    Snackbar: 'snackbar',
 } as const;
 
 export type UIComponent = ObjectValues<typeof UIComponents>;
 
+export interface ShowSnackbarOptions {
+    component?: Component;
+    color?: SnackbarColor;
+    actions?: SnackbarAction[];
+}
+
 export class UIService extends Service {
 
     private modalCallbacks: Record<string, Partial<ModalCallbacks>> = {};
     private components: Partial<Record<UIComponent, Component>> = {};
 
+    public requireComponent(name: UIComponent): Component {
+        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
+    }
+
     public alert(message: string): void;
     public alert(title: string, message: string): void;
     public alert(messageOrTitle: string, message?: string): void {
@@ -66,6 +79,25 @@ export class UIService extends Service {
         return result;
     }
 
+    public showSnackbar(message: string, options: ShowSnackbarOptions = {}): void {
+        const snackbar: Snackbar = {
+            id: uuid(),
+            properties: { message, ...options },
+            component: options.component ?? markRaw(this.requireComponent(UIComponents.Snackbar)),
+        };
+
+        this.setState('snackbars', this.snackbars.concat(snackbar));
+
+        setTimeout(() => this.hideSnackbar(snackbar.id), 5000);
+    }
+
+    public hideSnackbar(id: string): void {
+        this.setState(
+            'snackbars',
+            this.snackbars.filter((snackbar) => snackbar.id !== id),
+        );
+    }
+
     public registerComponent(name: UIComponent, component: Component): void {
         this.components[name] = component;
     }
@@ -110,10 +142,6 @@ export class UIService extends Service {
         this.watchModalEvents();
     }
 
-    private requireComponent(name: UIComponent): Component {
-        return this.components[name] ?? fail(`UI Component '${name}' is not defined!`);
-    }
-
     private watchModalEvents(): void {
         Events.on('modal-will-close', ({ modal, result }) => {
             this.modalCallbacks[modal.id]?.willClose?.(result);
@@ -124,7 +152,10 @@ export class UIService extends Service {
         });
 
         Events.on('modal-closed', async ({ modal, result }) => {
-            this.setState({ modals: this.modals.filter((m) => m.id !== modal.id) });
+            this.setState(
+                'modals',
+                this.modals.filter((m) => m.id !== modal.id),
+            );
 
             this.modalCallbacks[modal.id]?.closed?.(result);
 

package/src/ui/index.ts

@@ -6,7 +6,9 @@ import { definePlugin } from '@/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 AGSnackbar from '../components/snackbars/AGSnackbar.vue';
 import type { UIComponent } from './UI';
 
 export { UI, UIComponents, UIComponent };
@@ -20,7 +22,9 @@ export default definePlugin({
         const defaultComponents = {
             [UIComponents.AlertModal]: AGAlertModal,
             [UIComponents.ConfirmModal]: AGConfirmModal,
+            [UIComponents.ErrorReportModal]: AGErrorReportModal,
             [UIComponents.LoadingModal]: AGLoadingModal,
+            [UIComponents.Snackbar]: AGSnackbar,
         };
 
         Object.entries({

package/src/utils/vue.ts

@@ -10,6 +10,8 @@ type BaseProp<T> = {
 type RequiredProp<T> = BaseProp<T> & { required: true };
 type OptionalProp<T> = BaseProp<T> & { default: T | (() => T) | null };
 
+export type ComponentProps = Record<string, unknown>;
+
 export function arrayProp<T>(defaultValue?: () => T[]): OptionalProp<T[]> {
     return {
         type: Array as PropType<T[]>,

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../../tsconfig.json",
     "compilerOptions": {
+        "types": ["unplugin-icons/types/vue3"],
         "baseUrl": ".",
         "paths": {
             "@/*": ["./src/*"]

package/vite.config.ts

@@ -1,10 +1,11 @@
 import Aerogel from '@aerogel/vite';
+import Icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vitest/config';
 import { resolve } from 'path';
 
 export default defineConfig({
     test: { clearMocks: true },
-    plugins: [Aerogel()],
+    plugins: [Aerogel(), Icons()],
     resolve: {
         alias: {
             '@': resolve(__dirname, './src'),

package/src/globals.ts

@@ -1,6 +0,0 @@
-export {};
-
-declare global {
-    export const __AG_BASE_PATH: string | undefined;
-    export const __AG_ENV: 'production' | 'development' | 'testing';
-}