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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.ea2e864c719d0a4d01b04729a9b681c0e9c85ea7",
+    "version": "0.0.0-next.eb6fcafb87cdccbc72933f616799ca3124d1eca8",
     "type": "module",
     "sideEffects": false,
     "exports": {

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;

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/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/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,7 +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/settings/Debug.vue

@@ -1,39 +1,14 @@
 <template>
-    <div class="mt-4 flex flex-row">
-        <div class="flex-grow">
-            <h3 id="debug-setting" class="text-base font-semibold">
-                {{ $td('settings.debug', 'Debugging') }}
-            </h3>
-            <Markdown
-                lang-key="settings.debugDescription"
-                lang-default="Enable debugging with [Eruda](https://eruda.liriliri.io/)."
-                class="mt-1 text-sm text-gray-500"
-            />
-        </div>
-
-        <Switch v-model="enabled" aria-labelledby="debug-setting" />
-    </div>
+    <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 { ref, watchEffect } from 'vue';
-import type Eruda from 'eruda';
-
+import Setting from '@aerogel/core/components/ui/Setting.vue';
 import Switch from '@aerogel/core/components/ui/Switch.vue';
-import Markdown from '@aerogel/core/components/ui/Markdown.vue';
-
-let eruda: typeof Eruda | null = null;
-const enabled = ref(false);
-
-watchEffect(async () => {
-    if (!enabled.value) {
-        eruda?.destroy();
-
-        return;
-    }
-
-    eruda ??= (await import('eruda')).default;
-
-    eruda.init();
-});
 </script>

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>>
         >();
     });
 

package/src/forms/FormController.ts

@@ -2,31 +2,32 @@ import { computed, nextTick, reactive, readonly, ref } from 'vue';
 import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
-import { validate } from './validation';
+import { validate, validateType } from './validation';
 
-export const __objectType: unique symbol = Symbol();
+export const __valueType: unique symbol = Symbol();
 
 export interface FormFieldDefinition<
     TType extends FormFieldType = FormFieldType,
     TRules extends string = string,
-    TObjectType = object,
+    TValueType = unknown,
 > {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
-    [__objectType]?: TObjectType;
+    values?: readonly TValueType[];
+    [__valueType]?: TValueType;
 }
 
-export type FormFieldType = 'string' | 'number' | 'boolean' | 'object' | 'date';
+export type FormFieldType = 'string' | 'enum' | 'number' | 'boolean' | 'object' | 'date';
 export type FormFieldValue = GetFormFieldValue<FormFieldType>;
 export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
 
 export type FormData<T> = {
-    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TObjectType>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TValueType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType, TObjectType>
-            : GetFormFieldValue<TType, TObjectType> | null
+            ? GetFormFieldValue<TType, TValueType>
+            : GetFormFieldValue<TType, TValueType> | null
         : never;
 };
 
@@ -34,19 +35,21 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType, TObjectType = object> = TType extends 'string'
+export type GetFormFieldValue<TType, TValueType = unknown> = TType extends 'string'
     ? string
     : TType extends 'number'
       ? number
       : TType extends 'boolean'
         ? boolean
-        : TType extends 'object'
-          ? TObjectType extends object
-              ? TObjectType
-              : object
-          : TType extends 'date'
-            ? Date
-            : never;
+        : TType extends 'enum'
+          ? TValueType
+          : TType extends 'object'
+            ? TValueType extends object
+                ? TValueType
+                : object
+            : TType extends 'date'
+              ? Date
+              : never;
 
 const validForms: WeakMap<FormController, ComputedRef<boolean>> = new WeakMap();
 
@@ -109,6 +112,10 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         return this._fields[field]?.rules?.split('|') ?? [];
     }
 
+    public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
+        return this._fields[field]?.type ?? null;
+    }
+
     public data(): FormData<Fields> {
         return { ...this._data };
     }
@@ -192,6 +199,8 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
         const value = this._data[name];
         const rules = definition.rules?.split('|') ?? [];
 
+        errors.push(...validateType(value, definition));
+
         for (const rule of rules) {
             if (rule !== 'required' && (value === null || value === undefined)) {
                 continue;

package/src/forms/utils.ts

@@ -16,6 +16,19 @@ export function dateInput(defaultValue?: Date, options: { rules?: string } = {})
     };
 }
 
+export function enumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
+    options: { rules?: string } = {},
+): FormFieldDefinition<'enum', string, T> {
+    return {
+        default: defaultValue,
+        type: 'enum',
+        rules: options.rules,
+        values,
+    };
+}
+
 export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
@@ -32,6 +45,18 @@ export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'dat
     };
 }
 
+export function requiredEnumInput<const T extends string>(
+    values: readonly T[],
+    defaultValue?: T,
+): FormFieldDefinition<'enum', 'required', T> {
+    return {
+        default: defaultValue,
+        type: 'enum',
+        rules: 'required',
+        values,
+    };
+}
+
 export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,

package/src/forms/validation.ts

@@ -1,9 +1,32 @@
 import { arrayFrom } from '@noeldemartin/utils';
 
+import type { FormFieldDefinition } from '@aerogel/core/forms/FormController';
+
 const builtInRules: Record<string, FormFieldValidator> = {
     required: (value) => (value ? undefined : 'required'),
 };
 
+function isValidType(value: unknown, definition: FormFieldDefinition): boolean {
+    if (value === undefined || value === null) {
+        return true;
+    }
+
+    switch (definition.type) {
+        case 'string':
+            return typeof value === 'string';
+        case 'enum':
+            return !!definition.values?.includes(value);
+        case 'number':
+            return typeof value === 'number';
+        case 'boolean':
+            return typeof value === 'boolean';
+        case 'date':
+            return value instanceof Date;
+        case 'object':
+            return typeof value === 'object';
+    }
+}
+
 export type FormFieldValidator<T = unknown> = (value: T) => string | string[] | undefined;
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
@@ -12,6 +35,14 @@ export function defineFormValidationRule<T>(rule: string, validator: FormFieldVa
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
+    if (isValidType(value, definition)) {
+        return [];
+    }
+
+    return ['invalid_value'];
+}
+
 export function validate(value: unknown, rule: string): string[] {
     const errors = validators[rule]?.(value);
 

package/src/index.css

@@ -21,6 +21,9 @@
 
     --color-background: oklch(1 0 0);
     --color-links: var(--color-primary);
+
+    --breakpoint-content: var(--breakpoint-md);
+    --spacing-edge: 1rem;
 }
 
 .clickable {