@aerogel/core 0.1.1-next.fb520688df1cb99debb744172bd6f7f9e8a5f2d0 → 0.1.2-next.0532ffc3845be5e86d770e8e823f5216ef34dfbf

package/src/components/ui/ComboboxTrigger.vue

@@ -0,0 +1,67 @@
+<template>
+    <ComboboxAnchor class="relative">
+        <ComboboxInput
+            :id="select.id"
+            v-model="combobox.input"
+            :placeholder="select.placeholder"
+            :class="renderedRootClasses"
+            :display-value="select.renderOption"
+            :name="select.name"
+            @focus="$emit('focus')"
+            @blur="onBlur()"
+            @keydown.esc="$emit('blur')"
+        />
+        <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>
+    </ComboboxAnchor>
+</template>
+
+<script setup lang="ts">
+import IconExclamationSolid from '~icons/zondicons/exclamation-solid';
+
+import { ComboboxAnchor, ComboboxInput } from 'reka-ui';
+import { computed, watch } from 'vue';
+
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
+import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
+
+const emit = defineEmits<{ focus: []; change: []; blur: [] }>();
+const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxTrigger> must be a child of a <Combobox>');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const renderedRootClasses = 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',
+        {
+            'mt-1': select.label,
+            'focus:ring-primary-600': !select.errors,
+            'text-gray-900 shadow-2xs ring-gray-900/10 placeholder:text-gray-400': !select.errors,
+            'pr-10 text-red-900 ring-red-900/10 placeholder:text-red-300 focus:ring-red-500': select.errors,
+        },
+    ));
+
+function onBlur() {
+    const elements = Array.from(document.querySelectorAll(':hover'));
+
+    if (elements.some((element) => combobox.$group?.contains(element))) {
+        return;
+    }
+
+    emit('blur');
+}
+
+watch(
+    () => combobox.input,
+    () => {
+        if (combobox.preventChange) {
+            combobox.preventChange = false;
+
+            return;
+        }
+
+        emit('change');
+    },
+);
+</script>

package/src/components/ui/Details.vue

@@ -1,13 +1,13 @@
 <template>
     <details class="group">
-        <summary
-            class="-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
-        >
+        <summary :class="renderedSummaryClasses">
             <IconCheveronRight class="size-6 transition-transform group-open:rotate-90" />
-            <span>{{ label }}</span>
+            <slot name="label">
+                <span>{{ label ?? $td('ui.details', 'Details') }}</span>
+            </slot>
         </summary>
 
-        <div class="pt-2 pl-4">
+        <div :class="renderedContentClasses">
             <slot />
         </div>
     </details>
@@ -15,6 +15,19 @@
 
 <script setup lang="ts">
 import IconCheveronRight from '~icons/zondicons/cheveron-right';
+import { classes } from '@aerogel/core/utils';
+import { type HTMLAttributes, computed } from 'vue';
 
-defineProps<{ label: string }>();
+const {
+    label = undefined,
+    contentClass,
+    summaryClass,
+} = defineProps<{ label?: string; contentClass?: HTMLAttributes['class']; summaryClass?: HTMLAttributes['class'] }>();
+const renderedContentClasses = computed(() => classes('pt-2 pl-4', contentClass));
+const renderedSummaryClasses = computed(() =>
+    classes(
+        '-ml-2 flex w-[max-content] items-center rounded-lg py-2 pr-3 pl-1 max-w-full',
+        'hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700',
+        summaryClass,
+    ));
 </script>

package/src/components/ui/Input.vue

@@ -13,8 +13,8 @@
                 <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" />
+        <HeadlessInputDescription :class="renderedDescriptionClasses" />
+        <HeadlessInputError :class="renderedErrorClasses" />
     </HeadlessInput>
 </template>
 
@@ -35,13 +35,21 @@ import type { InputEmits, InputProps } from '@aerogel/core/components/contracts/
 
 defineOptions({ inheritAttrs: false });
 defineEmits<InputEmits>();
-const { label, inputClass, wrapperClass, ...props } = defineProps<
-    InputProps & { inputClass?: HTMLAttributes['class']; wrapperClass?: HTMLAttributes['class'] }
+
+const { label, inputClass, wrapperClass, descriptionClass, errorClass, ...props } = defineProps<
+    InputProps & {
+        inputClass?: HTMLAttributes['class'];
+        wrapperClass?: HTMLAttributes['class'];
+        descriptionClass?: HTMLAttributes['class'];
+        errorClass?: HTMLAttributes['class'];
+    }
 >();
 const $input = useTemplateRef('$inputRef');
 const [inputAttrs, rootClasses] = useInputAttrs();
 const renderedWrapperClasses = computed(() =>
     classes('relative rounded-md shadow-2xs', { 'mt-1': label }, wrapperClass));
+const renderedDescriptionClasses = computed(() => classes('mt-2 text-sm text-gray-600', descriptionClass));
+const renderedErrorClasses = computed(() => classes('mt-2 text-sm text-red-600', errorClass));
 const renderedInputClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len

package/src/components/ui/LoadingModal.vue

@@ -1,11 +1,10 @@
 <template>
     <Modal
         persistent
-        class="flex"
         wrapper-class="w-auto"
         :title="renderedTitle"
         :title-hidden
-        :class="{ 'flex-col-reverse': showProgress, 'items-center justify-center gap-2': !showProgress }"
+        :class="{ 'flex-col-reverse': showProgress, 'flex-row items-center justify-center gap-2': !showProgress }"
     >
         <ProgressBar
             v-if="showProgress"

package/src/components/ui/Modal.vue

@@ -12,10 +12,15 @@
                 'animate-[fade-in_var(--tw-duration)_ease-in-out]': !hasRenderedModals,
                 'bg-black/30': firstVisibleModal?.id === id || (!firstVisibleModal && modals[0]?.id === id),
                 'opacity-0': !firstVisibleModal,
+                hidden: renderFullscreen,
             }"
         />
         <HeadlessModalContent v-bind="contentProps" :class="renderedWrapperClass">
-            <div v-if="!persistent && !closeHidden" class="absolute top-0 right-0 hidden pt-3.5 pr-2.5 sm:block">
+            <div
+                v-if="!persistent && !closeHidden"
+                class="absolute top-0 right-0 pt-3.5 pr-2.5"
+                :class="{ 'hidden sm:block': !renderFullscreen }"
+            >
                 <button
                     type="button"
                     class="clickable z-10 rounded-full p-2.5 text-gray-400 hover:text-gray-500"
@@ -67,6 +72,7 @@ import HeadlessModalContent from '@aerogel/core/components/headless/HeadlessModa
 import HeadlessModalDescription from '@aerogel/core/components/headless/HeadlessModalDescription.vue';
 import HeadlessModalOverlay from '@aerogel/core/components/headless/HeadlessModalOverlay.vue';
 import HeadlessModalTitle from '@aerogel/core/components/headless/HeadlessModalTitle.vue';
+import UI from '@aerogel/core/ui/UI';
 import { classes } from '@aerogel/core/utils/classes';
 import { reactiveSet } from '@aerogel/core/utils';
 import { injectModal, modals, useModal } from '@aerogel/core/ui/modals';
@@ -88,6 +94,8 @@ const {
     description,
     persistent,
     closeHidden,
+    fullscreen,
+    fullscreenOnMobile,
     ...props
 } = defineProps<
     ModalProps & {
@@ -113,18 +121,29 @@ const firstVisibleModal = computed(() => modals.value.find((modal) => modal.visi
 const hasRenderedModals = computed(() => modals.value.some((modal) => renderedModals.has(modal)));
 const contentProps = computed(() => (description ? {} : { 'aria-describedby': undefined }));
 const renderedContentClass = computed(() =>
-    classes('max-h-[90vh] overflow-auto px-4 pb-4', { 'pt-4': !title || titleHidden }, contentClass));
+    classes(
+        'overflow-auto px-4 pb-4 flex flex-col flex-1',
+        { 'pt-4': !title || titleHidden, 'max-h-[90vh]': !renderFullscreen.value },
+        contentClass,
+    ));
+const renderFullscreen = computed(() => fullscreen || (fullscreenOnMobile && UI.mobile));
 const renderedWrapperClass = computed(() =>
     classes(
-        'isolate fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-lg bg-white text-left shadow-xl sm:max-w-lg',
-        renderedModals.has(modal.value) ||
-            'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
-        'transition-[scale,opacity] will-change-[scale,opacity] duration-300',
-        {
-            'scale-50 opacity-0': !inForeground.value,
-            'scale-100 opacity-100': inForeground.value,
-        },
+        'isolate fixed z-50 flex flex-col overflow-hidden bg-white text-left duration-300',
+        renderFullscreen.value
+            ? [
+                'inset-0 transition-[transform,translate] will-change-[transform,translate]',
+                renderedModals.has(modal.value) || 'animate-[slide-in_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'translate-y-0' : 'translate-y-full',
+            ]
+            : [
+                'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full',
+                'max-w-[calc(100%-2rem)] rounded-lg shadow-xl sm:max-w-lg',
+                'transition-[scale,opacity] will-change-[scale,opacity]',
+                renderedModals.has(modal.value) ||
+                      'animate-[fade-in_var(--tw-duration)_ease-in-out,grow_var(--tw-duration)_ease-in-out]',
+                inForeground.value ? 'scale-100 opacity-100' : 'scale-50 opacity-0',
+            ],
         wrapperClass,
     ));
 

package/src/components/ui/ProgressBar.vue

@@ -1,6 +1,11 @@
 <template>
-    <div class="mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
+    <div class="relative mt-1 h-2 w-full overflow-hidden rounded-full bg-gray-200">
         <div :class="filledClasses" :style="`transform:translateX(-${(1 - renderedProgress) * 100}%)`" />
+        <div
+            v-if="overflowWidthPercentage"
+            :class="overflowClasses"
+            :style="{ width: `${overflowWidthPercentage}%` }"
+        />
         <span class="sr-only">
             {{
                 $td('ui.progress', '{progress}% complete', {
@@ -18,8 +23,9 @@ import { classes } from '@aerogel/core/utils/classes';
 import type Job from '@aerogel/core/jobs/Job';
 import type { Falsifiable } from '@aerogel/core/utils';
 
-const { filledClass, progress, job } = defineProps<{
+const { filledClass, overflowClass, progress, job } = defineProps<{
     filledClass?: string;
+    overflowClass?: string;
     progress?: number;
     job?: Falsifiable<Job>;
 }>();
@@ -28,6 +34,12 @@ let cleanup: Falsifiable<Function>;
 const jobProgress = ref(0);
 const filledClasses = computed(() =>
     classes('size-full transition-transform duration-500 rounded-r-full ease-linear bg-primary-600', filledClass));
+const overflowClasses = computed(() =>
+    classes(
+        'absolute inset-y-0 right-0 size-full rounded-r-full',
+        'bg-primary-900 transition-[width] duration-500 ease-linear',
+        overflowClass,
+    ));
 const renderedProgress = computed(() => {
     if (typeof progress === 'number') {
         return progress;
@@ -35,6 +47,8 @@ const renderedProgress = computed(() => {
 
     return jobProgress.value;
 });
+const overflowWidthPercentage = computed(() =>
+    renderedProgress.value > 1 ? 100 * ((renderedProgress.value - 1) / renderedProgress.value) : null);
 
 watch(
     () => job,

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

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

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/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,7 @@ 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 {
@@ -149,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());
@@ -201,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);
+        }
+    },
+});