@effect-app/vue-components 2.10.11 → 2.11.0

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,6 +1,7 @@
 <template>
   <component
     :is="form.Field"
+    :key="fieldKey"
     :name="name"
     :validators="{
       onChange: schema,
@@ -41,6 +42,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { computed, inject, type Ref, useAttrs } from "vue"
+import { useIntl } from "../../utils"
 import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
 import { useErrorLabel } from "./useOmegaForm"
@@ -74,18 +76,35 @@ const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
 )
 
 const meta = computed(() => {
-  if (getMetaFromArray?.value && getMetaFromArray.value(props.name as DeepKeys<From>)) {
-    return getMetaFromArray.value(propsName.value)
+  const fromArray = getMetaFromArray?.value?.(props.name as DeepKeys<From>)
+  if (fromArray) {
+    return fromArray
   }
-  return props.form.meta[propsName.value]
+  const formMeta = props.form.meta[propsName.value]
+  return formMeta
 })
 
+// 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
+const { trans } = useIntl()
+
 const schema = computed(() => {
   if (!meta.value) {
     console.log(props.name, Object.keys(props.form.meta), props.form.meta)
     throw new Error("Meta is undefined")
   }
-  return generateInputStandardSchemaFromFieldMeta(meta.value)
+  return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
 })
 
 const errori18n = useErrorLabel(props.form)

package/src/components/OmegaForm/OmegaTaggedUnion.vue

@@ -6,18 +6,57 @@
   Name extends DeepKeys<From> | undefined = DeepKeys<From>"
 >
 import { type DeepKeys } from "@tanstack/vue-form"
+import { computed, provide, ref, watch } from "vue"
 import { type TaggedUnionOption } from "./InputProps"
 import { type FieldPath } from "./OmegaFormStuff"
 import OmegaTaggedUnionInternal from "./OmegaTaggedUnionInternal.vue"
 import { type useOmegaForm } from "./useOmegaForm"
 
-defineProps<{
+const props = defineProps<{
   name?: Name
   form: ReturnType<typeof useOmegaForm<From, To>>
   type?: "select" | "radio"
   options: TaggedUnionOption<From, Name>[]
   label?: string
 }>()
+
+// Track the current tag value reactively
+const currentTag = ref<string | null>(null)
+
+// Watch the form's _tag field value
+const tagPath = computed(() => props.name ? `${props.name}._tag` : "_tag")
+const formValues = props.form.useStore((state) => state.values)
+watch(
+  () => {
+    const path = tagPath.value
+    // Navigate to the nested value
+    return path.split(".").reduce((acc: any, key) => acc?.[key], formValues.value) as string | null
+  },
+  (newTag) => {
+    currentTag.value = newTag ?? null
+  },
+  { immediate: true }
+)
+
+// Provide tag-specific metadata to all child Input components
+const getMetaFromArray = computed(() => {
+  const tag = currentTag.value
+
+  const getMeta = (path: string) => {
+    if (!tag) return null
+
+    // Get the tag-specific metadata
+    const tagMeta = props.form.unionMeta[tag]
+    if (!tagMeta) return null
+
+    // Look up the meta for this path
+    return tagMeta[path as keyof typeof tagMeta] ?? null
+  }
+
+  return getMeta
+})
+
+provide("getMetaFromArray", getMetaFromArray)
 </script>
 
 <template>

package/src/components/OmegaForm/OmegaTaggedUnionInternal.vue

@@ -31,8 +31,15 @@ watch(() => props.state, (newTag, oldTag) => {
     props.field.setValue(null as DeepValue<From, Name>)
   }
 
-  if (newTag !== oldTag) {
-    props.form.reset(values.value)
+  if (newTag !== oldTag && newTag) {
+    // Get default values for the new tag to ensure correct types
+    const tagDefaults = (props.form as any).unionDefaultValues?.[newTag as string] ?? {}
+    // Merge: keep _tag from current values, but use tag defaults for other fields
+    const resetValues = {
+      ...tagDefaults,
+      _tag: newTag
+    }
+    props.form.reset(resetValues as any)
     setTimeout(() => {
       props.field.validate("change")
     }, 0)

package/src/components/OmegaForm/useOmegaForm.ts

@@ -217,6 +217,8 @@ 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
@@ -682,7 +684,7 @@ export const useOmegaForm = <
   const standardSchema = S.standardSchemaV1(schema)
   const decode = S.decode(schema)
 
-  const { meta } = generateMetaFromSchema(schema)
+  const { meta, unionDefaultValues, unionMeta } = generateMetaFromSchema(schema)
 
   const persistencyKey = computed(() => {
     if (omegaConfig?.persistency?.id) {
@@ -952,6 +954,8 @@ export const useOmegaForm = <
     i18nNamespace: omegaConfig?.i18nNamespace,
     ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
     meta,
+    unionMeta,
+    unionDefaultValues,
     clear,
     handleSubmit: (meta?: Record<string, any>) => {
       const span = api.trace.getSpan(api.context.active())
@@ -961,7 +965,15 @@ export const useOmegaForm = <
     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(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
+      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)
+        }
+      })
     }
   })
 

package/dist/vue-components.es34.js

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

package/dist/vue-components.es37.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};