@effect-app/vue-components 2.11.5 → 3.0.1

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="form.Field"
+    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -75,12 +76,22 @@ const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
 )
 
 const meta = computed(() => {
-  const fromArray = getMetaFromArray?.value?.(props.name as DeepKeys<From>)
-  if (fromArray) {
-    return fromArray
+  if (getMetaFromArray?.value && getMetaFromArray.value(props.name as DeepKeys<From>)) {
+    return getMetaFromArray.value(propsName.value)
   }
-  const formMeta = props.form.meta[propsName.value]
-  return formMeta
+  return props.form.meta[propsName.value]
+})
+
+// Key to force Field re-mount when meta type changes (for TaggedUnion support)
+const fieldKey = computed(() => {
+  const m = meta.value
+  if (!m) return propsName.value
+  // Include type and key constraints in the key so Field re-mounts when validation rules change
+  // Cast to any since not all FieldMeta variants have these properties
+  const fm = m as any
+  return `${propsName.value}-${fm.type}-${fm.minLength ?? ""}-${fm.maxLength ?? ""}-${fm.minimum ?? ""}-${
+    fm.maximum ?? ""
+  }`
 })
 
 // Call useIntl during setup to avoid issues when computed re-evaluates

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -84,6 +84,9 @@ const fieldApi = props.field
 
 const fieldState = useStore(fieldApi.store, (state) => state)
 
+// Get errors from form-level fieldMeta (persists across Field re-mounts)
+const formFieldMeta = useStore(fieldApi.form.store, (state) => state.fieldMeta)
+
 const fieldType = computed(() => {
   if (props.type) return props.type
   if (props.meta?.type === "string") {
@@ -95,8 +98,12 @@ const fieldType = computed(() => {
 
 props.register(computed(() => ({ name: props.field.name, label: props.label, id })))
 
-// workaround strange tanstack form issue where the errors key becomes undefined ???
-const _errors = computed(() => fieldState.value.meta.errors ?? [])
+// Get errors from form-level fieldMeta instead of field-level state
+// This ensures errors persist when Field components re-mount due to :key changes
+const _errors = computed(() => {
+  const fieldMeta = formFieldMeta.value[props.field.name] as any
+  return fieldMeta?.errors ?? []
+})
 const errors = computed(() =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   _errors.value.map((e: any) => e?.message).filter(Boolean)

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -34,7 +34,6 @@ watch(
   },
   (newTag) => {
     currentTag.value = newTag ?? null
-    return undefined
   },
   { immediate: true }
 )

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -12,7 +12,7 @@
   generic="From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, type DeepValue } from "@tanstack/vue-form"
-import { nextTick, watch } from "vue"
+import { watch } from "vue"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type useOmegaForm } from "./useOmegaForm"
 
@@ -23,30 +23,19 @@ const props = defineProps<{
   form: ReturnType<typeof useOmegaForm<From, To>>
 }>()
 
+const values = props.form.useStore(({ values }) => values)
+
 // Watch for _tag changes
 watch(() => props.state, (newTag, oldTag) => {
   if (newTag === null) {
     props.field.setValue(null as DeepValue<From, Name>)
   }
 
-  if (newTag !== oldTag && newTag) {
-    // Use nextTick to avoid cleanup conflicts during reactive updates
-    nextTick(() => {
-      // Get default values for the new tag to ensure correct types
-      const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {}
-      // Get current form values to preserve user's selections (e.g., carrier)
-      const currentValues = props.form.state.values
-      // Merge: keep current values, override with tag defaults for type correctness, set new _tag
-      const resetValues = {
-        ...currentValues,
-        ...tagDefaults,
-        _tag: newTag
-      }
-      props.form.reset(resetValues as any)
-      setTimeout(() => {
-        props.field.validate("change")
-      }, 0)
-    })
+  if (newTag !== oldTag) {
+    props.form.reset(values.value)
+    setTimeout(() => {
+      props.field.validate("change")
+    }, 0)
   }
 }, { immediate: true })
 </script>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -218,7 +218,6 @@ export type OmegaConfig<T> = {
 export interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
   unionMeta: Record<string, MetaRecord<From>>
-  unionDefaultValues: Record<string, Record<string, any>>
   clear: () => void
   i18nNamespace?: string
   ignorePreventCloseEvents?: boolean
@@ -684,7 +683,7 @@ export const useOmegaForm = <
   const standardSchema = S.standardSchemaV1(schema)
   const decode = S.decode(schema)
 
-  const { meta, unionDefaultValues, unionMeta } = generateMetaFromSchema(schema)
+  const { meta, unionMeta } = generateMetaFromSchema(schema)
 
   const persistencyKey = computed(() => {
     if (omegaConfig?.persistency?.id) {
@@ -919,7 +918,6 @@ export const useOmegaForm = <
         // Reset with current values to mark them as the new baseline
         form.reset(values.value)
       }
-      return undefined
     })
   }
 
@@ -956,7 +954,6 @@ export const useOmegaForm = <
     ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
     meta,
     unionMeta,
-    unionDefaultValues,
     clear,
     handleSubmit: (meta?: Record<string, any>) => {
       const span = api.trace.getSpan(api.context.active())
@@ -965,18 +962,8 @@ export const useOmegaForm = <
     // /** @experimental */
     handleSubmitEffect,
     registerField: (field: ComputedRef<{ name: string; label: string; id: string }>) => {
-      watch(field, (f) => {
-        fieldMap.value.set(f.name, { label: f.label, id: f.id })
-      }, { immediate: true })
-      onUnmounted(() => {
-        // Only delete if this component instance still owns the registration (id matches)
-        // This prevents the old component from removing the new component's registration
-        // when Vue re-keys and mounts new before unmounting old
-        const current = fieldMap.value.get(field.value.name)
-        if (current?.id === field.value.id) {
-          fieldMap.value.delete(field.value.name)
-        }
-      })
+      watch(field, (f) => fieldMap.value.set(f.name, { label: f.label, id: f.id }), { immediate: true })
+      onUnmounted(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
     }
   })
 

package/src/components/OmegaForm/useRegisterField.ts

@@ -5,9 +5,7 @@ const Key = Symbol("injected") as InjectionKey<Map<string, { label: string; id:
 
 export const useRegisterField = (field: ComputedRef<{ name: string; label: string; id: string }>) => {
   const map = injectCertain(Key)
-  watch(field, (f) => {
-    map.set(f.name, { label: f.label, id: f.id })
-  }, { immediate: true })
+  watch(field, (f) => map.set(f.name, { label: f.label, id: f.id }), { immediate: true })
   onUnmounted(() => map.delete(field.value.name)) // todo; perhap only when owned
 }
 

package/dist/vue-components.es31.js

@@ -1,4 +0,0 @@
-import f from "./vue-components.es18.js";
-export {
-  f as default
-};

package/dist/vue-components.es36.js

@@ -1,34 +0,0 @@
-import { defineComponent as m, createElementBlock as d, openBlock as u, withModifiers as f, createElementVNode as l, unref as s, renderSlot as a } from "vue";
-import { useStore as b } from "@tanstack/vue-form";
-import { usePreventClose as p } from "./vue-components.es11.js";
-import { getOmegaStore as c } from "./vue-components.es53.js";
-const S = ["disabled"], V = /* @__PURE__ */ m({
-  __name: "OmegaWrapper",
-  props: {
-    form: {},
-    disabled: { type: Boolean },
-    subscribe: {}
-  },
-  setup(o) {
-    const e = o, i = b(
-      e.form.store,
-      (t) => t.isSubmitting
-    ), n = c(
-      e.form,
-      e.subscribe
-    );
-    return e.form.ignorePreventCloseEvents || p(() => e.form.useStore((t) => t.isDirty)), (t, r) => (u(), d("form", {
-      novalidate: "",
-      onSubmit: r[0] || (r[0] = f((v) => o.form.handleSubmit(), ["prevent", "stop"]))
-    }, [
-      l("fieldset", {
-        disabled: s(i) || o.disabled
-      }, [
-        a(t.$slots, "default", { subscribedValues: s(n) }, void 0, !0)
-      ], 8, S)
-    ], 32));
-  }
-});
-export {
-  V as default
-};