@aerogel/core 0.1.1-next.d3af81f1f7f69a65742c4d298e0c77c6c3977d2b → 0.1.1-next.d6144642389e7fbf7ef662ecdbb069e185750112

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.d3af81f1f7f69a65742c4d298e0c77c6c3977d2b",
+    "version": "0.1.1-next.d6144642389e7fbf7ef662ecdbb069e185750112",
     "type": "module",
     "sideEffects": false,
     "exports": {

package/src/bootstrap/index.ts

@@ -10,13 +10,14 @@ import lang from '@aerogel/core/lang';
 import services from '@aerogel/core/services';
 import testing from '@aerogel/core/testing';
 import ui from '@aerogel/core/ui';
+import forms from '@aerogel/core/forms';
 import { installPlugins } from '@aerogel/core/plugins';
 import type { AerogelOptions } from '@aerogel/core/bootstrap/options';
 
 export type { AerogelOptions };
 
 export async function bootstrapApplication(app: AppInstance, options: AerogelOptions = {}): Promise<void> {
-    const plugins = [testing, directives, errors, lang, services, ui, ...(options.plugins ?? [])];
+    const plugins = [testing, directives, errors, lang, services, ui, forms, ...(options.plugins ?? [])];
 
     App.instance = app;
 

package/src/components/contracts/Combobox.ts

@@ -0,0 +1,5 @@
+export type ComboboxContext = {
+    input: string;
+    preventChange: boolean;
+    $group: HTMLDivElement | null;
+};

package/src/components/contracts/Select.ts

@@ -1,7 +1,8 @@
 import { computed, inject, provide, readonly } from 'vue';
 import { evaluate, toString, uuid } from '@noeldemartin/utils';
+import type { AcceptRefs } from '@aerogel/core/utils';
 import type { AcceptableValue, AsTag, SelectContentProps } from 'reka-ui';
-import type { Component, ComputedRef, EmitFn, HTMLAttributes } from 'vue';
+import type { Component, ComputedRef, EmitFn, HTMLAttributes, Ref } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
 import { translateWithDefault } from '@aerogel/core/lang';
@@ -37,8 +38,8 @@ export interface SelectExpose<T extends Nullable<FormFieldValue> = Nullable<Form
     options: ComputedRef<Nullable<readonly SelectOptionData[]>>;
     selectedOption: ComputedRef<Nullable<SelectOptionData>>;
     placeholder: ComputedRef<string>;
-    labelClass?: HTMLAttributes['class'];
-    optionsClass?: HTMLAttributes['class'];
+    labelClass: ComputedRef<HTMLAttributes['class']>;
+    optionsClass: ComputedRef<HTMLAttributes['class']>;
     align?: SelectContentProps['align'];
     side?: SelectContentProps['side'];
     renderOption: (option: T) => string;
@@ -49,40 +50,45 @@ export function hasSelectOptionLabel(option: unknown): option is HasSelectOption
 }
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function useSelect<T extends Nullable<FormFieldValue>>(props: SelectProps<T>, emit: EmitFn<SelectEmits<T>>) {
+export function useSelect<T extends Nullable<FormFieldValue>>(
+    props: Ref<SelectProps<T>>,
+    emit: EmitFn<SelectEmits<T>>,
+) {
     const form = inject<FormController | null>('form', null);
     const renderOption = (option: T): string => {
         if (option === undefined) {
             return '';
         }
 
-        return props.renderOption
-            ? props.renderOption(option)
+        return props.value.renderOption
+            ? props.value.renderOption(option)
             : hasSelectOptionLabel(option)
                 ? evaluate(option.label as string)
                 : toString(option);
     };
     const computedValue = computed(() => {
-        if (form && props.name) {
-            return form.getFieldValue(props.name) as T;
+        const { name, modelValue } = props.value;
+
+        if (form && name) {
+            return form.getFieldValue(name) as T;
         }
 
-        return props.modelValue as T;
+        return modelValue as T;
     });
     const acceptableValue = computed(() => computedValue.value as AcceptableValue);
     const errors = computed(() => {
-        if (!form || !props.name) {
+        if (!form || !props.value.name) {
             return null;
         }
 
-        return form.errors[props.name] ?? null;
+        return form.errors[props.value.name] ?? null;
     });
     const computedOptions = computed(() => {
-        if (!props.options) {
+        if (!props.value.options) {
             return null;
         }
 
-        return props.options.map((option) => ({
+        return props.value.options.map((option) => ({
             key: uuid(),
             label: renderOption(option),
             value: option as AcceptableValue,
@@ -91,36 +97,37 @@ export function useSelect<T extends Nullable<FormFieldValue>>(props: SelectProps
 
     const expose = {
         renderOption,
-        labelClass: props.labelClass,
-        optionsClass: props.optionsClass,
-        align: props.align,
-        side: props.side,
+        labelClass: computed(() => props.value.labelClass),
+        optionsClass: computed(() => props.value.optionsClass),
+        align: computed(() => props.value.align),
+        side: computed(() => props.value.side),
         value: computedValue,
         id: `select-${uuid()}`,
-        name: computed(() => props.name),
-        label: computed(() => props.label),
-        description: computed(() => props.description),
-        placeholder: computed(() => props.placeholder ?? translateWithDefault('ui.select', 'Select an option')),
+        name: computed(() => props.value.name),
+        label: computed(() => props.value.label),
+        description: computed(() => props.value.description),
+        placeholder: computed(() => props.value.placeholder ?? translateWithDefault('ui.select', 'Select an option')),
         options: computedOptions,
-        selectedOption: computed(() => computedOptions.value?.find((option) => option.value === props.modelValue)),
+        selectedOption: computed(() =>
+            computedOptions.value?.find((option) => option.value === props.value.modelValue)),
         errors: readonly(errors),
         required: computed(() => {
-            if (!props.name || !form) {
+            if (!props.value.name || !form) {
                 return;
             }
 
-            return form.getFieldRules(props.name).includes('required');
+            return form.getFieldRules(props.value.name).includes('required');
         }),
         update(value) {
-            if (form && props.name) {
-                form.setFieldValue(props.name, value as FormFieldValue);
+            if (form && props.value.name) {
+                form.setFieldValue(props.value.name, value as FormFieldValue);
 
                 return;
             }
 
             emit('update:modelValue', value);
         },
-    } satisfies SelectExpose<T>;
+    } satisfies AcceptRefs<SelectExpose<T>>;
 
     function update(value: AcceptableValue) {
         expose.update(value as T);

package/src/components/contracts/index.ts

@@ -1,5 +1,6 @@
 export * from './AlertModal';
 export * from './Button';
+export * from './Combobox';
 export * from './ConfirmModal';
 export * from './DropdownMenu';
 export * from './ErrorReportModal';

package/src/components/headless/HeadlessInputInput.vue

@@ -19,7 +19,7 @@ import { computed, inject, useTemplateRef, watchEffect } from 'vue';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils/vue';
 import { onFormFocus } from '@aerogel/core/utils/composition/forms';
-import { LOCAL_TIMEZONE_OFFSET } from '@aerogel/core/utils';
+import { getLocalTimezoneOffset } from '@aerogel/core/utils';
 import type FormController from '@aerogel/core/forms/FormController';
 import type { FormFieldValue } from '@aerogel/core/forms/FormController';
 import type { InputExpose } from '@aerogel/core/components/contracts/Input';
@@ -65,8 +65,19 @@ function getValue(): FormFieldValue | null {
             return $input.value.checked;
         case 'date':
         case 'time':
-        case 'datetime-local':
-            return new Date(Math.round($input.value.valueAsNumber / 60000) * 60000 + LOCAL_TIMEZONE_OFFSET);
+        case 'datetime-local': {
+            const date = new Date(
+                Math.round($input.value.valueAsNumber / 60000) * 60000 +
+                    getLocalTimezoneOffset($input.value.valueAsDate ?? new Date($input.value.valueAsNumber)),
+            );
+
+            if (isNaN(date.getTime())) {
+                return null;
+            }
+
+            return date;
+        }
+
         case 'number':
             return $input.value.valueAsNumber;
         default:
@@ -83,8 +94,11 @@ watchEffect(() => {
     if (['date', 'time', 'datetime-local'].includes(renderedType.value) && value.value instanceof Date) {
         const roundedValue = Math.round(value.value.getTime() / 60000) * 60000;
 
-        $input.value.valueAsNumber = roundedValue - LOCAL_TIMEZONE_OFFSET;
-        input.update(new Date(roundedValue));
+        $input.value.valueAsNumber = roundedValue - getLocalTimezoneOffset(value.value);
+
+        if (value.value.getTime() !== roundedValue) {
+            input.update(new Date(roundedValue));
+        }
 
         return;
     }

package/src/components/headless/HeadlessSelect.vue

@@ -16,6 +16,7 @@
 
 <script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
 import { SelectRoot } from 'reka-ui';
+import { computed } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 
 import { useSelect } from '@aerogel/core/components/contracts/Select';
@@ -29,7 +30,10 @@ defineOptions({ inheritAttrs: false });
 
 const emit = defineEmits<SelectEmits<T>>();
 const { as = 'div', compareOptions = (a, b) => a === b, ...props } = defineProps<SelectProps<T>>();
-const { expose, acceptableValue, update } = useSelect({ as, compareOptions, ...props }, emit);
+const { expose, acceptableValue, update } = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
 
 defineExpose(expose);
 </script>

package/src/components/ui/Combobox.vue

@@ -1,41 +1,94 @@
 <template>
     <ComboboxRoot
-        open-on-focus
         ignore-filter
+        :open
+        :reset-search-term-on-blur="false"
+        :reset-search-term-on-select="false"
         :model-value="acceptableValue"
         :by="compareOptions"
         @update:model-value="update($event)"
     >
-        <ProvideRef v-model="input" name="combobox-input">
+        <Provide name="combobox" :value="combobox">
             <ComboboxLabel />
-            <ComboboxTrigger />
-            <ComboboxOptions :new-input-value />
-        </ProvideRef>
+            <ComboboxTrigger @focus="open = true" @change="open = true" @blur="open = false" />
+            <HeadlessSelectError class="mt-2 text-sm text-red-600" />
+            <ComboboxOptions :new-input-value @select="open = false" />
+        </Provide>
     </ComboboxRoot>
 </template>
 
 <script setup lang="ts" generic="T extends Nullable<FormFieldValue>">
 import { ComboboxRoot } from 'reka-ui';
-import { ref } from 'vue';
+import { computed, ref, watch } from 'vue';
+import type { AcceptableValue } from 'reka-ui';
 import type { Nullable } from '@noeldemartin/utils';
 
-import ProvideRef from '@aerogel/core/components/vue/ProvideRef.vue';
+import Provide from '@aerogel/core/components/vue/Provide.vue';
 import { useSelect } from '@aerogel/core/components/contracts/Select';
+import type { AcceptRefs } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
 import type { SelectEmits, SelectProps } from '@aerogel/core/components/contracts/Select';
 import type { FormFieldValue } from '@aerogel/core/forms';
 
 import ComboboxOptions from './ComboboxOptions.vue';
 import ComboboxTrigger from './ComboboxTrigger.vue';
 import ComboboxLabel from './ComboboxLabel.vue';
+import HeadlessSelectError from '../headless/HeadlessSelectError.vue';
 
 const emit = defineEmits<SelectEmits<T>>();
 const {
     as = 'div',
     compareOptions = (a, b) => a === b,
+    newInputValue,
     ...props
 } = defineProps<SelectProps<T> & { newInputValue?: (value: string) => T }>();
-const { expose, acceptableValue, update, renderOption } = useSelect({ as, compareOptions, ...props }, emit);
-const input = ref(acceptableValue.value ? renderOption(acceptableValue.value as T) : '');
+const {
+    expose,
+    acceptableValue,
+    update: baseUpdate,
+    renderOption,
+} = useSelect(
+    computed(() => ({ as, compareOptions, ...props })),
+    emit,
+);
+const open = ref(false);
+const optionsByLabel = computed(() =>
+    Object.fromEntries(expose.options.value?.map((option) => [option.label, option.value]) ?? []));
+const combobox = {
+    input: ref(acceptableValue.value ? renderOption(acceptableValue.value as T) : ''),
+    preventChange: ref(false),
+    $group: ref(null),
+} satisfies AcceptRefs<ComboboxContext>;
+
+function update(value: AcceptableValue) {
+    combobox.input.value = renderOption(value as T);
+
+    baseUpdate(value);
+}
+
+watch(expose.value, (value) => {
+    const newOptionLabel = renderOption(value as T);
+
+    if (combobox.input.value === newOptionLabel) {
+        return;
+    }
+
+    combobox.preventChange.value = true;
+    combobox.input.value = newOptionLabel;
+});
+
+watch(combobox.input, (value) => {
+    const newInputOption = newInputValue ? (newInputValue(value) as AcceptableValue) : value;
+    const newInputOptionLabel = renderOption(newInputOption as T);
+
+    if (newInputOptionLabel in optionsByLabel.value) {
+        update(optionsByLabel.value[newInputOptionLabel] as AcceptableValue);
+
+        return;
+    }
+
+    update(newInputOption);
+});
 
 defineExpose(expose);
 </script>

package/src/components/ui/ComboboxOption.vue

@@ -1,5 +1,5 @@
 <template>
-    <ComboboxItem v-bind="$props" class="group p-1 outline-none">
+    <ComboboxItem v-bind="$props" class="group p-1 outline-none" @select="onSelect($event)">
         <div
             class="relative flex max-w-[calc(100vw-2rem)] cursor-pointer items-center gap-2 truncate rounded-md px-2 py-1 text-sm select-none *:truncate group-data-[highlighted]:bg-gray-100 group-data-[state=checked]:font-semibold group-data-[state=unchecked]:opacity-50"
         >
@@ -12,17 +12,35 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import { ComboboxItem, type ComboboxItemProps } from 'reka-ui';
+import { ComboboxItem, injectComboboxRootContext } from 'reka-ui';
 import { toString } from '@noeldemartin/utils';
+import type { ComboboxItemProps, SelectItemSelectEvent } from 'reka-ui';
 
 import { injectReactiveOrFail } from '@aerogel/core/utils';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
 
+const emit = defineEmits<{ select: [] }>();
+
 const { value } = defineProps<ComboboxItemProps>();
 const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOption> must be a child of a <Combobox>');
+const rootContext = injectComboboxRootContext();
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
 const renderedLabel = computed(() => {
     const itemOption = select.options?.find((option) => option.value === value);
 
     return itemOption ? select.renderOption(itemOption.value) : toString(value);
 });
+
+function onSelect(event: SelectItemSelectEvent<unknown>) {
+    if (rootContext.multiple.value || rootContext.disabled.value) {
+        return;
+    }
+
+    event.preventDefault();
+    combobox.preventChange = true;
+    rootContext.modelValue.value = value;
+
+    emit('select');
+}
 </script>

package/src/components/ui/ComboboxOptions.vue

@@ -16,14 +16,20 @@
                     </div>
                 </ComboboxEmpty>
 
-                <ComboboxGroup>
+                <ComboboxGroup ref="$group">
                     <ComboboxOption
                         v-if="showInputOption"
-                        :value="newInputValue?.(input) ?? (input as AcceptableValue)"
+                        :value="newInputValue?.(combobox.input) ?? (combobox.input as AcceptableValue)"
+                        @select="$emit('select')"
                     >
-                        {{ input }}
+                        {{ combobox.input }}
                     </ComboboxOption>
-                    <ComboboxOption v-for="option in filteredOptions" :key="option.key" :value="option.value" />
+                    <ComboboxOption
+                        v-for="option in filteredOptions"
+                        :key="option.key"
+                        :value="option.value"
+                        @select="$emit('select')"
+                    />
                 </ComboboxGroup>
             </ComboboxViewport>
         </ComboboxContent>
@@ -32,27 +38,34 @@
 
 <script setup lang="ts">
 import { ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxPortal, ComboboxViewport, useFilter } from 'reka-ui';
-import { computed } from 'vue';
-import type { Ref } from 'vue';
+import { computed, useTemplateRef, watch } from 'vue';
 import type { Nullable } from '@noeldemartin/utils';
 import type { AcceptableValue } from 'reka-ui';
 
-import { classes, injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils';
+import { classes, injectReactiveOrFail } from '@aerogel/core/utils';
 import type { FormFieldValue } from '@aerogel/core/forms';
 import type { SelectExpose } from '@aerogel/core/components/contracts/Select';
+import type { ComboboxContext } from '@aerogel/core/components/contracts/Combobox';
 
 import ComboboxOption from './ComboboxOption.vue';
 
-const { contains } = useFilter({ sensitivity: 'base' });
+defineEmits<{ select: [] }>();
+
 const { newInputValue } = defineProps<{ newInputValue?: (value: string) => Nullable<FormFieldValue> }>();
+const { contains } = useFilter({ sensitivity: 'base' });
 const select = injectReactiveOrFail<SelectExpose>('select', '<ComboboxOptions> must be a child of a <Combobox>');
-const input = injectOrFail<Ref<string>>('combobox-input');
-const filteredOptions = computed(() => select.options?.filter((option) => contains(option.label, input.value)) ?? []);
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
+const $group = useTemplateRef('$group');
+const filteredOptions = computed(
+    () => select.options?.filter((option) => contains(option.label, combobox.input)) ?? [],
+);
 const showInputOption = computed(
-    () => input.value && !filteredOptions.value.some((option) => option.label === input.value),
+    () => combobox.input && !filteredOptions.value.some((option) => option.label === combobox.input),
 );
 const renderedClasses = classes(
     'max-h-(--reka-combobox-content-available-height) min-w-(--reka-combobox-trigger-width)',
     'z-50 overflow-auto rounded-lg bg-white text-base shadow-lg ring-1 ring-black/5 focus:outline-hidden',
 );
+
+watch($group, () => (combobox.$group = $group.value?.$el ?? null));
 </script>

package/src/components/ui/ComboboxTrigger.vue

@@ -1,26 +1,35 @@
 <template>
-    <ComboboxAnchor>
+    <ComboboxAnchor class="relative">
         <ComboboxInput
             :id="select.id"
-            v-model="input"
+            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 } from 'vue';
-import type { Ref } from 'vue';
+import { computed, watch } from 'vue';
 
-import { classes, injectOrFail, injectReactiveOrFail } from '@aerogel/core/utils';
+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 input = injectOrFail<Ref<string>>('combobox-input');
+const combobox = injectReactiveOrFail<ComboboxContext>('combobox');
 const renderedRootClasses = computed(() =>
     classes(
         // eslint-disable-next-line vue/max-len
@@ -32,4 +41,27 @@ const renderedRootClasses = computed(() =>
             '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/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/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

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

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,
             },
         });