@aerogel/core 0.0.0-next.e4c0d5bd2801fbe93545477ea515af53df69b522 → 0.0.0-next.eb6fcafb87cdccbc72933f616799ca3124d1eca8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.e4c0d5bd2801fbe93545477ea515af53df69b522",
+    "version": "0.0.0-next.eb6fcafb87cdccbc72933f616799ca3124d1eca8",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -33,6 +33,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",
+        "eruda": "^3.4.1",
         "marked": "^15.0.7",
         "pinia": "^2.1.6",
         "reka-ui": "^2.2.0",

package/src/components/contracts/AlertModal.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue';
 
-import { translateWithDefault } from '@aerogel/core/lang';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
 import type { ModalExpose } from '@aerogel/core/components/contracts/Modal';
 
 export interface AlertModalProps {

package/src/components/contracts/DropdownMenu.ts

@@ -15,11 +15,11 @@ export type DropdownMenuOptionData = {
 export interface DropdownMenuProps {
     align?: DropdownMenuContentProps['align'];
     side?: DropdownMenuContentProps['side'];
-    options?: Falsifiable<DropdownMenuOptionData>[];
+    options?: readonly Falsifiable<DropdownMenuOptionData>[];
 }
 
 export interface DropdownMenuExpose {
     align?: DropdownMenuContentProps['align'];
     side?: DropdownMenuContentProps['side'];
-    options?: DropdownMenuOptionData[];
+    options?: readonly DropdownMenuOptionData[];
 }

package/src/components/contracts/Select.ts

@@ -18,7 +18,7 @@ export interface HasSelectOptionLabel {
 
 export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputProps<T> {
     as?: AsTag | Component;
-    options?: T[];
+    options?: readonly T[];
     placeholder?: string;
     renderOption?: (option: T) => string;
     compareOptions?: (a: T, b: T) => boolean;
@@ -31,7 +31,7 @@ export interface SelectProps<T extends Nullable<FormFieldValue> = Nullable<FormF
 export interface SelectEmits<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputEmits<T> {}
 
 export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<FormFieldValue>> extends InputExpose<T> {
-    options: ComputedRef<Nullable<SelectOptionData[]>>;
+    options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
     selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
     labelClass?: HTMLAttributes['class'];

package/src/components/headless/HeadlessInputInput.vue

@@ -3,8 +3,8 @@
         :id="input.id"
         ref="$inputRef"
         :name
-        :type
         :checked
+        :type="renderedType"
         :required="input.required ?? undefined"
         :aria-invalid="input.errors ? 'true' : 'false'"
         :aria-describedby="
@@ -15,18 +15,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, useTemplateRef, watchEffect } from 'vue';
+import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
+import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
 
-const { type = 'text' } = defineProps<{ type?: string }>();
+const { type } = defineProps<{ type?: string }>();
 const $input = useTemplateRef('$inputRef');
 const input = injectReactiveOrFail<InputExpose>('input', '<HeadlessInputInput> must be a child of a <HeadlessInput>');
+const form = inject<FormController | null>('form', null);
 const name = computed(() => input.name ?? undefined);
 const value = computed(() => input.value);
+const renderedType = computed(() => {
+    if (type) {
+        return type;
+    }
+
+    const fieldType = (name.value && form?.getFieldType(name.value)) ?? '';
+
+    return ['text', 'email', 'number', 'tel', 'url'].includes(fieldType) ? fieldType : 'text';
+});
 const checked = computed(() => {
     if (type !== 'checkbox') {
         return;
@@ -64,8 +75,8 @@ watchEffect(() => {
         return;
     }
 
-    if (type === 'date') {
-        $input.value.valueAsDate = value.value as Date;
+    if (type === 'date' && value.value instanceof Date) {
+        $input.value.valueAsDate = value.value;
 
         return;
     }

package/src/components/headless/HeadlessSwitch.vue

@@ -0,0 +1,96 @@
+<template>
+    <div :class="rootClass">
+        <label v-if="label" :for="expose.id" :class="labelClass">
+            {{ label }}
+        </label>
+        <SwitchRoot
+            :id="expose.id"
+            :name
+            :model-value="expose.value.value"
+            v-bind="$attrs"
+            :class="inputClass"
+            @update:model-value="$emit('update:modelValue', $event)"
+        >
+            <SwitchThumb :class="thumbClass" />
+        </SwitchRoot>
+    </div>
+</template>
+
+<script setup lang="ts" generic="T extends boolean = boolean">
+import { SwitchRoot, SwitchThumb } from 'reka-ui';
+import { computed, inject, readonly, watchEffect } from 'vue';
+import { uuid } from '@noeldemartin/utils';
+import type { HTMLAttributes } from 'vue';
+
+import type FormController from '@aerogel/core/forms/FormController';
+import type { FormFieldValue } from '@aerogel/core/forms/FormController';
+import type { InputEmits, InputExpose, InputProps } from '@aerogel/core/components/contracts/Input';
+
+defineOptions({ inheritAttrs: false });
+
+const {
+    name,
+    label,
+    description,
+    modelValue,
+    class: rootClass,
+} = defineProps<
+    InputProps<T> & {
+        class?: HTMLAttributes['class'];
+        labelClass?: HTMLAttributes['class'];
+        inputClass?: HTMLAttributes['class'];
+        thumbClass?: HTMLAttributes['class'];
+    }
+>();
+const emit = defineEmits<InputEmits>();
+const form = inject<FormController | null>('form', null);
+const errors = computed(() => {
+    if (!form || !name) {
+        return null;
+    }
+
+    return form.errors[name] ?? null;
+});
+
+const expose = {
+    id: `switch-${uuid()}`,
+    name: computed(() => name),
+    label: computed(() => label),
+    description: computed(() => description),
+    value: computed(() => {
+        if (form && name) {
+            return form.getFieldValue(name) as boolean;
+        }
+
+        return modelValue;
+    }),
+    errors: readonly(errors),
+    required: computed(() => {
+        if (!name || !form) {
+            return;
+        }
+
+        return form.getFieldRules(name).includes('required');
+    }),
+    update(value) {
+        if (form && name) {
+            form.setFieldValue(name, value as FormFieldValue);
+
+            return;
+        }
+
+        emit('update:modelValue', value);
+    },
+} satisfies InputExpose;
+
+defineExpose(expose);
+
+watchEffect(() => {
+    if (!description && !errors.value) {
+        return;
+    }
+
+    // eslint-disable-next-line no-console
+    console.warn('Errors and description not implemented in <HeadlessSwitch>');
+});
+</script>

package/src/components/headless/index.ts

@@ -16,4 +16,5 @@ export { default as HeadlessSelectOption } from './HeadlessSelectOption.vue';
 export { default as HeadlessSelectOptions } from './HeadlessSelectOptions.vue';
 export { default as HeadlessSelectTrigger } from './HeadlessSelectTrigger.vue';
 export { default as HeadlessSelectValue } from './HeadlessSelectValue.vue';
+export { default as HeadlessSwitch } from './HeadlessSwitch.vue';
 export { default as HeadlessToast } from './HeadlessToast.vue';

package/src/components/ui/Button.vue

@@ -88,6 +88,21 @@ const renderedClasses = computed(() => variantClasses<Variants<Pick<ButtonProps,
                 disabled: false,
                 class: 'hover:underline',
             },
+            {
+                variant: 'link',
+                size: 'small',
+                class: 'leading-6',
+            },
+            {
+                variant: 'link',
+                size: 'default',
+                class: 'leading-8',
+            },
+            {
+                variant: 'link',
+                size: 'large',
+                class: 'leading-10',
+            },
         ],
         defaultVariants: {
             variant: 'default',

package/src/components/ui/Input.vue

@@ -48,8 +48,8 @@ const renderedInputClasses = computed(() =>
         '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-300 placeholder:text-gray-400': !$input.value?.errors,
-            'pr-10 text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500': $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,
     ));

package/src/components/ui/Modal.vue

@@ -27,14 +27,22 @@
 
             <HeadlessModalTitle
                 v-if="title"
-                class="px-4 pt-5 pb-2 text-base font-semibold text-gray-900"
-                :class="{ 'sr-only': titleHidden }"
+                class="px-4 pt-5 text-base font-semibold text-gray-900"
+                :class="{
+                    'sr-only': titleHidden,
+                    'pb-0': description && !descriptionHidden,
+                    'pb-2': !description || descriptionHidden,
+                }"
             >
                 <Markdown :text="title" inline />
             </HeadlessModalTitle>
 
-            <HeadlessModalDescription v-if="description" :class="{ 'sr-only': descriptionHidden }">
-                <Markdown :text="description" class="mt-1 text-sm leading-6 text-gray-500" />
+            <HeadlessModalDescription
+                v-if="description"
+                class="px-4 pt-1 pb-2"
+                :class="{ 'sr-only': descriptionHidden }"
+            >
+                <Markdown :text="description" class="text-sm leading-6 text-gray-500" />
             </HeadlessModalDescription>
 
             <div :class="renderedContentClass">

package/src/components/ui/SelectLabel.vue

@@ -7,11 +7,15 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
 
 import HeadlessSelectLabel from '@aerogel/core/components/headless/HeadlessSelectLabel.vue';
 import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>('select', '<SelectLabel> must be a child of a <Select>');
-const renderedClasses = computed(() => classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass));
+const renderedClasses = computed(() =>
+    classes('block text-sm leading-6 font-medium text-gray-900', select.labelClass, rootClasses));
 </script>

package/src/components/ui/Setting.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="mt-4 flex" :class="{ 'flex-col': layout === 'vertical' }">
+        <div class="flex-grow">
+            <h3 :id="titleId" class="text-base font-semibold">
+                {{ title }}
+            </h3>
+            <Markdown v-if="description" :text="description" class="mt-1 text-sm text-gray-500" />
+        </div>
+
+        <div :class="renderedRootClass">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import { classes } from '@aerogel/core/utils';
+
+const { layout = 'horizontal', class: rootClass } = defineProps<{
+    title: string;
+    titleId?: string;
+    description?: string;
+    class?: HTMLAttributes['class'];
+    layout?: 'vertical' | 'horizontal';
+}>();
+const renderedRootClass = computed(() => classes(rootClass, 'flex flex-col justify-center gap-1'));
+</script>

package/src/components/ui/StartupCrash.vue

@@ -1,31 +1,76 @@
 <template>
     <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!') }}
+        <div class="flex flex-col items-center p-8">
+            <i-majesticons-exclamation class="size-20 text-red-600" />
+            <h1 class="mt-0 mb-0 text-center text-4xl font-medium text-red-600">
+                {{ $td('startupCrash.title', 'Oops, something went wrong!') }}
             </h1>
             <Markdown
                 :text="
                     $td(
                         'startupCrash.message',
-                        'Something failed trying to start the application.\n\nHere\'s some things you can do:'
+                        'There was a problem starting the application, but here\'s some things you can do:'
                     )
                 "
                 class="mt-4 text-center"
             />
-            <div class="mt-4 flex flex-col space-y-4">
+            <div
+                class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2 [&_button]:justify-start sm:[&_button]:size-32 sm:[&_button]:flex-col sm:[&_button]:justify-center [&_svg]:size-6 sm:[&_svg]:size-8"
+            >
                 <Button variant="danger" @click="$app.reload()">
+                    <IconRefresh />
                     {{ $td('startupCrash.reload', 'Try again') }}
                 </Button>
                 <Button variant="danger" @click="$errors.inspect($errors.startupErrors)">
+                    <IconBug />
                     {{ $td('startupCrash.inspect', 'View error details') }}
                 </Button>
+                <Button variant="danger" @click="purgeDevice()">
+                    <IconDelete />
+                    {{ $td('startupCrash.purge', 'Purge device') }}
+                </Button>
+                <Button variant="danger" @click="$errors.debug = !$errors.debug">
+                    <IconFrameInspect />
+                    {{ $td('startupCrash.debug', 'Toggle debugging') }}
+                </Button>
             </div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import IconBug from '~icons/material-symbols/bug-report';
+import IconDelete from '~icons/material-symbols/delete-forever-rounded';
+import IconFrameInspect from '~icons/material-symbols/frame-inspect';
+import IconRefresh from '~icons/material-symbols/refresh-rounded';
+
+import App from '@aerogel/core/services/App';
 import Button from '@aerogel/core/components/ui/Button.vue';
+import Markdown from '@aerogel/core/components/ui/Markdown.vue';
+import Storage from '@aerogel/core/services/Storage';
+import UI from '@aerogel/core/ui/UI';
+import { translateWithDefault } from '@aerogel/core/lang/utils';
+
+async function purgeDevice() {
+    const confirmed = await UI.confirm(
+        translateWithDefault('startupCrash.purgeConfirmTitle', 'Delete everything?'),
+        translateWithDefault(
+            'startupCrash.purgeConfirmMessage',
+            'If the problem persists, one drastic solution may be to wipe the storage in this device ' +
+                'to start from scratch. However, keep in mind that **all the data that you haven\'t ' +
+                'synchronized will be deleted forever**.\n\nDo you still want to proceed?',
+        ),
+        {
+            acceptVariant: 'danger',
+            acceptText: translateWithDefault('startupCrash.purgeConfirmAccept', 'Purge device'),
+        },
+    );
+
+    if (!confirmed) {
+        return;
+    }
+
+    await Storage.purge();
+    await App.reload();
+}
 </script>

package/src/components/ui/Switch.vue

@@ -0,0 +1,11 @@
+<template>
+    <HeadlessSwitch
+        class="flex flex-row items-center gap-1"
+        input-class="disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-gray-200 relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focusdisabled:opacity-50 disabled:cursor-not-allowed :ring-2 focus:ring-primary-600 focus:ring-offset-2 focus:outline-hidden"
+        thumb-class="data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 pointer-events-none inline-block size-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out"
+    />
+</template>
+
+<script setup lang="ts">
+import HeadlessSwitch from '@aerogel/core/components/headless/HeadlessSwitch.vue';
+</script>

package/src/components/ui/TextArea.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">
+            <HeadlessInputTextArea 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 HeadlessInputTextArea from '@aerogel/core/components/headless/HeadlessInputTextArea.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/index.ts

@@ -27,6 +27,9 @@ export { default as SelectLabel } from './SelectLabel.vue';
 export { default as SelectOption } from './SelectOption.vue';
 export { default as SelectOptions } from './SelectOptions.vue';
 export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as Setting } from './Setting.vue';
 export { default as SettingsModal } from './SettingsModal.vue';
 export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Switch } from './Switch.vue';
+export { default as TextArea } from './TextArea.vue';
 export { default as Toast } from './Toast.vue';

package/src/errors/Errors.state.ts

@@ -22,6 +22,7 @@ export default defineServiceState({
     initialState: {
         logs: [] as ErrorReportLog[],
         startupErrors: [] as ErrorReport[],
+        debug: false,
     },
     computed: {
         hasErrors: ({ logs }) => logs.length > 0,

package/src/errors/Errors.ts

@@ -1,4 +1,6 @@
 import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
+import { watchEffect } from 'vue';
+import type Eruda from 'eruda';
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
@@ -13,6 +15,7 @@ export class ErrorsService extends Service {
 
     public forceReporting: boolean = false;
     private enabled: boolean = true;
+    private eruda: typeof Eruda | null = null;
 
     public enable(): void {
         this.enabled = true;
@@ -91,6 +94,19 @@ export class ErrorsService extends Service {
         this.setState({ logs: [log].concat(this.logs) });
     }
 
+    public reportDevelopmentError(error: ErrorSource, message?: string): void {
+        if (!isDevelopment()) {
+            return;
+        }
+
+        if (message) {
+            // eslint-disable-next-line no-console
+            console.warn(message);
+        }
+
+        this.logError(error);
+    }
+
     public see(report: ErrorReport): void {
         this.setState({
             logs: this.logs.map((log) => {
@@ -106,12 +122,17 @@ export class ErrorsService extends Service {
         });
     }
 
-    public seeAll(): void {
-        this.setState({
-            logs: this.logs.map((log) => ({
-                ...log,
-                seen: true,
-            })),
+    protected override async boot(): Promise<void> {
+        watchEffect(async () => {
+            if (!this.debug) {
+                this.eruda?.destroy();
+
+                return;
+            }
+
+            this.eruda ??= (await import('eruda')).default;
+
+            this.eruda.init();
         });
     }
 

package/src/errors/index.ts

@@ -1,9 +1,11 @@
-import type { App } from 'vue';
+import type { App as AppInstance } from 'vue';
 
+import App from '@aerogel/core/services/App';
 import { bootServices } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
 
 import Errors from './Errors';
+import settings from './settings';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
 
 export * from './utils';
@@ -19,7 +21,7 @@ const frameworkHandler: ErrorHandler = (error) => {
     return true;
 };
 
-function setUpErrorHandler(app: App, baseHandler: ErrorHandler = () => false): void {
+function setUpErrorHandler(app: AppInstance, baseHandler: ErrorHandler = () => false): void {
     const errorHandler: ErrorHandler = (error) => baseHandler(error) || frameworkHandler(error);
 
     app.config.errorHandler = errorHandler;
@@ -34,6 +36,8 @@ export default definePlugin({
     async install(app, options) {
         setUpErrorHandler(app, options.handleError);
 
+        settings.forEach((setting) => App.addSetting(setting));
+
         await bootServices(app, services);
     },
 });

package/src/errors/settings/Debug.vue

@@ -0,0 +1,14 @@
+<template>
+    <Setting
+        title-id="debug-setting"
+        :title="$td('settings.debug', 'Debugging')"
+        :description="$td('settings.debugDescription', 'Enable debugging with [Eruda](https://eruda.liriliri.io/).')"
+    >
+        <Switch v-model="$errors.debug" aria-labelledby="debug-setting" />
+    </Setting>
+</template>
+
+<script setup lang="ts">
+import Setting from '@aerogel/core/components/ui/Setting.vue';
+import Switch from '@aerogel/core/components/ui/Switch.vue';
+</script>

package/src/errors/settings/index.ts

@@ -0,0 +1,10 @@
+import { defineSettings } from '@aerogel/core/services';
+
+import Debug from './Debug.vue';
+
+export default defineSettings([
+    {
+        priority: 10,
+        component: Debug,
+    },
+]);

package/src/forms/FormController.test.ts

@@ -4,6 +4,7 @@ import type { Equals } from '@noeldemartin/utils';
 import type { Expect } from '@noeldemartin/testing';
 
 import {
+    enumInput,
     numberInput,
     objectInput,
     requiredObjectInput,
@@ -97,6 +98,7 @@ describe('FormController', () => {
             two: requiredStringInput(),
             three: objectInput(),
             four: requiredObjectInput<{ foo: string; bar?: number }>(),
+            five: enumInput(['foo', 'bar']),
         });
 
         tt<
@@ -104,6 +106,7 @@ describe('FormController', () => {
             | Expect<Equals<typeof form.two, string>>
             | Expect<Equals<typeof form.three, object | null>>
             | Expect<Equals<typeof form.four, { foo: string; bar?: number }>>
+            | Expect<Equals<typeof form.five, 'foo' | 'bar' | null>>
         >();
     });