@aerogel/core 0.1.1-next.b342b522bd4e8a154c68962bb545cd8ae66010c3 → 0.1.1-next.bf5c51083c0817e96fa4f38273c32d388441f514

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@aerogel/core",
-    "version": "0.1.1-next.b342b522bd4e8a154c68962bb545cd8ae66010c3",
+    "version": "0.1.1-next.bf5c51083c0817e96fa4f38273c32d388441f514",
     "type": "module",
     "sideEffects": false,
     "exports": {
@@ -29,8 +29,8 @@
         "vue": "^3.5.0"
     },
     "dependencies": {
-        "@noeldemartin/utils": "0.7.1-next.5f7bc66cad4aaa2dce4a2314e99d562ff3ab993b",
-        "@noeldemartin/vue-modals": "0.0.0-next.124c6a1c5e8a2cef4ec43d6a01de0fc450f155b1",
+        "@noeldemartin/utils": "0.7.3",
+        "@noeldemartin/vue-modals": "0.1.1",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.4",

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/ui/Combobox.vue

@@ -52,6 +52,8 @@ const {
     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),
@@ -64,12 +66,24 @@ function update(value: AcceptableValue) {
     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 renderedValue = renderOption(expose.value.value);
-    const renderedNewInputOption = renderOption(expose.value.value as T);
+    const newInputOptionLabel = renderOption(newInputOption as T);
+
+    if (newInputOptionLabel in optionsByLabel.value) {
+        update(optionsByLabel.value[newInputOptionLabel] as AcceptableValue);
 
-    if (renderedValue === renderedNewInputOption) {
         return;
     }
 

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.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';
@@ -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']> {
@@ -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());

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

@@ -283,7 +283,8 @@ export class UIService extends Service {
     ): Promise<GetModalResponse<T>>;
 
     public modal<T extends Component>(component: T, componentProps?: GetModalProps<T>): Promise<GetModalResponse<T>> {
-        return showModal(component, componentProps ?? {});
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return showModal(component as any, componentProps ?? {}) as Promise<GetModalResponse<T>>;
     }
 
     public async closeAllModals(): Promise<void> {

package/src/utils/classes.ts

@@ -4,10 +4,9 @@ import { cva } from 'class-variance-authority';
 import { twMerge } from 'tailwind-merge';
 import type { ClassValue } from 'clsx';
 import type { PropType } from 'vue';
-import type { GetClosureArgs, GetClosureResult } from '@noeldemartin/utils';
 
-export type CVAConfig<T> = NonNullable<GetClosureArgs<typeof cva<T>>[1]>;
-export type CVAProps<T> = NonNullable<GetClosureArgs<GetClosureResult<typeof cva<T>>>[0]>;
+export type CVAConfig<T> = NonNullable<Parameters<typeof cva<T>>[1]>;
+export type CVAProps<T> = NonNullable<Parameters<ReturnType<typeof cva<T>>>[0]>;
 export type Variants<T extends Record<string, string | boolean>> = Required<{
     [K in keyof T]: Exclude<T[K], undefined> extends string
         ? { [key in Exclude<T[K], undefined>]: string | null }

package/src/utils/composition/reactiveSet.ts

@@ -2,10 +2,14 @@ import { fail } from '@noeldemartin/utils';
 import { customRef } from 'vue';
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function reactiveSet<T>(initial?: T[] | Set<T>) {
+export function reactiveSet<T>(initial?: T[] | Set<T>, options: { equals?: (a: T, b: T) => boolean } = {}) {
     let set: Set<T> = new Set(initial);
     let trigger: () => void;
     let track: () => void;
+    const equals = options?.equals;
+    const hasEqual = equals
+        ? (item: T) => ref.value.values().some((existingItem) => equals(item, existingItem))
+        : () => false;
     const ref = customRef((_track, _trigger) => {
         track = _track;
         trigger = _trigger;
@@ -25,11 +29,15 @@ export function reactiveSet<T>(initial?: T[] | Set<T>) {
         has(item: T) {
             track();
 
-            return ref.value.has(item);
+            return ref.value.has(item) || hasEqual(item);
         },
         add(item: T) {
             trigger();
 
+            if (hasEqual(item)) {
+                return;
+            }
+
             ref.value.add(item);
         },
         delete(item: T) {

package/src/utils/time.ts

@@ -1,2 +1,7 @@
+import type { Nullable } from '@noeldemartin/utils';
+
 export const MINUTE_MILLISECONDS = 60000;
-export const LOCAL_TIMEZONE_OFFSET = -new Date().getTimezoneOffset() * -MINUTE_MILLISECONDS;
+
+export function getLocalTimezoneOffset(date?: Nullable<Date>): number {
+    return -(date ?? new Date()).getTimezoneOffset() * -MINUTE_MILLISECONDS;
+}