@aerogel/core 0.0.0-next.aa6e27a9c197d1ee10c9fe018ee8c0fc6ff77767 → 0.0.0-next.abea39863ad0f7c484b8b1f365870e43e9bdd0ba

package/src/components/ui/SelectOptions.vue

@@ -1,31 +1,35 @@
 <template>
-    <HeadlessSelectOptions
-        class="z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden"
-    >
-        <slot>
-            <HeadlessSelectOption
-                v-for="option of select?.options ?? []"
-                :key="option.key"
-                :value="option.value"
-                class="group p-1 outline-none"
-            >
-                <div
-                    class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md px-2 py-1 select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
-                >
-                    <span class="text-sm">
-                        {{ option.label }}
-                    </span>
-                </div>
-            </HeadlessSelectOption>
+    <HeadlessSelectOptions :class="renderedClasses">
+        <slot v-if="select.options?.length">
+            <SelectOption v-for="option of select?.options ?? []" :key="option.key" :value="option.value">
+                {{ option.label }}
+            </SelectOption>
+        </slot>
+        <slot v-else>
+            <SelectOption disabled :value="null">
+                {{ $td('ui.selectEmpty', 'No options available') }}
+            </SelectOption>
         </slot>
     </HeadlessSelectOptions>
 </template>
 
 <script setup lang="ts">
-import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
 import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
-import { injectReactiveOrFail } from '@aerogel/core/utils';
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+import SelectOption from './SelectOption.vue';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+
 const select = injectReactiveOrFail<SelectExpose>('select', '<SelectOptions> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes(
+        'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
+        select.optionsClass,
+        rootClasses,
+    ));
 </script>

package/src/components/ui/SelectTrigger.vue

@@ -1,6 +1,6 @@
 <template>
     <HeadlessSelectTrigger :class="renderedClasses">
-        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-2" />
+        <HeadlessSelectValue class="col-start-1 row-start-1 truncate pr-6" />
         <IconCheveronDown class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" />
     </HeadlessSelectTrigger>
 </template>
@@ -14,7 +14,7 @@ import type { HTMLAttributes } from 'vue';
 import HeadlessSelectTrigger from '@aerogel/core/components/headless/HeadlessSelectTrigger.vue';
 import HeadlessSelectValue from '@aerogel/core/components/headless/HeadlessSelectValue.vue';
 import { injectReactiveOrFail } from '@aerogel/core/utils';
-import { classes } from '@aerogel/core/components/utils';
+import { classes } from '@aerogel/core/utils/classes';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
 const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
@@ -22,7 +22,7 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 const renderedClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
-        'focus:outline-primary grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        'focus:outline-primary-600 data-[state=open]:outline-primary-600 grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pr-2 pl-3 text-left text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
         { 'mt-1': select.label },
         rootClasses,
     ));

package/src/components/ui/SettingsModal.vue

@@ -1,51 +1,15 @@
 <template>
     <Modal :title="$td('settings.title', 'Settings')">
-        <Select
-            v-model="$lang.locale"
-            class="flex flex-col items-start md:flex-row"
-            as="div"
-            :options
-            :render-option="renderLocale"
-        >
-            <div class="grow">
-                <SelectLabel>
-                    {{ $td('settings.locale', 'Language') }}
-                </SelectLabel>
-                <Markdown
-                    lang-key="settings.localeDescription"
-                    lang-default="Choose the application's language."
-                    class="mt-1 text-sm text-gray-500"
-                />
-            </div>
-            <Button variant="ghost" :as="SelectTrigger" class="w-auto outline-none" />
-            <SelectOptions />
-        </Select>
+        <component :is="setting.component" v-for="(setting, key) in settings" :key />
     </Modal>
 </template>
 
 <script setup lang="ts">
-import Aerogel from 'virtual:aerogel';
-
+import { arraySorted } from '@noeldemartin/utils';
 import { computed } from 'vue';
 
-import Markdown from '@aerogel/core/components/ui/Markdown.vue';
-import Button from '@aerogel/core/components/ui/Button.vue';
+import App from '@aerogel/core/services/App';
 import Modal from '@aerogel/core/components/ui/Modal.vue';
-import Select from '@aerogel/core/components/ui/Select.vue';
-import SelectLabel from '@aerogel/core/components/ui/SelectLabel.vue';
-import SelectTrigger from '@aerogel/core/components/ui/SelectTrigger.vue';
-import SelectOptions from '@aerogel/core/components/ui/SelectOptions.vue';
-import { Lang, translateWithDefault } from '@aerogel/core/lang';
-
-const browserLocale = Lang.getBrowserLocale();
-const options = computed(() => [null, ...Lang.locales]);
 
-function renderLocale(locale: string | null): string {
-    return (
-        (locale && Aerogel.locales[locale]) ??
-        translateWithDefault('settings.localeDefault', '{locale} (default)', {
-            locale: Aerogel.locales[browserLocale] ?? browserLocale,
-        })
-    );
-}
+const settings = computed(() => arraySorted(App.settings, 'priority', 'desc'));
 </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/Toast.vue

@@ -13,30 +13,34 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
 
 import Button from '@aerogel/core/components/ui/Button.vue';
 import Markdown from '@aerogel/core/components/ui/Markdown.vue';
 import HeadlessToast from '@aerogel/core/components/headless/HeadlessToast.vue';
 import HeadlessToastAction from '@aerogel/core/components/headless/HeadlessToastAction.vue';
-import { computedVariantClasses } from '@aerogel/core/components/utils';
-import type { ToastProps } from '@aerogel/core/components/contracts/Toast';
-import type { Variants } from '@aerogel/core/components/utils';
+import { variantClasses } from '@aerogel/core/utils/classes';
+import type { ToastExpose, ToastProps } from '@aerogel/core/components/contracts/Toast';
+import type { Variants } from '@aerogel/core/utils/classes';
 
 const { class: baseClasses, variant = 'secondary' } = defineProps<ToastProps & { class?: HTMLAttributes['class'] }>();
-const renderedClasses = computedVariantClasses<Variants<Pick<ToastProps, 'variant'>>>(
-    { baseClasses, variant },
-    {
-        baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
-        variants: {
-            variant: {
-                secondary: 'bg-gray-900 text-white ring-black',
-                danger: 'bg-red-50 text-red-900 ring-red-100',
+const renderedClasses = computed(() =>
+    variantClasses<Variants<Pick<ToastProps, 'variant'>>>(
+        { baseClasses, variant },
+        {
+            baseClasses: 'flex items-center gap-2 rounded-md p-2 ring-1 shadow-lg border-gray-200',
+            variants: {
+                variant: {
+                    secondary: 'bg-gray-900 text-white ring-black',
+                    danger: 'bg-red-50 text-red-900 ring-red-100',
+                },
+            },
+            defaultVariants: {
+                variant: 'secondary',
             },
         },
-        defaultVariants: {
-            variant: 'secondary',
-        },
-    },
-);
+    ));
+
+defineExpose<ToastExpose>();
 </script>

package/src/components/ui/index.ts

@@ -4,7 +4,11 @@ export { default as Button } from './Button.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
+export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
+export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';
 export { default as EditableContent } from './EditableContent.vue';
+export { default as ErrorLogs } from './ErrorLogs.vue';
+export { default as ErrorLogsModal } from './ErrorLogsModal.vue';
 export { default as ErrorMessage } from './ErrorMessage.vue';
 export { default as ErrorReportModal } from './ErrorReportModal.vue';
 export { default as ErrorReportModalButtons } from './ErrorReportModalButtons.vue';
@@ -20,8 +24,10 @@ export { default as ProgressBar } from './ProgressBar.vue';
 export { default as PromptModal } from './PromptModal.vue';
 export { default as Select } from './Select.vue';
 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 SettingsModal } from './SettingsModal.vue';
 export { default as StartupCrash } from './StartupCrash.vue';
+export { default as Switch } from './Switch.vue';
 export { default as Toast } from './Toast.vue';

package/src/directives/measure.ts

@@ -3,6 +3,15 @@ import { tap } from '@noeldemartin/utils';
 
 const resizeObservers: WeakMap<HTMLElement, ResizeObserver> = new WeakMap();
 
+export type MeasureDirectiveValue =
+    | MeasureDirectiveListener
+    | {
+          css?: boolean;
+          watch?: boolean;
+      };
+
+export type MeasureDirectiveModifiers = 'css' | 'watch';
+
 export interface ElementSize {
     width: number;
     height: number;
@@ -10,11 +19,8 @@ export interface ElementSize {
 
 export type MeasureDirectiveListener = (size: ElementSize) => unknown;
 
-export default defineDirective({
-    mounted(element: HTMLElement, { value }) {
-        // TODO replace with argument when typed properly
-        const modifiers = { css: true, watch: true };
-
+export default defineDirective<MeasureDirectiveValue, MeasureDirectiveModifiers>({
+    mounted(element: HTMLElement, { value, modifiers }) {
         const listener = typeof value === 'function' ? (value as MeasureDirectiveListener) : null;
         const update = () => {
             const sizes = element.getBoundingClientRect();

package/src/errors/Errors.ts

@@ -2,11 +2,9 @@ import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
-import UI, { UIComponents } from '@aerogel/core/ui/UI';
+import UI from '@aerogel/core/ui/UI';
 import { translateWithDefault } from '@aerogel/core/lang/utils';
 import { Events } from '@aerogel/core/services';
-import type { ErrorReportModalProps } from '@aerogel/core/components/contracts/ErrorReportModal';
-import type { ModalComponent } from '@aerogel/core/ui/UI.state';
 
 import Service from './Errors.state';
 import type { ErrorReport, ErrorReportLog, ErrorSource } from './Errors.state';
@@ -24,18 +22,23 @@ export class ErrorsService extends Service {
         this.enabled = false;
     }
 
-    public async inspect(error: ErrorSource | ErrorReport[]): Promise<void> {
-        const reports = Array.isArray(error) ? (error as ErrorReport[]) : [await this.createErrorReport(error)];
-
-        if (reports.length === 0) {
+    public async inspect(error: ErrorSource | ErrorReport, reports?: ErrorReport[]): Promise<void>;
+    public async inspect(reports: ErrorReport[]): Promise<void>;
+    public async inspect(errorOrReports: ErrorSource | ErrorReport[], _reports?: ErrorReport[]): Promise<void> {
+        if (Array.isArray(errorOrReports) && errorOrReports.length === 0) {
             UI.alert(translateWithDefault('errors.inspectEmpty', 'Nothing to inspect!'));
 
             return;
         }
 
-        UI.openModal<ModalComponent<ErrorReportModalProps>>(UI.requireComponent(UIComponents.ErrorReportModal), {
-            reports,
-        });
+        const report = Array.isArray(errorOrReports)
+            ? (errorOrReports[0] as ErrorReport)
+            : this.isErrorReport(errorOrReports)
+                ? errorOrReports
+                : await this.createErrorReport(errorOrReports);
+        const reports = Array.isArray(errorOrReports) ? (errorOrReports as ErrorReport[]) : (_reports ?? [report]);
+
+        UI.modal(UI.requireComponent('error-report-modal'), { report, reports });
     }
 
     public async report(error: ErrorSource, message?: string): Promise<void> {
@@ -79,11 +82,7 @@ export class ErrorsService extends Service {
                     {
                         label: translateWithDefault('errors.viewDetails', 'View details'),
                         dismiss: true,
-                        click: () =>
-                            UI.openModal<ModalComponent<ErrorReportModalProps>>(
-                                UI.requireComponent(UIComponents.ErrorReportModal),
-                                { reports: [report] },
-                            ),
+                        click: () => UI.modal(UI.requireComponent('error-report-modal'), { report, reports: [report] }),
                     },
                 ],
             },
@@ -125,6 +124,10 @@ export class ErrorsService extends Service {
         }
     }
 
+    private isErrorReport(error: unknown): error is ErrorReport {
+        return isObject(error) && 'title' in error;
+    }
+
     private async createErrorReport(error: ErrorSource): Promise<ErrorReport> {
         if (typeof error === 'string') {
             return { title: error };

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,39 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import type Eruda from 'eruda';
+
+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/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

@@ -1,9 +1,16 @@
 import { describe, expect, expectTypeOf, it } from 'vitest';
-
-import { useForm } from '@aerogel/core/forms/composition';
-import { numberInput, requiredStringInput } from '@aerogel/core/forms/utils';
-
-import { FormFieldTypes } from './FormController';
+import { tt } from '@noeldemartin/testing';
+import type { Equals } from '@noeldemartin/utils';
+import type { Expect } from '@noeldemartin/testing';
+
+import {
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 
 describe('FormController', () => {
 
@@ -21,7 +28,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -39,7 +46,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -60,11 +67,11 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             trimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
             untrimmed: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
                 trim: false,
             },
@@ -84,4 +91,20 @@ describe('FormController', () => {
         expect(form.errors).toEqual({ trimmed: ['required'], untrimmed: null });
     });
 
+    it('infers field types', () => {
+        const form = useForm({
+            one: stringInput(),
+            two: requiredStringInput(),
+            three: objectInput(),
+            four: requiredObjectInput<{ foo: string; bar?: number }>(),
+        });
+
+        tt<
+            | Expect<Equals<typeof form.one, string | null>>
+            | Expect<Equals<typeof form.two, string>>
+            | Expect<Equals<typeof form.three, object | null>>
+            | Expect<Equals<typeof form.four, { foo: string; bar?: number }>>
+        >();
+    });
+
 });

package/src/forms/FormController.ts

@@ -1,33 +1,32 @@
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
 import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
-import { validate } from './validation';
-import type { ObjectValues } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
-export const FormFieldTypes = {
-    String: 'string',
-    Number: 'number',
-    Boolean: 'boolean',
-    Object: 'object',
-    Date: 'date',
-} as const;
+import { validate } from './validation';
+
+export const __objectType: unique symbol = Symbol();
 
-export interface FormFieldDefinition<TType extends FormFieldType = FormFieldType, TRules extends string = string> {
+export interface FormFieldDefinition<
+    TType extends FormFieldType = FormFieldType,
+    TRules extends string = string,
+    TObjectType = object,
+> {
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
     rules?: TRules;
+    [__objectType]?: TObjectType;
 }
 
-export type FormFieldDefinitions = Record<string, FormFieldDefinition>;
-export type FormFieldType = ObjectValues<typeof FormFieldTypes>;
+export type FormFieldType = 'string' | '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>
+    -readonly [k in keyof T]: T[k] extends FormFieldDefinition<infer TType, infer TRules, infer TObjectType>
         ? TRules extends 'required'
-            ? GetFormFieldValue<TType>
-            : GetFormFieldValue<TType> | null
+            ? GetFormFieldValue<TType, TObjectType>
+            : GetFormFieldValue<TType, TObjectType> | null
         : never;
 };
 
@@ -35,15 +34,17 @@ export type FormErrors<T> = {
     [k in keyof T]: string[] | null;
 };
 
-export type GetFormFieldValue<TType> = TType extends typeof FormFieldTypes.String
+export type GetFormFieldValue<TType, TObjectType = object> = TType extends 'string'
     ? string
-    : TType extends typeof FormFieldTypes.Number
+    : TType extends 'number'
       ? number
-      : TType extends typeof FormFieldTypes.Boolean
+      : TType extends 'boolean'
         ? boolean
-        : TType extends typeof FormFieldTypes.Object
-          ? object
-          : TType extends typeof FormFieldTypes.Date
+        : TType extends 'object'
+          ? TObjectType extends object
+              ? TObjectType
+              : object
+          : TType extends 'date'
             ? Date
             : never;
 
@@ -91,7 +92,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
             this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
 
         this._data[field] =
-            definition.type === FormFieldTypes.String && (definition.trim ?? true)
+            definition.type === 'string' && (definition.trim ?? true)
                 ? (toString(value).trim() as FormData<Fields>[T])
                 : value;
 

package/src/forms/index.ts

@@ -1,4 +1,3 @@
-export * from './composition';
 export * from './FormController';
 export * from './utils';
 export * from './validation';