@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.88c59e62f64db70aedfbc4c31b5bbc287be44483

package/src/components/headless/modals/AGHeadlessModal.vue

@@ -23,7 +23,11 @@ const props = defineProps({
 const $root = ref<{ $el?: HTMLElement } | null>(null);
 const hidden = ref(true);
 const closed = ref(false);
-const { modal } = injectReactiveOrFail<IAGModalContext>('modal');
+const { modal } = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModal>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 
 async function hide(): Promise<void> {
     if (!$root.value?.$el) {

package/src/components/headless/modals/AGHeadlessModalPanel.vue

@@ -1,7 +1,11 @@
 <template>
     <DialogPanel>
         <slot />
-        <AGModalContext v-if="childModal" :child-index="modal.childIndex + 1" :modal="childModal" />
+
+        <template v-if="childModal">
+            <div class="pointer-events-none fixed inset-0 z-50 bg-black/30" />
+            <AGModalContext :child-index="modal.childIndex + 1" :modal="childModal" />
+        </template>
     </DialogPanel>
 </template>
 
@@ -15,6 +19,10 @@ import type { IAGModalContext } from '@/components/modals/AGModalContext';
 
 import AGModalContext from '../../modals/AGModalContext.vue';
 
-const modal = injectReactiveOrFail<IAGModalContext>('modal');
+const modal = injectReactiveOrFail<IAGModalContext>(
+    'modal',
+    'could not obtain modal reference from <AGHeadlessModalPanel>, ' +
+        'did you render this component manually? Show it using $ui.openModal() instead',
+);
 const childModal = computed(() => UI.modals[modal.childIndex] ?? null);
 </script>

package/src/components/headless/snackbars/AGHeadlessSnackbar.vue

@@ -0,0 +1,10 @@
+<template>
+    <div class="pointer-events-auto">
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+// Stub import to fix build (otherwise, this file doesn't seem to be treated as a module).
+import 'virtual:aerogel';
+</script>

package/src/components/headless/snackbars/index.ts

@@ -0,0 +1,25 @@
+import { arrayProp, enumProp, requiredStringProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
+import { objectWithout } from '@noeldemartin/utils';
+
+export { default as AGHeadlessSnackbar } from './AGHeadlessSnackbar.vue';
+
+export interface SnackbarAction {
+    text: string;
+    dismiss?: boolean;
+    handler?(): unknown;
+}
+
+export type SnackbarColor = (typeof SnackbarColors)[keyof typeof SnackbarColors];
+
+export const SnackbarColors = objectWithout(Colors, ['Primary', 'Clear']);
+export const snackbarProps = {
+    id: requiredStringProp(),
+    message: requiredStringProp(),
+    actions: arrayProp<SnackbarAction>(() => []),
+    color: enumProp(SnackbarColors, Colors.Secondary),
+};
+
+export function useSnackbarProps(): typeof snackbarProps {
+    return snackbarProps;
+}

package/src/components/index.ts

@@ -1,8 +1,11 @@
 import AGAppLayout from './AGAppLayout.vue';
+import AGAppOverlays from './AGAppOverlays.vue';
 
-export { AGAppLayout };
+export { AGAppLayout, AGAppOverlays };
 
 export * from './basic';
+export * from './constants';
 export * from './forms';
 export * from './headless';
 export * from './modals';
+export * from './snackbars';

package/src/components/modals/AGAlertModal.vue

@@ -1,15 +1,25 @@
 <template>
     <AGModal>
+        <AGMarkdown
+            v-if="title"
+            :text="title"
+            as="h2"
+            class="font-semibold"
+            inline
+        />
         <AGMarkdown :text="message" />
     </AGModal>
 </template>
 
 <script setup lang="ts">
-import { requiredStringProp } from '@/utils/vue';
+import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
 
 import AGMarkdown from '../basic/AGMarkdown.vue';
 
-defineProps({ message: requiredStringProp() });
+defineProps({
+    title: stringProp(),
+    message: requiredStringProp(),
+});
 </script>

package/src/components/modals/AGConfirmModal.vue

@@ -0,0 +1,30 @@
+<template>
+    <AGModal v-slot="{ close }: IAGModalSlotProps" :cancellable="false">
+        <AGMarkdown v-if="title" :text="title" as="h1" />
+        <AGMarkdown :text="message" />
+
+        <div class="mt-2 flex flex-row-reverse gap-2">
+            <AGButton @click="close(true)">
+                {{ $td('ui.ok', 'OK') }}
+            </AGButton>
+            <AGButton color="secondary" @click="close()">
+                {{ $td('ui.cancel', 'Cancel') }}
+            </AGButton>
+        </div>
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+import { requiredStringProp, stringProp } from '@/utils/vue';
+
+import AGModal from './AGModal.vue';
+import type { IAGModalSlotProps } from './AGModal';
+
+import AGButton from '../forms/AGButton.vue';
+import AGMarkdown from '../basic/AGMarkdown.vue';
+
+defineProps({
+    title: stringProp(),
+    message: requiredStringProp(),
+});
+</script>

package/src/components/modals/AGErrorReportModal.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'vue';
+
+import { requiredArrayProp } from '@/utils/vue';
+import type { ErrorReport } from '@/errors';
+
+export interface IAGErrorReportModalButtonsDefaultSlotProps {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    handler?(): void;
+}
+
+export const errorReportModalProps = {
+    reports: requiredArrayProp<ErrorReport>(),
+};
+
+export function useErrorReportModalProps(): typeof errorReportModalProps {
+    return errorReportModalProps;
+}

package/src/components/modals/AGErrorReportModal.vue

@@ -0,0 +1,62 @@
+<template>
+    <AGModal>
+        <div>
+            <h2 class="flex items-center justify-between text-lg font-medium">
+                <div class="flex items-center">
+                    <AGErrorReportModalTitle
+                        :report="report"
+                        :current-report="activeReportIndex + 1"
+                        :total-reports="reports.length"
+                    />
+                    <template v-if="reports.length > 1">
+                        <AGButton
+                            color="clear"
+                            :disabled="activeReportIndex === 0"
+                            :title="$td('errors.previousReport', 'Show previous report')"
+                            :aria-label="$td('errors.previousReport', 'Show previous report')"
+                            @click="activeReportIndex--"
+                        >
+                            <IconCheveronLeft aria-hidden="true" class="h-4 w-4" />
+                        </AGButton>
+                        <AGButton
+                            color="clear"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :title="$td('errors.nextReport', 'Show next report')"
+                            :aria-label="$td('errors.nextReport', 'Show next report')"
+                            @click="activeReportIndex++"
+                        >
+                            <IconCheveronRight aria-hidden="true" class="h-4 w-4" />
+                        </AGButton>
+                    </template>
+                </div>
+                <AGErrorReportModalButtons :report="report" />
+            </h2>
+            <AGMarkdown v-if="report.description" :text="report.description" class="mt-2" />
+        </div>
+        <pre
+            class="h-full overflow-auto bg-gray-200 p-4 text-xs text-red-900"
+            v-text="report.details ?? $td('errors.detailsEmpty', 'This error is missing a stacktrace.')"
+        />
+    </AGModal>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import IconCheveronLeft from '~icons/zondicons/cheveron-left';
+
+import { computed, ref } from 'vue';
+
+import type { ErrorReport } from '@/errors';
+
+import { useErrorReportModalProps } from './AGErrorReportModal';
+
+import AGButton from '../forms/AGButton.vue';
+import AGErrorReportModalButtons from './AGErrorReportModalButtons.vue';
+import AGErrorReportModalTitle from './AGErrorReportModalTitle.vue';
+import AGMarkdown from '../basic/AGMarkdown.vue';
+import AGModal from './AGModal.vue';
+
+const props = defineProps(useErrorReportModalProps());
+const activeReportIndex = ref(0);
+const report = computed(() => props.reports[activeReportIndex.value] as ErrorReport);
+</script>

package/src/components/modals/AGErrorReportModalButtons.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="flex">
+        <slot v-for="(button, i) of buttons" v-bind="(button as unknown as ComponentProps)" :key="i">
+            <AGButton
+                color="clear"
+                :url="button.url"
+                :title="$td(`errors.report_${button.id}`, button.description)"
+                :aria-label="$td(`errors.report_${button.id}`, button.description)"
+                @click="button.handler"
+            >
+                <component :is="button.iconComponent" class="h-4 w-4" aria-hidden="true" />
+            </AGButton>
+        </slot>
+    </div>
+</template>
+
+<script setup lang="ts">
+import IconConsole from '~icons/mdi/console';
+import IconCopy from '~icons/zondicons/copy';
+import IconGitHub from '~icons/mdi/github';
+
+import { computed } from 'vue';
+import { stringExcerpt, tap } from '@noeldemartin/utils';
+
+import App from '@/services/App';
+import UI from '@/ui/UI';
+import { requiredObjectProp } from '@/utils/vue';
+import { translateWithDefault } from '@/lang/utils';
+import type { ComponentProps } from '@/utils/vue';
+import type { ErrorReport } from '@/errors';
+
+import AGButton from '../forms/AGButton.vue';
+import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
+
+const props = defineProps({
+    report: requiredObjectProp<ErrorReport>(),
+});
+const summary = computed(() =>
+    props.report.description ? `${props.report.title}: ${props.report.description}` : props.report.title);
+const githubReportUrl = computed(() => {
+    if (!App.sourceUrl) {
+        return false;
+    }
+
+    const issueTitle = encodeURIComponent(summary.value);
+    const issueBody = encodeURIComponent(
+        [
+            '[Please, explain here what you were trying to do when this error appeared]',
+            '',
+            'Error details:',
+            '```',
+            stringExcerpt(
+                props.report.details ?? 'Details missing from report',
+                1800 - issueTitle.length - App.sourceUrl.length,
+            ).trim(),
+            '```',
+        ].join('\n'),
+    );
+
+    return `${App.sourceUrl}/issues/new?title=${issueTitle}&body=${issueBody}`;
+});
+const buttons = computed(() =>
+    tap(
+        [
+            {
+                id: 'clipboard',
+                description: 'Copy to clipboard',
+                iconComponent: IconCopy,
+                async handler() {
+                    await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
+
+                    UI.showSnackbar(
+                        translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'),
+                    );
+                },
+            },
+            {
+                id: 'console',
+                description: 'Log to console',
+                iconComponent: IconConsole,
+                handler() {
+                    (window as { error?: unknown }).error = props.report.error;
+
+                    // eslint-disable-next-line no-console
+                    console.error(props.report.error);
+
+                    UI.showSnackbar(
+                        translateWithDefault(
+                            'errors.addedToConsole',
+                            'You can now use the **error** variable in the console',
+                        ),
+                    );
+                },
+            },
+        ],
+        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+            if (!githubReportUrl.value) {
+                return;
+            }
+
+            reportButtons.push({
+                id: 'github',
+                description: 'Report in GitHub',
+                iconComponent: IconGitHub,
+                url: githubReportUrl.value,
+            });
+        },
+    ));
+</script>

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 '../basic/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.vue

@@ -0,0 +1,19 @@
+<template>
+    <AGModal :cancellable="false">
+        <AGMarkdown :text="renderedMessage" />
+    </AGModal>
+</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 AGMarkdown from '../basic/AGMarkdown.vue';
+
+const props = defineProps({ message: stringProp() });
+const renderedMessage = computed(() => props.message ?? translateWithDefault('ui.loading', 'Loading...'));
+</script>

package/src/components/modals/AGModal.ts

@@ -4,3 +4,7 @@ export interface IAGModal {
     cancellable: Ref<boolean>;
     close(): Promise<void>;
 }
+
+export interface IAGModalSlotProps {
+    close(result?: unknown): Promise<void>;
+}

package/src/components/modals/AGModal.vue

@@ -1,8 +1,13 @@
 <template>
-    <AGHeadlessModal v-slot="{ close }: IAGHeadlessModalDefaultSlotProps" class="relative z-50">
-        <div class="fixed inset-0 flex items-center justify-center">
+    <AGHeadlessModal
+        ref="$headlessModal"
+        v-slot="{ close }: IAGHeadlessModalDefaultSlotProps"
+        :cancellable="cancellable"
+        class="relative z-50"
+    >
+        <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">
+                <div class="flex max-h-full flex-col overflow-auto p-4" v-bind="$attrs">
                     <slot :close="close" />
                 </div>
             </AGHeadlessModalPanel>
@@ -11,8 +16,22 @@
 </template>
 
 <script setup lang="ts">
-import type { IAGHeadlessModalDefaultSlotProps } from '@/components/headless/modals/AGHeadlessModal';
+import { computed, ref } from 'vue';
+
+import { booleanProp } from '@/utils';
+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';
+
+const $headlessModal = ref<IAGHeadlessModal>();
+
+defineOptions({ inheritAttrs: false });
+defineProps({ cancellable: booleanProp(true) });
+defineExpose<IAGModal>({
+    close: async () => $headlessModal.value?.close(),
+    cancellable: computed(() => !!$headlessModal.value?.cancellable),
+});
 </script>

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/index.ts

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

@@ -1,13 +1,28 @@
 import type { Directive } from 'vue';
 
-import { defineBootstrapHook } from '@/bootstrap/hooks';
+import { definePlugin } from '@/plugins';
 
 import initialFocus from './initial-focus';
 
-const directives: Record<string, Directive> = {
+const builtInDirectives: Record<string, Directive> = {
     'initial-focus': initialFocus,
 };
 
-export default defineBootstrapHook(async (app) => {
-    Object.entries(directives).forEach(([name, directive]) => app.directive(name, directive));
+export default definePlugin({
+    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.state.ts

@@ -0,0 +1,31 @@
+import type { JSError } from '@noeldemartin/utils';
+
+import { defineServiceState } from '@/services';
+
+export type ErrorSource = string | Error | JSError | unknown;
+
+export interface ErrorReport {
+    title: string;
+    description?: string;
+    details?: string;
+    error?: Error | JSError | unknown;
+}
+
+export interface ErrorReportLog {
+    report: ErrorReport;
+    seen: boolean;
+    date: Date;
+}
+
+export default defineServiceState({
+    name: 'errors',
+    initialState: {
+        logs: [] as ErrorReportLog[],
+        startupErrors: [] as ErrorReport[],
+    },
+    computed: {
+        hasErrors: ({ logs }) => logs.length > 0,
+        hasNewErrors: ({ logs }) => logs.some((error) => !error.seen),
+        hasStartupErrors: ({ startupErrors }) => startupErrors.length > 0,
+    },
+});