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

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 {

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

@@ -12,6 +12,7 @@ import type { Constructor, Nullable } from '@noeldemartin/utils';
 import type { Store } from 'pinia';
 
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
+import { appNamespace } from '@aerogel/core/utils/app';
 import { defineServiceStore } from '@aerogel/core/services/store';
 import type { Unref } from '@aerogel/core/utils/vue';
 
@@ -164,7 +165,7 @@ export default class Service<
     }
 
     public hasPersistedState(): boolean {
-        return Storage.has(this._name);
+        return Storage.has(this.storageKey);
     }
 
     public hasState<P extends keyof State>(property: P): boolean {
@@ -231,6 +232,10 @@ export default class Service<
         this.setState({ [property]: value } as Partial<State>);
     }
 
+    protected get storageKey(): string {
+        return `${appNamespace()}:${this._name}`;
+    }
+
     protected onStateUpdated(update: Partial<State>, old: Partial<State>): void {
         const persisted = objectOnly(update, this.static('persist'));
 
@@ -250,13 +255,13 @@ export default class Service<
     }
 
     protected onPersistentStateUpdated(persisted: Partial<State>): void {
-        const storage = Storage.get<ServiceStorage>(this._name);
+        const storage = Storage.get<ServiceStorage>(this.storageKey);
 
         if (!storage) {
             return;
         }
 
-        Storage.set(this._name, {
+        Storage.set(this.storageKey, {
             ...storage,
             ...this.serializePersistedState(objectDeepClone(persisted) as Partial<State>),
         });
@@ -303,14 +308,14 @@ export default class Service<
             return;
         }
 
-        if (Storage.has(this._name)) {
-            const persisted = Storage.require<ServiceStorage>(this._name);
+        if (Storage.has(this.storageKey)) {
+            const persisted = Storage.require<ServiceStorage>(this.storageKey);
             this.setState(this.deserializePersistedState(persisted));
 
             return;
         }
 
-        Storage.set(this._name, objectOnly(this.getState(), this.static('persist')));
+        Storage.set(this.storageKey, objectOnly(this.getState(), this.static('persist')));
     }
 
     protected requireStore(): Store<string, State, ComputedState, {}> {

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 {

package/src/utils/app.ts

@@ -0,0 +1,7 @@
+import Aerogel from 'virtual:aerogel';
+
+import { stringToSlug } from '@noeldemartin/utils';
+
+export function appNamespace(): string {
+    return Aerogel.namespace ?? stringToSlug(Aerogel.name);
+}

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './app';
 export * from './classes';
 export * from './composition/events';
 export * from './composition/forms';