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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.0.0-next.e4c0d5bd2801fbe93545477ea515af53df69b522",
+    "version": "0.0.0-next.ec720bb060627e76b204dc15f6bf955d11a77cbc",
     "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/headless/HeadlessInputInput.vue

@@ -64,8 +64,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/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/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/index.ts

@@ -27,6 +27,8 @@ 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 Toast } from './Toast.vue';

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/lang/index.ts

@@ -4,8 +4,8 @@ import { definePlugin } from '@aerogel/core/plugins';
 
 import Lang from './Lang';
 import settings from './settings';
-import type { LangProvider } from './Lang';
 import { translate, translateWithDefault } from './utils';
+import type { LangProvider } from './Lang';
 
 export { Lang, translate, translateWithDefault };
 export type { LangProvider };

package/src/lang/settings/Language.vue

@@ -7,7 +7,7 @@
         :render-option="renderLocale"
     >
         <div class="grow">
-            <SelectLabel>
+            <SelectLabel class="text-base font-semibold">
                 {{ $td('settings.locale', 'Language') }}
             </SelectLabel>
             <Markdown

package/src/services/index.ts

@@ -1,4 +1,4 @@
-import type { App as VueApp } from 'vue';
+import type { App as AppInstance } from 'vue';
 
 import { definePlugin } from '@aerogel/core/plugins';
 import { isDevelopment, isTesting } from '@noeldemartin/utils';
@@ -30,7 +30,7 @@ export type DefaultServices = typeof defaultServices;
 
 export interface Services extends DefaultServices {}
 
-export async function bootServices(app: VueApp, services: Record<string, Service>): Promise<void> {
+export async function bootServices(app: AppInstance, services: Record<string, Service>): Promise<void> {
     await Promise.all(
         Object.entries(services).map(async ([name, service]) => {
             await service

package/src/testing/index.ts

@@ -2,10 +2,13 @@ import { isTesting } from '@noeldemartin/utils';
 import type { GetClosureArgs } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
+import { App } from '@aerogel/core/services';
 import { definePlugin } from '@aerogel/core/plugins';
+import type { Services } from '@aerogel/core/services';
 
 export interface AerogelTestingRuntime {
     on: (typeof Events)['on'];
+    service<T extends keyof Services>(name: T): Services[T] | null;
 }
 
 export default definePlugin({
@@ -16,6 +19,7 @@ export default definePlugin({
 
         globalThis.testingRuntime = {
             on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            service: (name) => App.service(name),
         };
     },
 });

package/src/ui/UI.ts

@@ -1,5 +1,5 @@
 import { after, facade, fail, isDevelopment, required, uuid } from '@noeldemartin/utils';
-import { markRaw, nextTick } from 'vue';
+import { markRaw, nextTick, unref } from 'vue';
 import type { ComponentExposed, ComponentProps } from 'vue-component-type-helpers';
 import type { Component } from 'vue';
 import type { ClosureArgs } from '@noeldemartin/utils';
@@ -64,6 +64,7 @@ export type LoadingOptions = AcceptRefs<{
     title?: string;
     message?: string;
     progress?: number;
+    delay?: number;
 }>;
 
 export interface ConfirmOptionsWithCheckboxes<T extends ConfirmModalCheckboxes = ConfirmModalCheckboxes>
@@ -218,7 +219,11 @@ export class UIService extends Service {
         operation?: Promise<T> | (() => T),
     ): Promise<T> {
         const processOperation = (o: Promise<T> | (() => T)) => (typeof o === 'function' ? Promise.resolve(o()) : o);
-        const processArgs = (): { operationPromise: Promise<T>; props?: AcceptRefs<LoadingModalProps> } => {
+        const processArgs = (): {
+            operationPromise: Promise<T>;
+            props?: AcceptRefs<LoadingModalProps>;
+            delay?: number;
+        } => {
             if (typeof operationOrMessageOrOptions === 'string') {
                 return {
                     props: { message: operationOrMessageOrOptions },
@@ -230,13 +235,24 @@ export class UIService extends Service {
                 return { operationPromise: processOperation(operationOrMessageOrOptions) };
             }
 
+            const { delay, ...props } = operationOrMessageOrOptions;
+
             return {
-                props: operationOrMessageOrOptions,
+                props,
+                delay: unref(delay),
                 operationPromise: processOperation(operation as Promise<T> | (() => T)),
             };
         };
 
-        const { operationPromise, props } = processArgs();
+        let delayed = false;
+        const { operationPromise, props, delay } = processArgs();
+
+        delay && (await Promise.race([after({ ms: delay }).then(() => (delayed = true)), operationPromise]));
+
+        if (delay && !delayed) {
+            return operationPromise;
+        }
+
         const modal = await this.modal(this.requireComponent('loading-modal'), props);
 
         try {