refactor: fix type errors

apps/admin/src/components/PluginSettings/EditApiKeyForm.vue

@@ -42,7 +42,7 @@ const createForm = (): FormInstance => {
         name: FIELD_API_KEY,
         optional: true,
         ref: apiKeyRef,
-        isValid: () => Boolean(hasAccount.value),
+        isValid: computed(() => Boolean(hasAccount.value)),
         readOnlyWhen: () => Boolean(hasAccount.value),
       }),
 

apps/admin/src/composables/useElementContext.ts

@@ -1,7 +1,7 @@
 import {type WritableComputedRef} from 'vue';
 import {useVModel} from '@vueuse/core';
 import {generateFieldId} from '../utils';
-import {type PdkElementEmits, type PdkElementProps} from '../types';
+import {type ElementInstance, type PdkElementEmits, type PdkElementProps} from '../types';
 
 export type ElementContext<T = unknown> = {
   id: string;
@@ -17,7 +17,7 @@ export const useElementContext = <
   props: Props,
   emit: Emits,
 ): ElementContext<T1> => {
-  const id = generateFieldId(props.element);
+  const id = generateFieldId(props.element as ElementInstance);
   const model = useVModel(props, undefined, emit) as WritableComputedRef<T1>;
 
   return {

apps/admin/src/composables/useInputWithOptionsContext.ts

@@ -73,6 +73,5 @@ export const useInputWithOptionsContext = <
     );
   });
 
-  // @ts-expect-error todo
   return {id, options, model};
 };

apps/admin/src/composables/useTriStateInputContext.ts

@@ -1,11 +1,6 @@
 import {computed, markRaw, reactive, ref, type Ref, watch, type WritableComputedRef} from 'vue';
 import {get} from '@vueuse/core';
-import {
-  type AnyElementConfiguration,
-  type ComponentOrHtmlElement,
-  defineField,
-  useForm,
-} from '@myparcel/vue-form-builder';
+import {type AnyElementConfiguration, defineField, useForm} from '@myparcel/vue-form-builder';
 import {toTriState, triStateToBoolean} from '../utils';
 import {
   type ElementInstance,
@@ -18,7 +13,7 @@ import {TriState} from '../data';
 import {useElementContext} from './useElementContext';
 import {useLanguage} from './language';
 
-type BoolElInstance = ElementInstance<PdkElementProps<ComponentOrHtmlElement>, ComponentOrHtmlElement, string, boolean>;
+type BoolElInstance = ElementInstance<boolean, PdkElementProps>;
 
 interface TriStateInputContext {
   id: string;
@@ -68,7 +63,7 @@ export const useTriStateInputContext: UseTriStateInputContext = (props, emit) =>
       ref: inheritModel,
       name: `${props.element.name}__inherit`,
       label: translate('settings_use_default_value'),
-    }) as unknown as BoolElInstance,
+    }),
   );
 
   const toggleElement = reactive(
@@ -77,8 +72,9 @@ export const useTriStateInputContext: UseTriStateInputContext = (props, emit) =>
       name: toggleName,
       ref: toggleModel,
       // The toggle is readonly when inherit is enabled or the element itself is set to readonly.
+      // @ts-expect-error todo
       isReadOnly: markRaw(computed(() => get(inheritModel) || get(props.element.isReadOnly))),
-    }) as unknown as BoolElInstance,
+    }),
   );
 
   // When the toggle is changed, the model is updated to 1/0 as long as inherit is disabled.
@@ -122,5 +118,5 @@ export const useTriStateInputContext: UseTriStateInputContext = (props, emit) =>
     model,
     toggleElement,
     toggleModel,
-  };
+  } as unknown as TriStateInputContext;
 };

apps/admin/src/forms/form-builder/operations/parseBuilders.ts

@@ -1,4 +1,4 @@
-import {type AnyElementConfiguration} from '@myparcel/vue-form-builder';
+import {type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
 import {isOfType} from '@myparcel/ts-utils';
 import {
   type FormAfterUpdateBuilder,
@@ -14,8 +14,8 @@ export const parseBuilders = (
   builders: FormBuilder[],
   prefix: string,
   customHandlers: HandlerDefinition[] = [],
-): Partial<AnyElementConfiguration> => {
-  const config: Partial<AnyElementConfiguration> = {};
+): Partial<InteractiveElementConfiguration> => {
+  const config: Partial<InteractiveElementConfiguration> = {};
 
   builders?.forEach((builder) => {
     if (isOfType<FormVisibleWhenBuilder>(builder, '$visibleWhen')) {

apps/admin/src/forms/helpers/setFieldProp.ts

@@ -13,7 +13,7 @@ export const setFieldProp: SetFieldProp = (arg1, arg2, arg3, arg4) => {
   let value = arg3;
 
   if (isOfType<FormInstance>(arg1, 'fields')) {
-    const foundField = arg1.getField(arg2);
+    const foundField = arg1.getField<ElementInstance>(arg2);
 
     if (!foundField) {
       throw new Error(`Field ${arg2} not found`);

apps/admin/src/forms/helpers/triStateFieldIsEnabled.ts

@@ -4,7 +4,7 @@ import {type ElementInstance, type TriStateInputProps} from '../../types';
 import {TriState} from '../../data';
 
 export const triStateFieldIsEnabled = (form: FormInstance, fieldName: string): boolean => {
-  const field = form.getField(fieldName) as unknown as ElementInstance<TriStateInputProps> | undefined;
+  const field = form.getField(fieldName) as unknown as ElementInstance<TriState, TriStateInputProps> | undefined;
 
   if (!field) {
     return false;

apps/admin/src/forms/helpers/updateFieldsDefaults.ts

@@ -11,7 +11,7 @@ export const updateFieldsDefaults = (
   {form, name}: InteractiveElementInstance,
   inheritedDeliveryOptions: Record<string, Shipment.ModelDeliveryOptions>,
 ): void => {
-  get(form.fields).forEach((otherField) => {
+  (get(form.fields) as InteractiveElementInstance[]).forEach((otherField) => {
     if (otherField.name === name) {
       return;
     }

apps/admin/src/forms/shipmentOptions/fields/createCarrierField.ts

@@ -38,7 +38,6 @@ export const createCarrierField = (
       options: [],
     },
 
-    // @ts-expect-error todo
     onBeforeMount: async (field) => {
       const carrierSelectOptions = await Promise.all(
         dynamicContext.carriers.map(async (carrier): Promise<RadioGroupOption> => {
@@ -63,9 +62,9 @@ export const createCarrierField = (
 
       setFieldProp(field, PROP_OPTIONS, carrierSelectOptions);
 
-      await field.afterUpdate(field);
+      await field?.afterUpdate?.(field, get(field.ref), undefined);
 
-      updateFieldsDefaults(get(field.ref), field, inheritedDeliveryOptions);
+      updateFieldsDefaults(get(field.ref) as string, field, inheritedDeliveryOptions);
     },
 
     afterUpdate: (field, newCarrier: string) => {

apps/admin/src/types/form.types.ts

@@ -1,10 +1,5 @@
 import {type Keyable} from '@myparcel-pdk/common';
-import {
-  type ComponentOrHtmlElement,
-  type ElementName,
-  type InteractiveElementInstance,
-} from '@myparcel/vue-form-builder';
-import {type Replace} from '@myparcel/ts-utils';
+import {type InteractiveElementInstance} from '@myparcel/vue-form-builder';
 import {type AdminIcon, type SortType} from '../data';
 import {type Translation} from './language.types';
 
@@ -14,23 +9,20 @@ export type GlobalFieldProps = {
   value?: unknown;
 };
 
-export type ElementInstance<
-  Props extends Record<string, unknown> = Record<string, unknown>,
-  C extends ComponentOrHtmlElement = ComponentOrHtmlElement,
-  N extends ElementName = string,
-  RT = unknown,
-> = Replace<InteractiveElementInstance<C, N, RT>, 'props', Props & GlobalFieldProps & Record<string, unknown>>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ElementInstance<Type = unknown, Props = any> = InteractiveElementInstance<
+  Type,
+  Props & GlobalFieldProps & Record<string, unknown>
+>;
 
 export type OptionsProp<T extends SelectOptionValue = SelectOptionValue> = {
   options?: SelectOption<T>[];
   sort?: SortType;
 };
 
-export type PdkElementProps<
-  ModelValue extends unknown = Keyable,
-  Props extends Record<string, unknown> = Record<string, unknown>,
-> = {
-  element: ElementInstance<Props>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type PdkElementProps<ModelValue extends unknown = Keyable, Props = any> = {
+  element: ElementInstance<ModelValue, Props>;
   modelValue: ModelValue;
 };
 

apps/admin/src/utils/forms/createFormElement.ts

@@ -1,16 +1,11 @@
 import {ref} from 'vue';
-import {
-  type ComponentOrHtmlElement,
-  type ElementName,
-  type FormInstance,
-  type InteractiveElementConfiguration,
-} from '@myparcel/vue-form-builder';
+import {type FormInstance, type InteractiveElementConfiguration} from '@myparcel/vue-form-builder';
 import {type ElementInstance, type PdkElementProps} from '../../types';
 
-export const createFormElement = <RT = unknown, C extends ComponentOrHtmlElement = 'input'>(
-  config?: Partial<InteractiveElementConfiguration<C, ElementName, RT>>,
+export const createFormElement = <Type = unknown>(
+  config?: Partial<InteractiveElementConfiguration<Type>>,
   formName?: string,
-): ElementInstance<PdkElementProps<C>, C, ElementName, RT> => {
+): ElementInstance<Type, PdkElementProps<Type>> => {
   const form = {
     name: formName ?? 'form',
   } as unknown as FormInstance;
@@ -21,5 +16,5 @@ export const createFormElement = <RT = unknown, C extends ComponentOrHtmlElement
     name: 'element',
     ref: ref(),
     ...config,
-  } as unknown as ElementInstance<PdkElementProps<C>, C, ElementName, RT>;
+  } as unknown as ElementInstance<Type, PdkElementProps<Type>>;
 };