@aerogel/core 0.1.1 → 0.1.2-next.faf07b8323db56fdfa807f3b9ffa8af276fdf288

package/src/components/ui/Select.vue

@@ -3,6 +3,7 @@
         <SelectLabel />
         <slot>
             <SelectTrigger />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
             <SelectOptions />
         </slot>
     </HeadlessSelect>
@@ -19,6 +20,7 @@ import type { FormFieldValue } from '@aerogel/core/forms';
 import SelectLabel from './SelectLabel.vue';
 import SelectOptions from './SelectOptions.vue';
 import SelectTrigger from './SelectTrigger.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
 
 defineProps<SelectProps<T>>();
 defineEmits<SelectEmits<T>>();

package/src/components/ui/SelectTrigger.vue

@@ -2,11 +2,15 @@
     <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" />
+        <div v-if="select?.errors" class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+            <IconExclamationSolid class="size-5 text-red-500" />
+        </div>
     </HeadlessSelectTrigger>
 </template>
 
 <script setup lang="ts">
 import IconCheveronDown from '~icons/zondicons/cheveron-down';
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
 
 import { computed } from 'vue';
 import type { HTMLAttributes } from 'vue';
@@ -22,8 +26,15 @@ const select = injectReactiveOrFail<SelectExpose>('select', '<SelectTrigger> mus
 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 },
+        'relative 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',
+        'focus:outline-2 focus:-outline-offset-2 sm:text-sm/6',
+        {
+            'mt-1': select.label,
+            'outline-gray-300 focus:outline-primary-600 data-[state=open]:outline-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'outline-red-900/10 pr-10 text-red-900 placeholder:text-red-300': select.errors,
+            'focus:outline-red-500 data-[state=open]:outline-red-500': select.errors,
+        },
         rootClasses,
     ));
 </script>

package/src/components/ui/SettingsModal.vue

@@ -1,5 +1,5 @@
 <template>
-    <Modal :title="$td('settings.title', 'Settings')">
+    <Modal :title="$td('settings.title', 'Settings')" :fullscreen-on-mobile="$app.settingsFullscreenOnMobile">
         <component :is="setting.component" v-for="(setting, key) in settings" :key />
     </Modal>
 </template>

package/src/components/ui/Toast.vue

@@ -34,6 +34,7 @@ const renderedClasses = computed(() =>
                 variant: {
                     secondary: 'bg-gray-900 text-white ring-black',
                     danger: 'bg-red-50 text-red-900 ring-red-100',
+                    warning: 'bg-yellow-50 text-yellow-900 ring-yellow-100',
                 },
             },
             defaultVariants: {

package/src/components/ui/index.ts

@@ -2,7 +2,13 @@ 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 Combobox } from './Combobox.vue';
+export { default as ComboboxLabel } from './ComboboxLabel.vue';
+export { default as ComboboxOption } from './ComboboxOption.vue';
+export { default as ComboboxOptions } from './ComboboxOptions.vue';
+export { default as ComboboxTrigger } from './ComboboxTrigger.vue';
 export { default as ConfirmModal } from './ConfirmModal.vue';
+export { default as Details } from './Details.vue';
 export { default as DropdownMenu } from './DropdownMenu.vue';
 export { default as DropdownMenuOption } from './DropdownMenuOption.vue';
 export { default as DropdownMenuOptions } from './DropdownMenuOptions.vue';
@@ -19,7 +25,6 @@ export { default as Link } from './Link.vue';
 export { default as LoadingModal } from './LoadingModal.vue';
 export { default as Markdown } from './Markdown.vue';
 export { default as Modal } from './Modal.vue';
-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';

package/src/components/vue/Provide.vue

@@ -0,0 +1,11 @@
+<template>
+    <slot />
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue';
+
+const { name, value } = defineProps<{ name: string; value: unknown }>();
+
+provide(name, value);
+</script>

package/src/components/vue/index.ts

@@ -0,0 +1 @@
+export { default as Provide } from './Provide.vue';

package/src/directives/index.ts

@@ -5,22 +5,24 @@ import { definePlugin } from '@aerogel/core/plugins';
 import measure from './measure';
 import safeHtml from './safe-html';
 
-const builtInDirectives: Record<string, Directive> = {
+export const aerogelDirectives = {
     'measure': measure,
     'safe-html': safeHtml,
-};
+} as const satisfies Record<string, Directive>;
+
+export type AerogelDirectives = typeof aerogelDirectives;
 
 export * from './measure';
 
 export default definePlugin({
     install(app, options) {
         const directives = {
-            ...builtInDirectives,
+            ...aerogelDirectives,
             ...options.directives,
         };
 
         for (const [name, directive] of Object.entries(directives)) {
-            app.directive(name, directive);
+            app.directive(name, directive as Directive);
         }
     },
 });
@@ -32,7 +34,5 @@ declare module '@aerogel/core/bootstrap/options' {
 }
 
 declare module 'vue' {
-    interface ComponentCustomDirectives {
-        measure: Directive<string, string>;
-    }
+    interface ComponentCustomDirectives extends AerogelDirectives {}
 }

package/src/errors/Errors.ts

@@ -1,6 +1,7 @@
 import { JSError, facade, isDevelopment, isObject, isTesting, objectWithoutEmpty, toString } from '@noeldemartin/utils';
 import { watchEffect } from 'vue';
 import type Eruda from 'eruda';
+import type ErudaIndexedDB from 'eruda-indexeddb';
 
 import App from '@aerogel/core/services/App';
 import ServiceBootError from '@aerogel/core/errors/ServiceBootError';
@@ -16,6 +17,7 @@ export class ErrorsService extends Service {
     public forceReporting: boolean = false;
     private enabled: boolean = true;
     private eruda: typeof Eruda | null = null;
+    private erudaPlugins: [typeof ErudaIndexedDB] | null = null;
 
     public enable(): void {
         this.enabled = true;
@@ -131,8 +133,10 @@ export class ErrorsService extends Service {
             }
 
             this.eruda ??= (await import('eruda')).default;
+            this.erudaPlugins ??= [(await import('eruda-indexeddb')).default];
 
             this.eruda.init();
+            this.erudaPlugins.forEach((plugin) => this.eruda?.add(plugin));
         });
     }
 

package/src/errors/index.ts

@@ -3,6 +3,7 @@ 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 { getErrorMessage } from '@aerogel/core/errors/utils';
 
 import Errors from './Errors';
 import settings from './settings';
@@ -16,6 +17,10 @@ export type { ErrorSource, ErrorReport, ErrorReportLog };
 
 const services = { $errors: Errors };
 const frameworkHandler: ErrorHandler = (error) => {
+    if (getErrorMessage(error).includes('ResizeObserver loop completed with undelivered notifications.')) {
+        return true;
+    }
+
     Errors.report(error);
 
     return true;

package/src/forms/FormController.test.ts

@@ -30,7 +30,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -48,7 +48,7 @@ describe('FormController', () => {
         const form = useForm({
             name: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
         });
 
@@ -69,11 +69,11 @@ describe('FormController', () => {
         const form = useForm({
             trimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
             },
             untrimmed: {
                 type: 'string',
-                rules: 'required',
+                rules: ['required'],
                 trim: false,
             },
         });

package/src/forms/FormController.ts

@@ -1,5 +1,5 @@
 import { computed, nextTick, reactive, readonly, ref } from 'vue';
-import { MagicObject, arrayRemove, fail, toString } from '@noeldemartin/utils';
+import { MagicObject, arrayRemove, fail } from '@noeldemartin/utils';
 import type { ComputedRef, DeepReadonly, Ref, UnwrapNestedRefs } from 'vue';
 
 import { validate, validateType } from './validation';
@@ -14,7 +14,7 @@ export interface FormFieldDefinition<
     type: TType;
     trim?: boolean;
     default?: GetFormFieldValue<TType>;
-    rules?: TRules;
+    rules?: TRules[];
     values?: readonly TValueType[];
     [__valueType]?: TValueType;
 }
@@ -91,17 +91,13 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     }
 
     public setFieldValue<T extends keyof Fields>(field: T, value: FormData<Fields>[T]): void {
-        const definition =
-            this._fields[field] ?? fail<FormFieldDefinition>(`Trying to set undefined '${toString(field)}' field`);
+        this._data[field] = value;
 
-        this._data[field] =
-            definition.type === 'string' && (definition.trim ?? true)
-                ? (toString(value).trim() as FormData<Fields>[T])
-                : value;
-
-        if (this._submitted.value) {
-            this.validate();
+        if (!this._submitted.value) {
+            return;
         }
+
+        this.validate();
     }
 
     public getFieldValue<T extends keyof Fields>(field: T): GetFormFieldValue<Fields[T]['type']> {
@@ -109,7 +105,11 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     }
 
     public getFieldRules<T extends keyof Fields>(field: T): string[] {
-        return this._fields[field]?.rules?.split('|') ?? [];
+        return this._fields[field]?.rules ?? [];
+    }
+
+    public setFieldErrors<T extends keyof Fields>(field: T, errors: string[] | null): void {
+        this._errors[field] = errors;
     }
 
     public getFieldType<T extends keyof Fields>(field: T): FormFieldType | null {
@@ -145,6 +145,16 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     public submit(): boolean {
         this._submitted.value = true;
 
+        for (const [field, value] of Object.entries(this._data)) {
+            const definition = this._fields[field] ?? fail<FormFieldDefinition>();
+
+            if (typeof value !== 'string' || !(definition.trim ?? true)) {
+                continue;
+            }
+
+            this._data[field as keyof Fields] = value.trim() as FormData<Fields>[string];
+        }
+
         const valid = this.validate();
 
         valid && this._listeners['submit']?.forEach((listener) => listener());
@@ -197,7 +207,7 @@ export default class FormController<Fields extends FormFieldDefinitions = FormFi
     private getFieldErrors(name: keyof Fields, definition: FormFieldDefinition): string[] | null {
         const errors = [];
         const value = this._data[name];
-        const rules = definition.rules?.split('|') ?? [];
+        const rules = definition.rules ?? [];
 
         errors.push(...validateType(value, definition));
 

package/src/forms/index.ts

@@ -1,4 +1,15 @@
+import { registerFormValidationRule } from '@aerogel/core/forms/validation';
+import { definePlugin } from '@aerogel/core/plugins';
+
 export * from './FormController';
 export * from './utils';
 export * from './validation';
 export { default as FormController } from './FormController';
+
+export default definePlugin({
+    async install(_, { formValidationRules }) {
+        for (const [rule, validator] of Object.entries(formValidationRules ?? {})) {
+            registerFormValidationRule(rule, validator);
+        }
+    },
+});

package/src/forms/utils.ts

@@ -1,6 +1,9 @@
 import type { FormFieldDefinition } from './FormController';
 
-export function booleanInput(defaultValue?: boolean, options: { rules?: string } = {}): FormFieldDefinition<'boolean'> {
+export function booleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean'> {
     return {
         default: defaultValue,
         type: 'boolean',
@@ -8,7 +11,7 @@ export function booleanInput(defaultValue?: boolean, options: { rules?: string }
     };
 }
 
-export function dateInput(defaultValue?: Date, options: { rules?: string } = {}): FormFieldDefinition<'date'> {
+export function dateInput(defaultValue?: Date, options: { rules?: string[] } = {}): FormFieldDefinition<'date'> {
     return {
         default: defaultValue,
         type: 'date',
@@ -19,7 +22,7 @@ export function dateInput(defaultValue?: Date, options: { rules?: string } = {})
 export function enumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', string, T> {
     return {
         default: defaultValue,
@@ -29,59 +32,75 @@ export function enumInput<const T extends string>(
     };
 }
 
-export function requiredBooleanInput(defaultValue?: boolean): FormFieldDefinition<'boolean', 'required'> {
+export function requiredBooleanInput(
+    defaultValue?: boolean,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'boolean', 'required'> {
     return {
         default: defaultValue,
         type: 'boolean',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredDateInput(defaultValue?: Date): FormFieldDefinition<'date', 'required'> {
+export function requiredDateInput(
+    defaultValue?: Date,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'date', 'required'> {
     return {
         default: defaultValue,
         type: 'date',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
 export function requiredEnumInput<const T extends string>(
     values: readonly T[],
     defaultValue?: T,
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'enum', 'required', T> {
     return {
         default: defaultValue,
         type: 'enum',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
         values,
     };
 }
 
-export function requiredNumberInput(defaultValue?: number): FormFieldDefinition<'number', 'required'> {
+export function requiredNumberInput(
+    defaultValue?: number,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'number', 'required'> {
     return {
         default: defaultValue,
         type: 'number',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredObjectInput<T extends object>(defaultValue?: T): FormFieldDefinition<'object', 'required', T> {
+export function requiredObjectInput<T extends object>(
+    defaultValue?: T,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'object', 'required', T> {
     return {
         default: defaultValue,
         type: 'object',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function requiredStringInput(defaultValue?: string): FormFieldDefinition<'string', 'required'> {
+export function requiredStringInput(
+    defaultValue?: string,
+    options: { rules?: string[] } = {},
+): FormFieldDefinition<'string', 'required'> {
     return {
         default: defaultValue,
         type: 'string',
-        rules: 'required',
+        rules: ['required', ...((options.rules as 'required'[]) ?? [])],
     };
 }
 
-export function numberInput(defaultValue?: number, options: { rules?: string } = {}): FormFieldDefinition<'number'> {
+export function numberInput(defaultValue?: number, options: { rules?: string[] } = {}): FormFieldDefinition<'number'> {
     return {
         default: defaultValue,
         type: 'number',
@@ -91,7 +110,7 @@ export function numberInput(defaultValue?: number, options: { rules?: string } =
 
 export function objectInput<T extends object>(
     defaultValue?: T,
-    options: { rules?: string } = {},
+    options: { rules?: string[] } = {},
 ): FormFieldDefinition<'object', string, T> {
     return {
         default: defaultValue,
@@ -100,7 +119,7 @@ export function objectInput<T extends object>(
     };
 }
 
-export function stringInput(defaultValue?: string, options: { rules?: string } = {}): FormFieldDefinition<'string'> {
+export function stringInput(defaultValue?: string, options: { rules?: string[] } = {}): FormFieldDefinition<'string'> {
     return {
         default: defaultValue,
         type: 'string',

package/src/forms/validation.ts

@@ -31,10 +31,14 @@ export type FormFieldValidator<T = unknown> = (value: T) => string | string[] |
 
 export const validators: Record<string, FormFieldValidator> = { ...builtInRules };
 
-export function defineFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
+export function registerFormValidationRule<T>(rule: string, validator: FormFieldValidator<T>): void {
     validators[rule] = validator as FormFieldValidator;
 }
 
+export function defineFormValidationRules<T extends Record<string, FormFieldValidator>>(rules: T): T {
+    return rules;
+}
+
 export function validateType(value: unknown, definition: FormFieldDefinition): string[] {
     if (isValidType(value, definition)) {
         return [];

package/src/index.css

@@ -20,6 +20,7 @@
     --color-primary-950: color-mix(in oklab, var(--color-primary-600) 50%, black);
 
     --color-background: oklch(1 0 0);
+    --color-primary-text: var(--color-gray-900);
     --color-links: var(--color-primary);
 
     --breakpoint-content: var(--breakpoint-md);
@@ -66,6 +67,15 @@ button[data-markdown-action] {
     }
 }
 
+@keyframes slide-in {
+    0% {
+        transform: translateY(100%);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
 @keyframes grow {
     0% {
         scale: 0;

package/src/jobs/Job.ts

@@ -115,7 +115,7 @@ export default abstract class Job<
             return 1;
         }
 
-        if (!status.children) {
+        if (!status.children || status.children.length === 0) {
             return 0;
         }
 

package/src/plugins/index.ts

@@ -1,5 +1,3 @@
-import type { GetClosureArgs } from '@noeldemartin/utils';
-
 import App from '@aerogel/core/services/App';
 
 import type { Plugin } from './Plugin';
@@ -10,7 +8,7 @@ export function definePlugin<T extends Plugin>(plugin: T): T {
     return plugin;
 }
 
-export async function installPlugins(plugins: Plugin[], ...args: GetClosureArgs<Plugin['install']>): Promise<void> {
+export async function installPlugins(plugins: Plugin[], ...args: Parameters<Plugin['install']>): Promise<void> {
     App.setState(
         'plugins',
         plugins.reduce(

package/src/services/App.state.ts

@@ -24,6 +24,7 @@ export default defineServiceState({
         version: Aerogel.version,
         sourceUrl: Aerogel.sourceUrl,
         settings: [] as AppSetting[],
+        settingsFullscreenOnMobile: false,
     },
     computed: {
         development: (state) => state.environment === 'development',

package/src/services/App.ts

@@ -30,6 +30,10 @@ export class AppService extends Service {
         this.settings.push(markRaw(setting));
     }
 
+    public setSettingsFullscreenOnMobile(fullscreenOnMobile: boolean): void {
+        this.settingsFullscreenOnMobile = fullscreenOnMobile;
+    }
+
     public async whenReady<T>(callback: () => T): Promise<T> {
         const result = await this.ready.then(callback);
 

package/src/services/index.ts

@@ -10,6 +10,7 @@ import Service from './Service';
 import Storage from './Storage';
 import { getPiniaStore } from './store';
 import type { AppSetting } from './App.state';
+import type { FormFieldValidator } from '@aerogel/core/forms';
 
 export * from './App';
 export * from './Cache';
@@ -56,6 +57,10 @@ export default definePlugin({
         app.use(getPiniaStore());
         options.settings?.forEach((setting) => App.addSetting(setting));
 
+        if (options.settingsFullscreenOnMobile !== undefined) {
+            App.setSettingsFullscreenOnMobile(options.settingsFullscreenOnMobile);
+        }
+
         await bootServices(app, services);
     },
 });
@@ -64,6 +69,8 @@ declare module '@aerogel/core/bootstrap/options' {
     export interface AerogelOptions {
         services?: Record<string, Service>;
         settings?: AppSetting[];
+        formValidationRules?: Record<string, FormFieldValidator>;
+        settingsFullscreenOnMobile?: boolean;
     }
 }
 

package/src/testing/index.ts

@@ -1,5 +1,4 @@
 import { isTesting } from '@noeldemartin/utils';
-import type { GetClosureArgs } from '@noeldemartin/utils';
 
 import Events from '@aerogel/core/services/Events';
 import { App } from '@aerogel/core/services';
@@ -18,7 +17,7 @@ export default definePlugin({
         }
 
         globalThis.testingRuntime = {
-            on: ((...args: GetClosureArgs<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
+            on: ((...args: Parameters<(typeof Events)['on']>) => Events.on(...args)) as (typeof Events)['on'],
             service: (name) => App.service(name),
         };
     },

package/src/ui/UI.state.ts

@@ -4,15 +4,6 @@ import { defineServiceState } from '@aerogel/core/services/Service';
 
 import { Layouts, getCurrentLayout } from './utils';
 
-export interface UIModal<T = unknown> {
-    id: string;
-    properties: Record<string, unknown>;
-    component: Component;
-    closing: boolean;
-    beforeClose: Promise<T | undefined>;
-    afterClose: Promise<T | undefined>;
-}
-
 export interface UIToast {
     id: string;
     component: Component;
@@ -22,13 +13,11 @@ export interface UIToast {
 export default defineServiceState({
     name: 'ui',
     initialState: {
-        modals: [] as UIModal[],
         toasts: [] as UIToast[],
         layout: getCurrentLayout(),
     },
     computed: {
         desktop: ({ layout }) => layout === Layouts.Desktop,
         mobile: ({ layout }) => layout === Layouts.Mobile,
-        openModals: ({ modals }) => modals.filter(({ closing }) => !closing),
     },
 });