@aerogel/core 0.0.0-next.9a1c5ba39a454b316eba36ec7bdf579fed3d95d2 → 0.0.0-next.9e0c0bbdcff5db68a1087ef53cbdc0f53299f6bb

package/src/components/index.ts

@@ -1,13 +1,8 @@
-import AGAppLayout from './AGAppLayout.vue';
-import AGAppOverlays from './AGAppOverlays.vue';
+export { default as AppLayout } from './AppLayout.vue';
+export { default as AppModals } from './AppModals.vue';
+export { default as AppOverlays } from './AppOverlays.vue';
+export { default as AppToasts } from './AppToasts.vue';
 
-export { AGAppLayout, AGAppOverlays };
-
-export * from './composition';
-export * from './constants';
 export * from './contracts';
-export * from './forms';
 export * from './headless';
-export * from './lib';
-export * from './modals';
-export * from './snackbars';
+export * from './ui';

package/src/components/ui/AdvancedOptions.vue

@@ -0,0 +1,18 @@
+<template>
+    <details class="group">
+        <summary
+            class="-ml-2 flex w-[max-content] cursor-pointer items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+        >
+            <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
+            <span>{{ $td('ui.advancedOptions', 'Advanced options') }}</span>
+        </summary>
+
+        <div class="pt-2 pl-4">
+            <slot />
+        </div>
+    </details>
+</template>
+
+<script setup lang="ts">
+import IconCheveronRight from '~icons/zondicons/cheveron-right';
+</script>

package/src/components/ui/AlertModal.vue

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

package/src/components/ui/Button.vue

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

package/src/components/ui/Checkbox.vue

@@ -0,0 +1,56 @@
+<template>
+    <HeadlessInput
+        ref="$inputRef"
+        :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="renderedLabelClasses">
+            <HeadlessInputLabel class="text-gray-900">
+                <slot />
+            </HeadlessInputLabel>
+            <HeadlessInputError class="text-red-600" />
+        </div>
+        <div v-else-if="label" :class="renderedLabelClasses">
+            <HeadlessInputLabel class="text-gray-900" />
+            <HeadlessInputError class="text-red-600" />
+        </div>
+    </HeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { computed, useTemplateRef } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessInput from '@aerogel/core/components/headless/HeadlessInput.vue';
+import HeadlessInputError from '@aerogel/core/components/headless/HeadlessInputError.vue';
+import HeadlessInputInput from '@aerogel/core/components/headless/HeadlessInputInput.vue';
+import HeadlessInputLabel from '@aerogel/core/components/headless/HeadlessInputLabel.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 { inputClass, labelClass, ...props } = defineProps<
+    InputProps & { inputClass?: HTMLAttributes['class']; labelClass?: HTMLAttributes['class'] }
+>();
+
+const $input = useTemplateRef('$inputRef');
+const [inputAttrs, rootClasses] = useInputAttrs();
+const renderedClasses = computed(() => classes('relative flex items-start', rootClasses.value));
+const renderedInputClasses = computed(() =>
+    classes(
+        'size-4 rounded text-primary-600 not-checked:hover:bg-gray-200 checked:hover:text-primary-500 checked:border-0',
+        {
+            'border-gray-300 focus:ring-primary-600': !$input.value?.errors,
+            'border-red-400 border-2 focus:ring-red-600': $input.value?.errors,
+        },
+        inputClass,
+    ));
+const renderedLabelClasses = computed(() => classes('ml-2 text-sm leading-6', labelClass));
+</script>

package/src/components/ui/ConfirmModal.vue

@@ -0,0 +1,42 @@
+<template>
+    <Modal v-slot="{ close }" :title persistent>
+        <Form :form @submit="close([true, form.data()])">
+            <Markdown :text="message" :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-600 text-primary-600 hover:bg-primary-50 hover:checked:bg-primary-500 focus:ring-primary-600 focus-visible:ring-primary-600 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 Markdown from '@aerogel/core/components/ui/Markdown.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/DropdownMenu.vue

@@ -0,0 +1,32 @@
+<template>
+    <DropdownMenuRoot>
+        <DropdownMenuTrigger>
+            <slot />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+            <slot name="options">
+                <DropdownMenuOptions />
+            </slot>
+        </DropdownMenuPortal>
+    </DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'reka-ui';
+import { computed, provide } from 'vue';
+import type { AcceptRefs } from '@aerogel/core/utils';
+
+import type { DropdownMenuExpose, DropdownMenuProps } from '@aerogel/core/components/contracts/DropdownMenu';
+
+import DropdownMenuOptions from './DropdownMenuOptions.vue';
+
+const { align, side, options } = defineProps<DropdownMenuProps>();
+const expose = {
+    align,
+    side,
+    options: computed(() => options?.filter(Boolean)),
+} satisfies AcceptRefs<DropdownMenuExpose>;
+
+provide('dropdown-menu', expose);
+defineExpose(expose);
+</script>

package/src/components/ui/DropdownMenuOption.vue

@@ -0,0 +1,14 @@
+<template>
+    <DropdownMenuItem
+        class="flex w-full items-center gap-2 rounded-lg px-2 py-2 text-sm text-gray-900 data-[highlighted]:bg-gray-100"
+        @select="$emit('select')"
+    >
+        <slot />
+    </DropdownMenuItem>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuItem } from 'reka-ui';
+
+defineEmits<{ select: [] }>();
+</script>

package/src/components/ui/DropdownMenuOptions.vue

@@ -0,0 +1,27 @@
+<template>
+    <DropdownMenuContent
+        class="gap-y-0.5 rounded-lg bg-white p-1.5 shadow-lg ring-1 ring-black/5"
+        :align="dropdownMenu.align"
+        :side="dropdownMenu.side"
+    >
+        <slot>
+            <DropdownMenuOption v-for="(option, key) in dropdownMenu.options" :key @select="option.click">
+                {{ option.label }}
+            </DropdownMenuOption>
+        </slot>
+    </DropdownMenuContent>
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuContent } from 'reka-ui';
+
+import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { DropdownMenuExpose } from '@aerogel/core/components/contracts/DropdownMenu';
+
+import DropdownMenuOption from './DropdownMenuOption.vue';
+
+const dropdownMenu = injectReactiveOrFail<DropdownMenuExpose>(
+    'dropdown-menu',
+    '<DropdownMenuOptions> must be a child of a <DropdownMenu>',
+);
+</script>

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/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,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 class="gap-0.5" />
+            </h2>
+            <Markdown 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 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 { 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"
+                @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" />
-            </AGButton>
+            </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 '@aerogel/core/services/App';
+import Button from '@aerogel/core/components/ui/Button.vue';
 import UI from '@aerogel/core/ui/UI';
-import { requiredObjectProp } from '@aerogel/core/utils/vue';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
-import type { ComponentProps } from '@aerogel/core/utils/vue';
 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;
+    click?(): 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(() => {
@@ -66,19 +75,17 @@ const buttons = computed(() =>
                 id: 'clipboard',
                 description: 'Copy to clipboard',
                 iconComponent: IconCopy,
-                async handler() {
+                async click() {
                     await navigator.clipboard.writeText(`${summary.value}\n\n${props.report.details}`);
 
-                    UI.showSnackbar(
-                        translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'),
-                    );
+                    UI.toast(translateWithDefault('errors.copiedToClipboard', 'Debug information copied to clipboard'));
                 },
             },
             {
                 id: 'console',
                 description: 'Log to console',
                 iconComponent: IconConsole,
-                handler() {
+                click() {
                     const error = props.report.error ?? props.report;
 
                     (window as { error?: unknown }).error = error;
@@ -86,7 +93,7 @@ const buttons = computed(() =>
                     // eslint-disable-next-line no-console
                     console.error(error);
 
-                    UI.showSnackbar(
+                    UI.toast(
                         translateWithDefault(
                             'errors.addedToConsole',
                             'You can now use the **error** variable in the console',
@@ -94,7 +101,7 @@ const buttons = computed(() =>
                     );
                 },
             },
-        ] as IAGErrorReportModalButtonsDefaultSlotProps[],
+        ] as ErrorReportModalButtonsDefaultSlotProps[],
         (reportButtons) => {
             if (!githubReportUrl.value) {
                 return;

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/{forms/AGForm.vue → ui/Form.vue}

@@ -7,19 +7,18 @@
 <script setup lang="ts">
 import { provide, watchEffect } from 'vue';
 
-import { objectProp } from '@aerogel/core/utils/vue';
-import type Form from '@aerogel/core/forms/Form';
+import type FormController from '@aerogel/core/forms/FormController';
 
 let offSubmit: (() => void) | undefined;
-const props = defineProps({ form: objectProp<Form>() });
+const { form } = defineProps<{ form?: FormController }>();
 const emit = defineEmits<{ submit: [] }>();
 
 watchEffect((onCleanup) => {
     offSubmit?.();
-    offSubmit = props.form?.on('submit', () => emit('submit'));
+    offSubmit = form?.on('submit', () => emit('submit'));
 
     onCleanup(() => offSubmit?.());
 });
 
-provide('form', props.form);
+provide('form', form);
 </script>