@aerogel/core 0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb → 0.0.0-next.c38a10cd5e81c5f04469ef79e59a53e6bfd3df55

package/src/components/ui/SelectLabel.vue

@@ -0,0 +1,21 @@
+<template>
+    <HeadlessSelectLabel v-if="$slots.default" :class="renderedClasses">
+        <slot />
+    </HeadlessSelectLabel>
+    <HeadlessSelectLabel v-else :class="renderedClasses" />
+</template>
+
+<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, rootClasses));
+</script>

package/src/components/ui/SelectOption.vue

@@ -0,0 +1,29 @@
+<template>
+    <HeadlessSelectOption :class="renderedOuterClasses" :value>
+        <div :class="renderedInnerClasses">
+            <slot />
+        </div>
+    </HeadlessSelectOption>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectOption from '@aerogel/core/components/headless/HeadlessSelectOption.vue';
+import { classes } from '@aerogel/core/utils';
+
+const { class: outerClass, innerClass } = defineProps<{
+    value: AcceptableValue;
+    class?: HTMLAttributes['class'];
+    innerClass?: HTMLAttributes['class'];
+}>();
+const renderedOuterClasses = computed(() => classes('group p-1 outline-none', outerClass));
+const renderedInnerClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        'relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center truncate rounded-md gap-2 px-2 py-1 text-sm select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50',
+        innerClass,
+    ));
+</script>

package/src/components/ui/SelectOptions.vue

@@ -0,0 +1,35 @@
+<template>
+    <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 { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+
+import HeadlessSelectOptions from '@aerogel/core/components/headless/HeadlessSelectOptions.vue';
+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

@@ -0,0 +1,29 @@
+<template>
+    <HeadlessSelectTrigger :class="renderedClasses">
+        <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>
+
+<script setup lang="ts">
+import IconCheveronDown from '~icons/zondicons/cheveron-down';
+
+import { computed } from 'vue';
+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/utils/classes';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+
+const { class: rootClasses } = defineProps<{ class?: HTMLAttributes['class'] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> must be a child of a <Select>');
+const renderedClasses = computed(() =>
+    classes(
+        // eslint-disable-next-line vue/max-len
+        '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,
+    ));
+</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/SettingsModal.vue

@@ -0,0 +1,15 @@
+<template>
+    <Modal :title="$td('settings.title', 'Settings')">
+        <component :is="setting.component" v-for="(setting, key) in settings" :key />
+    </Modal>
+</template>
+
+<script setup lang="ts">
+import { arraySorted } from '@noeldemartin/utils';
+import { computed } from 'vue';
+
+import App from '@aerogel/core/services/App';
+import Modal from '@aerogel/core/components/ui/Modal.vue';
+
+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/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/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

@@ -1,10 +1,14 @@
-export { default as AlertModal } from './AlertModal.vue';
 export { default as AdvancedOptions } from './AdvancedOptions.vue';
+export { default as AlertModal } from './AlertModal.vue';
 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';
@@ -19,5 +23,13 @@ export { default as ModalContext } from './ModalContext.vue';
 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 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/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,32 @@
+<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="enabled" 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';
+
+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,17 @@
 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 {
+    enumInput,
+    numberInput,
+    objectInput,
+    requiredObjectInput,
+    requiredStringInput,
+    stringInput,
+} from '@aerogel/core/forms/utils';
+import { useForm } from '@aerogel/core/utils/composition/forms';
 
 describe('FormController', () => {
 
@@ -21,7 +29,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -39,7 +47,7 @@ describe('FormController', () => {
         // Arrange
         const form = useForm({
             name: {
-                type: FormFieldTypes.String,
+                type: 'string',
                 rules: 'required',
             },
         });
@@ -60,11 +68,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 +92,22 @@ 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 }>(),
+            five: enumInput(['foo', 'bar']),
+        });
+
+        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 }>>
+            | Expect<Equals<typeof form.five, 'foo' | 'bar' | null>>
+        >();
+    });
+
 });