@effect-app/vue-components 1.2.0 → 1.4.0

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -15,7 +15,7 @@
       ripple
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
+      @change="(e: any) => inputProps.handleChange(e.target.checked)"
     />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
@@ -30,7 +30,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -44,7 +44,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
@@ -62,9 +62,9 @@
       :model-value="vuetifyValue"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
-          inputProps.field.handleChange(Number(e) as any)
+          inputProps.handleChange(Number(e) as any)
         } else {
-          inputProps.field.handleChange(undefined as any)
+          inputProps.handleChange(undefined as any)
         }
       }"
     />
@@ -77,7 +77,7 @@
         :error="inputProps.error"
         v-bind="$attrs"
         :model-value="vuetifyValue"
-        @update:model-value="inputProps.field.handleChange"
+        @update:model-value="inputProps.handleChange"
       >
         <v-radio
           v-for="option in inputProps.options"
@@ -101,8 +101,8 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
 
     <v-autocomplete
@@ -120,8 +120,8 @@
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
   </div>
 </template>

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -20,7 +20,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -67,31 +67,35 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-// watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
-watch(
-  () => !!fieldValue.value,
-  () => {
-    if (isFalsyButNotZero(fieldValue.value) && props.meta?.type !== "boolean") {
-      nextTick(() => {
-        fieldApi.setValue(
-          props.meta?.nullableOrUndefined === "undefined"
-            ? undefined
-            : null as any
-        )
-      })
-    }
+
+// convert nullish value to null or undefined based on schema
+const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value) => {
+  if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
+    props.field.handleChange(
+      props.meta?.nullableOrUndefined === "undefined"
+        ? undefined
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        : null as any
+    )
+  } else {
+    props.field.handleChange(value)
   }
-)
+}
 
+// TODO: it would be cleaner when default values are handled in the form initialization via Schema or by the one using the form component..
 onMounted(() => {
   if (
     !fieldValue.value
     && !props.meta?.required
     && props.meta?.nullableOrUndefined === "null"
   ) {
+    const isDirty = fieldState.value.meta.isDirty
     fieldApi.setValue(null as any)
+    // make sure we restore the previous dirty state..
+    fieldApi.setMeta((_) => ({ ..._, isDirty }))
   }
 })
+
 const { mapError, removeError, showErrors, showErrorsOn } = (props.field.form as any).errorContext // todo; update types to include extended Omega Form props
 
 const realDirty = ref(false)
@@ -153,6 +157,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   min: props.meta?.type === "number" && props.meta?.minimum,
   name: props.field.name,
   modelValue: props.field.state.value,
+  handleChange,
   errorMessages: showedErrors.value,
   error: !!showedErrors.value.length,
   field: props.field,

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -12,10 +12,12 @@
 <script
   setup
   lang="ts"
-  generic="From extends Record<PropertyKey, any>,
+  generic="
+  From extends Record<PropertyKey, any>,
   To extends Record<PropertyKey, any>,
   K extends keyof OmegaFormState<From, To> = keyof OmegaFormState<From, To>,
-  Props = DefaultInputProps<From>"
+  Props = DefaultInputProps<From>
+"
 >
 /**
  * Form component that wraps TanStack Form's useForm hook