@aerogel/core 0.0.0-next.59bf5f7cc06e728d0cf6c00de28f1da48d7d6b8e → 0.0.0-next.88c59e62f64db70aedfbc4c31b5bbc287be44483

package/src/components/basic/AGErrorMessage.vue

@@ -0,0 +1,16 @@
+<template>
+    <AGMarkdown :text="message" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Errors from '@/errors/Errors';
+import { requiredObjectProp } from '@/utils/vue';
+import type { ErrorSource } from '@/errors/Errors.state';
+
+import AGMarkdown from './AGMarkdown.vue';
+
+const props = defineProps({ error: requiredObjectProp<ErrorSource>() });
+const message = computed(() => Errors.getErrorMessage(props.error));
+</script>

package/src/components/basic/AGLink.vue

@@ -0,0 +1,9 @@
+<template>
+    <AGHeadlessButton class="font-medium hover:underline">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
+</script>

package/src/components/basic/AGMarkdown.vue

@@ -6,18 +6,18 @@
 import { computed, h } from 'vue';
 
 import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, stringProp } from '@/utils/vue';
+import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 import { translate } from '@/lang';
 
 const props = defineProps({
-    as: stringProp('div'),
+    as: stringProp(),
+    inline: booleanProp(),
     langKey: stringProp(),
+    langParams: objectProp<Record<string, unknown>>(),
     text: stringProp(),
-    inline: booleanProp(),
-    raw: booleanProp(),
 });
 
-const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey)));
+const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
         return null;
@@ -31,5 +31,6 @@ const html = computed(() => {
 
     return renderedHtml;
 });
-const root = () => h(props.as, { class: props.raw ? '' : 'prose', innerHTML: html.value });
+const root = () =>
+    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
 </script>

package/src/components/basic/index.ts

@@ -1,3 +1,5 @@
+import AGErrorMessage from './AGErrorMessage.vue';
+import AGLink from './AGLink.vue';
 import AGMarkdown from './AGMarkdown.vue';
 
-export { AGMarkdown };
+export { AGErrorMessage, AGLink, AGMarkdown };

package/src/components/constants.ts

@@ -0,0 +1,8 @@
+export const Colors = {
+    Primary: 'primary',
+    Secondary: 'secondary',
+    Danger: 'danger',
+    Clear: 'clear',
+} as const;
+
+export type Color = (typeof Colors)[keyof typeof Colors];

package/src/components/forms/AGButton.vue

@@ -7,28 +7,38 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { booleanProp } from '@/utils';
+import { enumProp } from '@/utils/vue';
+import { Colors } from '@/components/constants';
 
 import AGHeadlessButton from '../headless/forms/AGHeadlessButton.vue';
 
 const props = defineProps({
-    clear: booleanProp(),
-    secondary: booleanProp(),
+    color: enumProp(Colors, Colors.Primary),
 });
 
 const colorClasses = computed(() => {
-    if (props.secondary) {
-        return 'text-white bg-gray-600 hover:bg-gray-500 focus-visible:outline-offset-2 focus-visible:outline-gray-600';
+    switch (props.color) {
+        case Colors.Secondary:
+            return [
+                'text-white bg-gray-600',
+                'hover:bg-gray-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-gray-600',
+            ].join(' ');
+        case Colors.Clear:
+            return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
+        case Colors.Danger:
+            return [
+                'text-white bg-red-600',
+                'hover:bg-red-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-red-600',
+            ].join(' ');
+        case Colors.Primary:
+        default:
+            return [
+                'text-white bg-indigo-600',
+                'hover:bg-indigo-500',
+                'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
+            ].join(' ');
     }
-
-    if (props.clear) {
-        return 'hover:bg-gray-500/20 focus-visible:outline-gray-500/60';
-    }
-
-    return [
-        'text-white bg-indigo-600',
-        'hover:bg-indigo-500',
-        'focus-visible:outline-offset-2 focus-visible:outline-indigo-600',
-    ].join(' ');
 });
 </script>

package/src/components/forms/index.ts

@@ -1,6 +1,4 @@
-import AGButton from './AGButton.vue';
-import AGCheckbox from './AGCheckbox.vue';
-import AGForm from './AGForm.vue';
-import AGInput from './AGInput.vue';
-
-export { AGButton, AGCheckbox, AGForm, AGInput };
+export { default as AGButton } from './AGButton.vue';
+export { default as AGCheckbox } from './AGCheckbox.vue';
+export { default as AGForm } from './AGForm.vue';
+export { default as AGInput } from './AGInput.vue';

package/src/components/headless/forms/AGHeadlessButton.vue

@@ -7,15 +7,15 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { objectWithoutEmpty } from '@noeldemartin/utils';
-import type { LocationQuery, RouteLocation, RouteParams } from 'vue-router';
 
 import { booleanProp, objectProp, stringProp } from '@/utils/vue';
 
-const { url, route, routeParams, routeQuery, submit } = defineProps({
+const { href, url, route, routeParams, routeQuery, submit } = defineProps({
+    href: stringProp(),
     url: stringProp(),
     route: stringProp(),
-    routeParams: objectProp<RouteParams>(() => ({})),
-    routeQuery: objectProp<LocationQuery>(() => ({})),
+    routeParams: objectProp(() => ({})),
+    routeQuery: objectProp(() => ({})),
     submit: booleanProp(),
 });
 
@@ -24,7 +24,7 @@ const component = computed(() => {
         return {
             tag: 'router-link',
             props: {
-                to: objectWithoutEmpty<Partial<RouteLocation>>({
+                to: objectWithoutEmpty({
                     name: route,
                     params: routeParams,
                     query: routeQuery,
@@ -33,12 +33,12 @@ const component = computed(() => {
         };
     }
 
-    if (url) {
+    if (href || url) {
         return {
             tag: 'a',
             props: {
                 target: '_blank',
-                href: url,
+                href: href || url,
             },
         };
     }

package/src/components/headless/forms/AGHeadlessInput.vue

@@ -32,7 +32,7 @@ const publicApi: IAGHeadlessInput = {
     id: `input-${uuid()}`,
     value: computed(() => {
         if (form && props.name) {
-            return form.getFieldValue(props.name);
+            return form.getFieldValue(props.name) as string | number | boolean | null;
         }
 
         return props.modelValue;

package/src/components/headless/forms/AGHeadlessSelect.ts

@@ -0,0 +1,31 @@
+import type { ComputedRef } from 'vue';
+
+import { requiredArrayProp } from '@/utils/vue';
+
+export type SelectOptionValue = string | number | boolean | object | null;
+
+export interface IAGHeadlessSelect {
+    value: ComputedRef<SelectOptionValue | undefined>;
+    options: SelectOptionValue[];
+    update(value: string | number | boolean | null): void;
+}
+
+export const selectProps = {
+    options: requiredArrayProp<SelectOptionValue>(),
+};
+
+export function useSelectProps(): typeof selectProps {
+    return selectProps;
+}
+
+export function extractSelectProps<T extends Record<keyof typeof selectProps, unknown>>(
+    componentProps: T,
+): Pick<T, keyof typeof selectProps> {
+    return Object.keys(selectProps).reduce((extractedProps, selectProp) => {
+        const prop = selectProp as keyof typeof selectProps;
+
+        extractedProps[prop] = componentProps[prop];
+
+        return extractedProps;
+    }, {} as Pick<T, keyof typeof selectProps>);
+}

package/src/components/headless/forms/AGHeadlessSelect.vue

@@ -0,0 +1,45 @@
+<template>
+    <Listbox :model-value="publicApi.value.value" @update:model-value="publicApi.update($event)">
+        <slot />
+    </Listbox>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+import { Listbox } from '@headlessui/vue';
+
+import { mixedProp, stringProp } from '@/utils/vue';
+import type Form from '@/forms/Form';
+
+import { useSelectProps } from './AGHeadlessSelect';
+import type { IAGHeadlessSelect, SelectOptionValue } from './AGHeadlessSelect';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    name: stringProp(),
+    modelValue: mixedProp<SelectOptionValue>(),
+    ...useSelectProps(),
+});
+const form = inject<Form | null>('form', null);
+const publicApi: IAGHeadlessSelect = {
+    value: computed(() => {
+        if (form && props.name) {
+            return form.getFieldValue(props.name);
+        }
+
+        return props.modelValue;
+    }),
+    options: props.options,
+    update(value) {
+        if (form && props.name) {
+            form.setFieldValue(props.name, value);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+};
+
+defineExpose<IAGHeadlessSelect>(publicApi);
+</script>

package/src/components/headless/forms/AGHeadlessSelectButton.ts

@@ -0,0 +1,3 @@
+import { ListboxButton } from '@headlessui/vue';
+
+export default ListboxButton;

package/src/components/headless/forms/AGHeadlessSelectLabel.ts

@@ -0,0 +1,3 @@
+import { ListboxLabel } from '@headlessui/vue';
+
+export default ListboxLabel;

package/src/components/headless/forms/AGHeadlessSelectOption.ts

@@ -0,0 +1,8 @@
+import { ListboxOption } from '@headlessui/vue';
+
+export type IAGHeadlessSelectOptionSlotProps = {
+    active: boolean;
+    selected: boolean;
+};
+
+export default ListboxOption;

package/src/components/headless/forms/AGHeadlessSelectOptions.ts

@@ -0,0 +1,3 @@
+import { ListboxOptions } from '@headlessui/vue';
+
+export default ListboxOptions;

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

@@ -1,6 +1,12 @@
-export { IAGHeadlessInput } from './AGHeadlessInput';
+export * from './AGHeadlessInput';
+export * from './AGHeadlessSelect';
 export { default as AGHeadlessButton } from './AGHeadlessButton.vue';
 export { default as AGHeadlessInput } from './AGHeadlessInput.vue';
 export { default as AGHeadlessInputError } from './AGHeadlessInputError.vue';
 export { default as AGHeadlessInputInput } from './AGHeadlessInputInput.vue';
 export { default as AGHeadlessInputLabel } from './AGHeadlessInputLabel.vue';
+export { default as AGHeadlessSelect } from './AGHeadlessSelect.vue';
+export { default as AGHeadlessSelectButton } from './AGHeadlessSelectButton';
+export { default as AGHeadlessSelectLabel } from './AGHeadlessSelectLabel';
+export { default as AGHeadlessSelectOption, IAGHeadlessSelectOptionSlotProps } from './AGHeadlessSelectOption';
+export { default as AGHeadlessSelectOptions } from './AGHeadlessSelectOptions';

package/src/components/headless/index.ts

@@ -1,2 +1,3 @@
 export * from './forms';
 export * from './modals';
+export * from './snackbars';

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

@@ -4,6 +4,8 @@ import AGAppOverlays from './AGAppOverlays.vue';
 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

@@ -5,7 +5,6 @@
             :text="title"
             as="h2"
             class="font-semibold"
-            raw
             inline
         />
         <AGMarkdown :text="message" />

package/src/components/modals/AGConfirmModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <AGModal v-slot="{ close }: IAGModalDefaultSlotProps" :cancellable="false">
+    <AGModal v-slot="{ close }: IAGModalSlotProps" :cancellable="false">
         <AGMarkdown v-if="title" :text="title" as="h1" />
         <AGMarkdown :text="message" />
 
@@ -7,7 +7,7 @@
             <AGButton @click="close(true)">
                 {{ $td('ui.ok', 'OK') }}
             </AGButton>
-            <AGButton secondary @click="close()">
+            <AGButton color="secondary" @click="close()">
                 {{ $td('ui.cancel', 'Cancel') }}
             </AGButton>
         </div>
@@ -18,7 +18,7 @@
 import { requiredStringProp, stringProp } from '@/utils/vue';
 
 import AGModal from './AGModal.vue';
-import type { IAGModalDefaultSlotProps } from './AGModal';
+import type { IAGModalSlotProps } from './AGModal';
 
 import AGButton from '../forms/AGButton.vue';
 import AGMarkdown from '../basic/AGMarkdown.vue';

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

@@ -5,6 +5,6 @@ export interface IAGModal {
     close(): Promise<void>;
 }
 
-export interface IAGModalDefaultSlotProps {
+export interface IAGModalSlotProps {
     close(result?: unknown): Promise<void>;
 }

package/src/components/modals/AGModal.vue

@@ -5,9 +5,9 @@
         :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">
+                <div class="flex max-h-full flex-col overflow-auto p-4" v-bind="$attrs">
                     <slot :close="close" />
                 </div>
             </AGHeadlessModalPanel>
@@ -28,6 +28,7 @@ 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(),