@aerogel/core 0.0.0-next.b18f4e0acd39431045c2f444c711303890143193 → 0.0.0-next.b3caf219a503ce9b8c65ef1463132c9507f56c0a

package/src/components/lib/AGMarkdown.vue

@@ -3,20 +3,23 @@
 </template>
 
 <script setup lang="ts">
-import { computed, h } from 'vue';
+import { computed, h, useAttrs } from 'vue';
+import { isInstanceOf } from '@noeldemartin/utils';
 
-import { renderMarkdown } from '@/utils/markdown';
-import { booleanProp, objectProp, stringProp } from '@/utils/vue';
-import { translate } from '@/lang';
+import { renderMarkdown } from '@aerogel/core/utils/markdown';
+import { booleanProp, mixedProp, objectProp, stringProp } from '@aerogel/core/utils/vue';
+import { translate } from '@aerogel/core/lang';
 
 const props = defineProps({
     as: stringProp(),
     inline: booleanProp(),
     langKey: stringProp(),
-    langParams: objectProp<Record<string, unknown>>(),
+    langParams: mixedProp<number | Record<string, unknown>>(),
     text: stringProp(),
+    actions: objectProp<Record<string, () => unknown>>(),
 });
 
+const attrs = useAttrs();
 const markdown = computed(() => props.text ?? (props.langKey && translate(props.langKey, props.langParams ?? {})));
 const html = computed(() => {
     if (!markdown.value) {
@@ -32,5 +35,20 @@ const html = computed(() => {
     return renderedHtml;
 });
 const root = () =>
-    h(props.as ?? (props.inline ? 'span' : 'div'), { class: props.inline ? '' : 'prose', innerHTML: html.value });
+    h(props.as ?? (props.inline ? 'span' : 'div'), {
+        innerHTML: html.value,
+        onClick,
+        ...attrs,
+        class: `${attrs.class ?? ''} ${props.inline ? '' : 'prose'}`,
+    });
+
+async function onClick(event: Event) {
+    const { target } = event;
+
+    if (isInstanceOf(target, HTMLElement) && target.dataset.markdownAction) {
+        props.actions?.[target.dataset.markdownAction]?.();
+
+        return;
+    }
+}
 </script>

package/src/components/lib/AGMeasured.vue

@@ -1,5 +1,5 @@
 <template>
-    <component :is="as" v-measure="() => (measured = true)" :class="{ '!invisible !absolute !w-auto': !measured }">
+    <component :is="as" v-measure="() => (measured = true)" :class="{ 'invisible! absolute! w-auto!': !measured }">
         <slot />
     </component>
 </template>
@@ -7,9 +7,10 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-import { stringProp } from '@/utils/vue';
+import { stringProp } from '@aerogel/core/utils/vue';
 
 defineProps({ as: stringProp('span') });
 
+// TODO use v-measure.css
 const measured = ref(false);
 </script>

package/src/components/lib/AGStartupCrash.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="grid flex-grow place-items-center">
+    <div class="grid grow place-items-center">
         <div class="flex flex-col items-center space-y-6 p-8">
             <h1 class="mt-2 text-center text-4xl font-medium text-red-600">
                 {{ $td('startupCrash.title', 'Something went wrong!') }}
@@ -14,12 +14,12 @@
                 class="mt-4 text-center"
             />
             <div class="mt-4 flex flex-col space-y-4">
-                <AGButton color="danger" @click="$app.reload()">
+                <Button variant="danger" @click="$app.reload()">
                     {{ $td('startupCrash.reload', 'Try again') }}
-                </AGButton>
-                <AGButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                </Button>
+                <Button variant="danger" @click="$errors.inspect($errors.startupErrors)">
                     {{ $td('startupCrash.inspect', 'View error details') }}
-                </AGButton>
+                </Button>
             </div>
         </div>
     </div>
@@ -27,5 +27,5 @@
 
 <script setup lang="ts">
 import AGMarkdown from './AGMarkdown.vue';
-import AGButton from '../forms/AGButton.vue';
+import Button from '../ui/Button.vue';
 </script>

package/src/components/lib/index.ts

@@ -1,5 +1,4 @@
 export { default as AGErrorMessage } from './AGErrorMessage.vue';
-export { default as AGLink } from './AGLink.vue';
 export { default as AGMarkdown } from './AGMarkdown.vue';
 export { default as AGMeasured } from './AGMeasured.vue';
 export { default as AGStartupCrash } from './AGStartupCrash.vue';

package/src/components/snackbars/AGSnackbar.vue

@@ -1,24 +1,25 @@
 <template>
     <AGHeadlessSnackbar class="flex flex-row items-center justify-center gap-3 p-4" :class="styleClasses">
         <AGMarkdown :text="message" inline />
-        <AGButton
+        <Button
             v-for="(action, i) of actions"
             :key="i"
-            :color="color"
+            :variant="colorVariant"
             @click="activate(action)"
         >
             {{ action.text }}
-        </AGButton>
+        </Button>
     </AGHeadlessSnackbar>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { Colors } from '@/components/constants';
-import { useSnackbar, useSnackbarProps } from '@/components/headless/snackbars';
+import { Colors } from '@aerogel/core/components/constants';
+import { useSnackbar, useSnackbarProps } from '@aerogel/core/components/headless/snackbars';
+import type { ButtonVariant } from '@aerogel/core/components/contracts/Button';
 
-import AGButton from '../forms/AGButton.vue';
+import Button from '../ui/Button.vue';
 import AGHeadlessSnackbar from '../headless/snackbars/AGHeadlessSnackbar.vue';
 import AGMarkdown from '../lib/AGMarkdown.vue';
 
@@ -33,4 +34,5 @@ const styleClasses = computed(() => {
             return 'bg-gray-900 text-white';
     }
 });
+const colorVariant = computed(() => props.color as ButtonVariant);
 </script>

package/src/components/ui/AlertModal.vue

@@ -0,0 +1,13 @@
+<template>
+    <Modal :title="title">
+        <AGMarkdown :text="message" />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.vue';
+import type { AlertModalProps } from '@aerogel/core/components/contracts/AlertModal';
+
+defineProps<AlertModalProps>();
+</script>

package/src/components/ui/Button.vue

@@ -0,0 +1,58 @@
+<template>
+    <HeadlessButton :class="renderedClasses" v-bind="props">
+        <slot />
+    </HeadlessButton>
+</template>
+
+<script setup lang="ts">
+import HeadlessButton from '@aerogel/core/components/headless/HeadlessButton.vue';
+import { computedVariantClasses } from '@aerogel/core/components/utils';
+import type { ButtonProps } from '@aerogel/core/components/contracts/Button';
+import type { Variants } from '@aerogel/core/components/utils';
+
+const { class: baseClasses, size, variant, ...props } = defineProps<ButtonProps>();
+
+/* eslint-disable vue/max-len */
+// prettier-ignore
+const renderedClasses = computedVariantClasses<Variants<Pick<ButtonProps, 'size' | 'variant'>>>(
+    { baseClasses, variant, size },
+    {
+        baseClasses: 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+        variants: {
+            variant: {
+                default: 'bg-primary text-white hover:bg-primary/90 focus-visible:outline-primary',
+                secondary: 'bg-background text-gray-900 ring-gray-300 hover:bg-accent',
+                danger: 'bg-danger text-white hover:bg-danger/80 focus-visible:outline-danger',
+                ghost: 'bg-background hover:bg-accent',
+                outline: 'bg-background text-primary ring-primary hover:bg-accent',
+                link: 'text-primary hover:underline',
+            },
+            size: {
+                small: 'rounded px-2 py-1 text-xs',
+                default: 'rounded-md px-2.5 py-1.5 text-sm',
+                large: 'rounded-md px-3 py-2 text-base',
+                icon: 'rounded-full p-2.5',
+            },
+        },
+        compoundVariants: [
+            {
+                variant: ['default', 'secondary', 'danger', 'ghost', 'outline'],
+                class: 'font-medium',
+            },
+            {
+                variant: ['default', 'danger'],
+                class: 'shadow-sm',
+            },
+            {
+                variant: ['secondary', 'outline'],
+                class: 'ring-1 ring-inset',
+            },
+        ],
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    },
+);
+/* eslint-enable vue/max-len */
+</script>

package/src/components/ui/Checkbox.vue

@@ -0,0 +1,49 @@
+<template>
+    <HeadlessInput
+        ref="$input"
+        :class="renderedClasses"
+        v-bind="props"
+        @update:model-value="$emit('update:modelValue', $event)"
+    >
+        <div class="flex h-6 items-center">
+            <HeadlessInputInput v-bind="inputAttrs" type="checkbox" :class="renderedInputClasses" />
+        </div>
+        <div v-if="$slots.default" class="ml-2 text-sm leading-6">
+            <HeadlessInputLabel class="text-gray-900">
+                <slot />
+            </HeadlessInputLabel>
+            <HeadlessInputError class="text-sm text-red-600" />
+        </div>
+        <div v-else-if="label" class="ml-2 text-sm leading-6">
+            <HeadlessInputLabel />
+            <HeadlessInputError class="text-sm text-red-600" />
+        </div>
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { componentRef } from '@aerogel/core/utils/vue';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+defineEmits<InputEmits>();
+const { inputClass, ...props } = defineProps<InputProps & { inputClass?: HTMLAttributes['class'] }>();
+
+const $input = componentRef<InputExpose>();
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedClasses = computed(() => classes('relative flex items-start', rootClasses.value));
+const renderedInputClasses = computed(() =>
+    classes(
+        'size-4 rounded text-primary hover:bg-gray-200 checked:hover:bg-primary/80 checked:border-0',
+        {
+            'border-gray-300 focus:ring-primary': !$input.value?.errors,
+            'border-red-400 border-2 focus:ring-red-600': $input.value?.errors,
+        },
+        inputClass,
+    ));
+</script>

package/src/components/ui/ConfirmModal.vue

@@ -0,0 +1,42 @@
+<template>
+    <Modal v-slot="{ close }" :title="title" persistent>
+        <Form :form="form" @submit="close([true, form.data()])">
+            <AGMarkdown :text="message" :actions="actions" />
+
+            <ul v-if="checkboxes" class="mt-4 flex flex-col text-sm text-gray-600">
+                <li v-for="(checkbox, name) of checkboxes" :key="name">
+                    <label class="flex items-center">
+                        <input
+                            v-model="form[name]"
+                            type="checkbox"
+                            :required="checkbox.required"
+                            class="border-primary text-primary hover:bg-primary/10 hover:checked:bg-primary/80 focus:ring-primary focus-visible:ring-primary rounded border-2"
+                        >
+                        <span class="ml-1.5">{{ checkbox.label }}</span>
+                    </label>
+                </li>
+            </ul>
+
+            <div class="mt-4 flex flex-row-reverse gap-2">
+                <Button :variant="acceptVariant" submit>
+                    {{ renderedAcceptText }}
+                </Button>
+                <Button v-if="!required" :variant="cancelVariant" @click="close(false)">
+                    {{ renderedCancelText }}
+                </Button>
+            </div>
+        </Form>
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import Form from '@aerogel/core/components/ui/Form.vue';
+import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.vue';
+import Button from '@aerogel/core/components/ui/Button.vue';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+import { useConfirmModal } from '@aerogel/core/components/contracts/ConfirmModal';
+import type { ConfirmModalProps } from '@aerogel/core/components/contracts/ConfirmModal';
+
+const { cancelVariant = 'secondary', ...props } = defineProps<ConfirmModalProps>();
+const { form, renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+</script>

package/src/components/ui/ErrorReportModal.vue

@@ -0,0 +1,62 @@
+<template>
+    <Modal wrapper-class="p-0 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="report"
+                        :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="report" class="gap-0.5" />
+            </h2>
+            <AGMarkdown v-if="report.description" :text="report.description" class="text-gray-600" />
+        </div>
+        <div class="-mt-2 max-h-[80vh] 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 AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.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 { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
+
+const props = defineProps<ErrorReportModalProps>();
+
+const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
+</script>

package/src/components/{modals/AGErrorReportModalButtons.vue → ui/ErrorReportModalButtons.vue}

@@ -1,15 +1,17 @@
 <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"
+        <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)"
-                :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>
+                <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>
@@ -21,20 +23,27 @@ import IconGitHub from '~icons/mdi/github';
 
 import { computed } from 'vue';
 import { stringExcerpt, tap } from '@noeldemartin/utils';
+import type { Component } from 'vue';
 
-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 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';
 
-import AGButton from '../forms/AGButton.vue';
-import type { IAGErrorReportModalButtonsDefaultSlotProps } from './AGErrorReportModal';
+interface ErrorReportModalButtonsDefaultSlotProps {
+    id: string;
+    description: string;
+    iconComponent: Component;
+    url?: string;
+    handler?(): void;
+}
 
-const props = defineProps({
-    report: requiredObjectProp<ErrorReport>(),
-});
+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(() => {
@@ -94,8 +103,8 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ],
-        (reportButtons: IAGErrorReportModalButtonsDefaultSlotProps[]) => {
+        ] as ErrorReportModalButtonsDefaultSlotProps[],
+        (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;
             }

package/src/components/ui/ErrorReportModalTitle.vue

@@ -0,0 +1,24 @@
+<template>
+    <AGMarkdown :text="text" inline />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import AGMarkdown from '@aerogel/core/components/lib/AGMarkdown.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,52 @@
+<template>
+    <HeadlessInput
+        ref="$input"
+        :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 } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import { classes } from '@aerogel/core/components/utils';
+import { useInputAttrs } from '@aerogel/core/utils/composition/forms';
+import { componentRef } from '@aerogel/core/utils/vue';
+import type { InputEmits, InputExpose, 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 = componentRef<InputExpose>();
+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',
+        {
+            'text-gray-900 shadow-2xs ring-gray-300 placeholder:text-gray-400': !$input.value?.errors,
+            'hover:ring-1 hover:ring-primary/80 hover:ring-inset focus:ring-primary': !$input.value?.errors,
+            'pr-10 text-red-900 ring-red-300 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';
+
+const props = defineProps<Omit<ButtonProps, 'variant'>>();
+</script>

package/src/components/ui/LoadingModal.vue

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