fix: fix setting ref values and pass down slots and attrs

libs/core/src/__tests__/form/field.spec.ts

@@ -164,4 +164,36 @@ describe('Form fields', () => {
 
     expect(wrapper.html()).toMatchSnapshot();
   });
+
+  it('it can invalidate a field', async () => {
+    expect.assertions(1);
+
+    const field = defineField({
+      component: 'input',
+      name: 'element',
+      ref: ref(''),
+    });
+
+    const {instance: form} = await generateTestForm<{element: string}>([field]);
+    const fieldInstance = form.getField('element');
+    fieldInstance.setInvalid();
+
+    expect(fieldInstance?.isValid.value).toBe(false);
+  });
+
+  it('can add an error to a field', async () => {
+    expect.assertions(1);
+
+    const field = defineField({
+      component: 'input',
+      name: 'element',
+      ref: ref(''),
+    });
+
+    const {instance: form} = await generateTestForm<{element: string}>([field]);
+    const fieldInstance = form.getField('element');
+    fieldInstance.addError('error message');
+
+    expect(fieldInstance?.errors.value).toEqual(['error message']);
+  });
 });

libs/core/src/form/Field.ts

@@ -1,11 +1,11 @@
 // noinspection JSUnusedGlobalSymbols
-import {ref, watch, toValue, reactive, type UnwrapNestedRefs, computed, markRaw, type Ref} from 'vue';
+import {ref, watch, toValue, reactive, type UnwrapNestedRefs, computed, markRaw, type Ref, isRef} from 'vue';
 import {isDefined} from '@vueuse/core';
 import {type CustomHookItem, createHookManager} from '@myparcel-vfb/hook-manager';
 import {isOfType, asyncEvery, type PromiseOr} from '@myparcel/ts-utils';
 import {isRequired} from '../validators';
 import {normalizeFieldConfiguration} from '../utils/normalizeFieldConfiguration';
-import {useDynamicWatcher} from '../utils';
+import {useDynamicWatcher, updateMaybeRef} from '../utils';
 import {
   type ToRecord,
   type FieldConfiguration,
@@ -130,35 +130,6 @@ export class Field<Type = unknown, Props extends ComponentProps = ComponentProps
     this.destroyHandles.value.push(stopRefWatcher);
   }
 
-  private initializeWatchers(
-    config: FieldConfiguration<Type, Props>,
-    resolvedConfig: FieldConfiguration<Type, Props>,
-  ): void {
-    (
-      [
-        [config.visibleWhen, this.isVisible, resolvedConfig.visible],
-        [config.disabledWhen, this.isDisabled, resolvedConfig.disabled],
-        [config.optionalWhen, this.isOptional, resolvedConfig.optional],
-        [config.readOnlyWhen, this.isReadOnly, resolvedConfig.readOnly],
-      ] satisfies [
-        undefined | ((instance: FieldInstance<Type, Props>) => PromiseOr<boolean>),
-        Ref<boolean>,
-        boolean | undefined,
-      ][]
-    ).forEach(([configProperty, computedProperty, staticProperty]) => {
-      if (!isDefined(configProperty)) {
-        return;
-      }
-
-      computedProperty.value = staticProperty;
-
-      // @ts-expect-erro todo
-      const stopHandler = useDynamicWatcher(() => configProperty(this), computedProperty);
-
-      this.destroyHandles.value.push(stopHandler);
-    });
-  }
-
   public blur = async (): Promise<void> => {
     await this.hooks.execute('beforeBlur', this, toValue(this.ref));
 
@@ -189,19 +160,27 @@ export class Field<Type = unknown, Props extends ComponentProps = ComponentProps
   };
 
   public setValue(value: Type): void {
-    this.ref.value = value;
+    updateMaybeRef(this.ref, value);
   }
 
   public setDisabled(value: boolean): void {
-    this.isDisabled.value = value;
+    updateMaybeRef(this.isDisabled, value);
   }
 
   public setOptional(value: boolean): void {
-    this.isOptional.value = value;
+    updateMaybeRef(this.isOptional, value);
   }
 
   public setReadOnly(value: boolean): void {
-    this.isReadOnly.value = value;
+    updateMaybeRef(this.isReadOnly, value);
+  }
+
+  public addError(error: string): void {
+    updateMaybeRef(this.errors, [...toValue(this.errors), error]);
+  }
+
+  public setInvalid(): void {
+    updateMaybeRef(this.isValid, false);
   }
 
   public validate = async (): Promise<boolean> => {
@@ -251,6 +230,35 @@ export class Field<Type = unknown, Props extends ComponentProps = ComponentProps
     return toValue(this.isValid);
   };
 
+  private initializeWatchers(
+    config: FieldConfiguration<Type, Props>,
+    resolvedConfig: FieldConfiguration<Type, Props>,
+  ): void {
+    (
+      [
+        [config.visibleWhen, this.isVisible, resolvedConfig.visible],
+        [config.disabledWhen, this.isDisabled, resolvedConfig.disabled],
+        [config.optionalWhen, this.isOptional, resolvedConfig.optional],
+        [config.readOnlyWhen, this.isReadOnly, resolvedConfig.readOnly],
+      ] satisfies [
+        undefined | ((instance: FieldInstance<Type, Props>) => PromiseOr<boolean>),
+        Ref<boolean>,
+        boolean | undefined,
+      ][]
+    ).forEach(([configProperty, computedProperty, staticProperty]) => {
+      if (!isDefined(configProperty)) {
+        return;
+      }
+
+      // @ts-expect-error todo
+      computedProperty.value = staticProperty;
+
+      const stopHandler = useDynamicWatcher(() => configProperty(this), computedProperty);
+
+      this.destroyHandles.value.push(stopHandler);
+    });
+  }
+
   private createValidators(config: FieldConfiguration<Type, Props>): void {
     let validators: Validator<Type, Props>[] = [];
 

libs/core/src/types/field.types.ts

@@ -249,7 +249,11 @@ export interface FieldInstance<Type = unknown, Props extends ComponentProps = Co
 
   setReadOnly(optional: boolean): void;
 
+  addError(error: string): void;
+
   setVisible(value: boolean): void;
+
+  setInvalid(): void;
 }
 
 export type ElementProp<Type = unknown, Props = ComponentProps> = UnwrapNestedRefs<FieldInstance<Type, Props>>;

libs/core/src/utils/createField.spec.ts

@@ -26,7 +26,7 @@ describe('createField', () => {
     const field = createField({name: 'test', ref: ref('value'), component: 'input'});
 
     expect(field).toStrictEqual({
-      Component: expect.objectContaining({render: expect.any(Function)}),
+      Component: expect.any(Function),
       Errors: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       Label: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       field: {name: 'test', ref: 'value', component: 'input'},
@@ -38,7 +38,7 @@ describe('createField', () => {
     const field = createField({name: 'test', ref: ref('value2'), component: testComponent});
 
     expect(field).toStrictEqual({
-      Component: expect.objectContaining({render: expect.any(Function)}),
+      Component: expect.any(Function),
       Errors: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       Label: expect.objectContaining({__asyncLoader: expect.any(Function)}),
       field: {name: 'test', ref: 'value2', component: testComponent},

libs/core/src/utils/createField.ts

@@ -21,6 +21,8 @@ import FormElementWrapper from '../components/FormElementWrapper';
 
 const createMainComponent = <Type = unknown, Props extends ComponentProps = ComponentProps>(
   field: FieldConfiguration<Type, Props>,
+  attrs: Record<string, unknown>,
+  slots: Record<string, unknown>,
 ): Component => {
   return defineComponent({
     setup() {
@@ -62,7 +64,19 @@ const createMainComponent = <Type = unknown, Props extends ComponentProps = Comp
       }
 
       return (
-        this.element && h(FormElementWrapper, {...this.$attrs, form: this.form, element: this.element}, this.$slots)
+        this.element && h(
+          FormElementWrapper,
+          {
+            ...attrs,
+            ...this.$attrs,
+            form: this.form,
+            element: this.element
+          },
+          {
+            ...this.$slots,
+            ...slots,
+          }
+        )
       );
     },
   });
@@ -123,7 +137,7 @@ export const createField = <Type = unknown, Props extends ComponentProps = Compo
   return reactive({
     field,
     ref: (field.ref ?? ref<Type>()) as Type extends undefined ? undefined : Ref<Type>,
-    Component: markRaw(createMainComponent(field)),
+    Component: markRaw((_, ctx) => h(createMainComponent(field, ctx.attrs, ctx.slots))),
     Errors: createAsyncComponent(() => createErrorComponent(field)),
     Label: createAsyncComponent(() => createLabelComponent(field)),
   });

libs/core/src/utils/index.ts

@@ -4,6 +4,7 @@ export * from './defineField';
 export * from './defineForm';
 export * from './generateFieldName';
 export * from './markComponentAsRaw';
+export * from './updateMaybeRef';
 export * from './useDynamicWatcher';
 export {getDefaultFormConfiguration} from './getDefaultFormConfiguration';
 

libs/core/src/utils/updateMaybeRef.ts

@@ -0,0 +1,10 @@
+import {isRef, type MaybeRef} from 'vue';
+
+export const updateMaybeRef = <T>(maybeRef: MaybeRef<T>, value: T): void => {
+  if (isRef(maybeRef)) {
+    maybeRef.value = value;
+    return;
+  }
+
+  maybeRef = value;
+};