@aerogel/core 0.0.0-next.7f6ed5a1f91688a86bf5ede2adc465e4fd6cfdea → 0.0.0-next.8323c60b905020dcb3bd9d4b0bc8d9b6529e1082

package/src/components/ui/EditableContent.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="relative" :class="{ 'pointer-events-none!': disabled && !editing }">
+        <div v-if="!editing" :class="renderedContentClass">
+            <slot />
+        </div>
+        <span v-else :class="renderedFillerClass">
+            {{ draft }}
+        </span>
+        <span v-if="type === 'number'" class="inline-block transition-[width]" :class="editing ? 'w-5' : 'w-0'" />
+        <form class="w-full" :aria-hidden="formAriaHidden" @submit.prevent="$input?.blur()">
+            <input
+                ref="$inputRef"
+                v-model="draft"
+                :tabindex="tabindex ?? undefined"
+                :aria-label="ariaLabel ?? undefined"
+                :type
+                :class="[
+                    renderedInputClass,
+                    { 'opacity-0': !editing, 'appearance-textfield': !editing && type === 'number' },
+                ]"
+                @keyup="$emit('update', draft)"
+                @focus="startEditing()"
+                @blur="stopEditing()"
+            >
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watchEffect } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/utils/classes';
+
+const emit = defineEmits<{ update: [value: string | number]; save: [] }>();
+const {
+    type = 'text',
+    text,
+    contentClass,
+    ariaLabel,
+    formAriaHidden,
+    tabindex,
+    disabled,
+} = defineProps<{
+    type?: string;
+    contentClass?: HTMLAttributes['class'];
+    ariaLabel?: string;
+    formAriaHidden?: boolean;
+    tabindex?: string;
+    text: string;
+    disabled?: boolean;
+}>();
+const $input = useTemplateRef('$inputRef');
+const editing = ref<string | null>(null);
+const draft = ref(text);
+const renderedContentClass = computed(() => classes('inline whitespace-pre', contentClass));
+const renderedFillerClass = computed(() => classes('invisible whitespace-pre', contentClass));
+const renderedInputClass = computed(() =>
+    classes('absolute inset-0 h-full w-full resize-none border-0 bg-transparent p-0 focus:ring-0', contentClass));
+
+function startEditing() {
+    editing.value = text;
+}
+
+function stopEditing() {
+    if (!editing.value) {
+        return;
+    }
+
+    if (type !== 'number' && draft.value.trim().length === 0) {
+        draft.value = editing.value;
+
+        emit('update', draft.value);
+    }
+
+    editing.value = null;
+
+    emit('save');
+}
+
+watchEffect(() => (draft.value = text));
+</script>

package/src/components/ui/ErrorLogs.vue

@@ -0,0 +1,19 @@
+<template>
+    <Button
+        v-if="$errors.logs.length > 0"
+        size="icon"
+        variant="ghost"
+        :title="$td('errors.viewLogs', 'View error logs')"
+        :aria-label="$td('errors.viewLogs', 'View error logs')"
+        @click="$ui.modal(ErrorLogsModal)"
+    >
+        <IconWarning class="size-6 text-red-500" />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import IconWarning from '~icons/ion/warning';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import ErrorLogsModal from '@aerogel/core/components/ui/ErrorLogsModal.vue';
+</script>

package/src/components/ui/ErrorLogsModal.vue

@@ -0,0 +1,48 @@
+<template>
+    <Modal :title="$td('errors.report', 'Errors ({count})', { count: $errors.logs.length })">
+        <ol>
+            <li
+                v-for="(log, index) of $errors.logs"
+                :key="index"
+                class="mb-2 flex max-w-prose min-w-56 justify-between py-2 last:mb-0"
+            >
+                <div>
+                    <h3 class="font-medium">
+                        {{ log.report.title }}
+                    </h3>
+                    <time :datetime="log.date.toISOString()" class="text-xs text-gray-700">
+                        {{ log.date.toLocaleTimeString() }}
+                    </time>
+                    <Markdown
+                        class="text-sm text-gray-500"
+                        :text="log.report.description ?? getErrorMessage(log.report)"
+                    />
+                </div>
+                <Button
+                    size="icon"
+                    variant="ghost"
+                    :aria-label="$td('errors.viewDetails', 'View details')"
+                    :title="$td('errors.viewDetails', 'View details')"
+                    class="self-center"
+                    @click="
+                        $errors.inspect(
+                            log.report,
+                            $errors.logs.map(({ report }) => report)
+                        )
+                    "
+                >
+                    <IconViewShow class="size-4" aria-hidden="true" />
+                </Button>
+            </li>
+        </ol>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconViewShow from '~icons/zondicons/view-show';
+
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { getErrorMessage } from '@aerogel/core/errors';
+</script>

package/src/components/ui/ErrorMessage.vue

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

package/src/components/ui/ErrorReportModal.vue

@@ -0,0 +1,73 @@
+<template>
+    <Modal
+        :title="$td('errors.report', 'Error report')"
+        title-hidden
+        close-hidden
+        class="p-0"
+        wrapper-class="sm:w-auto sm:min-w-lg sm:max-w-[80vw]"
+    >
+        <div class="px-4 pt-5 pb-4">
+            <h2 class="flex justify-between gap-4">
+                <div class="flex items-center gap-2">
+                    <IconExclamationSolid class="size-5 text-red-600" />
+                    <ErrorReportModalTitle
+                        class="text-lg leading-6 font-semibold text-gray-900"
+                        :report="activeReport"
+                        :current-report="activeReportIndex + 1"
+                        :total-reports="reports.length"
+                    />
+                    <span v-if="reports.length > 1" class="flex gap-0.5">
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            :disabled="activeReportIndex === 0"
+                            :aria-label="previousReportText"
+                            :title="previousReportText"
+                            @click="activeReportIndex--"
+                        >
+                            <IconCheveronLeft class="size-4" />
+                        </Button>
+                        <Button
+                            size="icon"
+                            variant="ghost"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :aria-label="nextReportText"
+                            :title="nextReportText"
+                            @click="activeReportIndex++"
+                        >
+                            <IconCheveronRight class="size-4" />
+                        </Button>
+                    </span>
+                </div>
+                <ErrorReportModalButtons :report="activeReport" class="gap-0.5" />
+            </h2>
+            <Markdown v-if="activeReport.description" :text="activeReport.description" class="text-gray-600" />
+        </div>
+        <div class="-mt-2 max-h-[75vh] overflow-auto bg-red-800/10">
+            <pre class="p-4 text-xs text-red-800" v-text="details" />
+        </div>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconCheveronLeft from '~icons/zondicons/cheveron-left';
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import ErrorReportModalButtons from '@aerogel/core/components/ui/ErrorReportModalButtons.vue';
+import ErrorReportModalTitle from '@aerogel/core/components/ui/ErrorReportModalTitle.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import { useErrorReportModal } from '@aerogel/core/components/contracts/ErrorReportModal';
+import type {
+    ErrorReportModalExpose,
+    ErrorReportModalProps,
+} from '@aerogel/core/components/contracts/ErrorReportModal';
+
+const props = defineProps<ErrorReportModalProps>();
+
+const { activeReportIndex, details, nextReportText, previousReportText, activeReport } = useErrorReportModal(props);
+
+defineExpose<ErrorReportModalExpose>();
+</script>

package/src/components/ui/ErrorReportModalButtons.vue

@@ -0,0 +1,118 @@
+<template>
+    <div class="flex">
+        <slot v-for="button of buttons" v-bind="button">
+            <Button
+                size="icon"
+                variant="ghost"
+                class="group whitespace-nowrap"
+                :href="button.url"
+                :title="$td(`errors.report_${button.id}`, button.description)"
+                @click="button.click"
+            >
+                <span class="sr-only">{{ $td(`errors.report_${button.id}`, button.description) }}</span>
+                <component :is="button.iconComponent" class="size-4" aria-hidden="true" />
+            </Button>
+        </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 type { Component } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import UI from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+import type { ErrorReport } from '@aerogel/core/errors';
+
+interface ErrorReportModalButtonsDefaultSlotProps {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    click?(): void;
+}
+
+defineSlots<{
+    default(props: ErrorReportModalButtonsDefaultSlotProps): unknown;
+}>();
+
+const props = defineProps<{ report: 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 click() {
+                    await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
+
+                    UI.toast(translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'));
+                },
+            },
+            {
+                id: 'console',
+                description: 'Log to console',
+                iconComponent: IconConsole,
+                click() {
+                    const error = props.report.error ?? props.report;
+
+                    (window as { error?: unknown }).error = error;
+
+                    // eslint-disable-next-line no-console
+                    console.error(error);
+
+                    UI.toast(
+                        translateWithDefault(
+                            'errors.addedToConsole',
+                            'You can now use the **error** variable in the console',
+                        ),
+                    );
+                },
+            },
+        ] as ErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
+            if (!githubReportUrl.value) {
+                return;
+            }
+
+            reportButtons.push({
+                id: 'github',
+                description: 'Report in GitHub',
+                iconComponent: IconGitHub,
+                url: githubReportUrl.value,
+            });
+        },
+    ));
+</script>

package/src/components/ui/ErrorReportModalTitle.vue

@@ -0,0 +1,24 @@
+<template>
+    <Markdown :text inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import type { ErrorReport } from '@aerogel/core/errors';
+
+const { totalReports, currentReport, report } = defineProps<{
+    report: ErrorReport;
+    currentReport?: number;
+    totalReports?: number;
+}>();
+
+const text = computed(() => {
+    if (!totalReports || totalReports <= 1) {
+        return report.title;
+    }
+
+    return `${report.title} (${currentReport}/${totalReports})`;
+});
+</script>

package/src/components/ui/Form.vue

@@ -0,0 +1,24 @@
+<template>
+    <form @submit.prevent="form?.submit()">
+        <slot />
+    </form>
+</template>
+
+<script setup lang="ts">
+import { provide, watchEffect } from 'vue';
+
+import type FormController from '@aerogel/core/forms/FormController';
+
+let offSubmit: (() => void) | undefined;
+const { form } = defineProps<{ form?: FormController }>();
+const emit = defineEmits<{ submit: [] }>();
+
+watchEffect((onCleanup) => {
+    offSubmit?.();
+    offSubmit = form?.on('submit', () => emit('submit'));
+
+    onCleanup(() => offSubmit?.());
+});
+
+provide('form', form);
+</script>

package/src/components/ui/Input.vue

@@ -0,0 +1,56 @@
+<template>
+    <HeadlessInput
+        ref="$inputRef"
+        :label="label"
+        :class="rootClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <HeadlessInputLabel class="block text-sm leading-6 font-medium text-gray-900" />
+        <div :class="renderedWrapperClasses">
+            <HeadlessInputInput v-bind="inputAttrs" :class="renderedInputClasses" />
+            <div v-if="$input?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+                <IconExclamationSolid class="size-5 text-red-500" />
+            </div>
+        </div>
+        <HeadlessInputDescription class="mt-2 text-sm text-gray-600" />
+        <HeadlessInputError class="mt-2 text-sm text-red-600" />
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.vue';
+import HeadlessInputInput from '@aerogel/core/components/headless/HeadlessInputInput.vue';
+import HeadlessInputDescription from '@aerogel/core/components/headless/HeadlessInputDescription.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import { classes } from '@aerogel/core/utils/classes';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { label, inputClass, wrapperClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+>();
+const $input = useTemplateRef('$inputRef');
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedWrapperClasses = computed(() =>
+    classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedInputClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6',
+        {
+            'focus:ring-primary-600': !$input.value?.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/Link.vue

@@ -0,0 +1,12 @@
+<template>
+    <Button variant="link" v-bind="$props">
+        <slot />
+    </Button>
+</template>
+
+<script setup lang="ts">
+import Button from '@aerogel/core/components/ui/Button.vue';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+
+defineProps<Omit<ButtonProps, 'variant'>>();
+</script>

package/src/components/ui/LoadingModal.vue

@@ -0,0 +1,34 @@
+<template>
+    <Modal
+        persistent
+        class="flex"
+        wrapper-class="w-auto"
+        :title="renderedTitle"
+        :title-hidden
+        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+    >
+        <ProgressBar
+            v-if="showProgress"
+            :progress
+            :job
+            class="min-w-[min(400px,80vw)]"
+        />
+        <IconSpinner v-else class="text-primary-600 mr-1 size-6" />
+        <Markdown :text="renderedMessage" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import IconSpinner from '~icons/svg-spinners/90-ring-with-bg';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import ProgressBar from '@aerogel/core/components/ui/ProgressBar.vue';
+import { useLoadingModal } from '@aerogel/core/components/contracts/LoadingModal';
+import type { LoadingModalExpose, LoadingModalProps } from '@aerogel/core/components/contracts/LoadingModal';
+
+const props = defineProps<LoadingModalProps>();
+const { renderedTitle, renderedMessage, titleHidden, showProgress } = useLoadingModal(props);
+
+defineExpose<LoadingModalExpose>();
+</script>

package/src/components/ui/Markdown.vue

@@ -0,0 +1,97 @@
+<template>
+    <root />
+</template>
+
+<script setup lang="ts">
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
+import type { VNode } from 'vue';
+
+import { getMarkdownRouter, renderMarkdown } from '@aerogel/core/utils/markdown';
+import { translate, translateWithDefault } from '@aerogel/core/lang';
+import { renderVNode } from '@aerogel/core/utils/vue';
+
+const { as, inline, langKey, langParams, langDefault, text, actions } = defineProps<{
+    as?: string;
+    inline?: boolean;
+    langKey?: string;
+    langParams?: number | Record<string, unknown>;
+    langDefault?: string;
+    text?: string;
+    actions?: Record<string, () => unknown>;
+}>();
+
+const attrs = useAttrs();
+const slots = defineSlots<{ default?(): VNode[] }>();
+const markdown = computed(() => {
+    if (slots.default) {
+        return slots.default().map(renderVNode).join('');
+    }
+
+    return (
+        text ??
+        (langKey &&
+            (langDefault
+                ? translateWithDefault(langKey, langDefault, langParams ?? {})
+                : translate(langKey, langParams ?? {})))
+    );
+});
+const html = computed(() => {
+    if (!markdown.value) {
+        return null;
+    }
+
+    let renderedHtml = renderMarkdown(markdown.value);
+
+    if (inline) {
+        renderedHtml = renderedHtml.replace('<p>', '<span>').replace('</p>', '</span>');
+    }
+
+    return renderedHtml;
+});
+const root = () =>
+    h(as ?? (inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+
+    if (isInstanceOf(target, HTMLAnchorElement) && target.dataset.markdownRoute) {
+        const router = getMarkdownRouter();
+
+        if (router) {
+            event.preventDefault();
+
+            router.visit(target.dataset.markdownRoute);
+        }
+
+        return;
+    }
+}
+</script>
+
+<style scoped>
+/* @apply .text-links .font-normal .no-underline .hover:underline; */
+* :deep(a) {
+    --tw-font-weight: var(--font-weight-normal);
+    text-decoration-line: none;
+    color: var(--color-links);
+    font-weight: var(--font-weight-normal);
+}
+
+@media (hover: hover) {
+    * :deep(a:hover) {
+        text-decoration-line: underline;
+    }
+}
+</style>