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

package/package.json

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

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

@@ -27,6 +27,7 @@ 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';

package/src/errors/settings/Debug.vue

@@ -1,26 +1,19 @@
 <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>
-
+    <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" />
-    </div>
+    </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);

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 {