@effect-app/vue-components 2.10.8 → 2.10.10

package/dist/vue-components.es6.js

@@ -1,8 +1,9 @@
-import { defineComponent as y, computed as o, useAttrs as F, inject as $, createBlock as u, openBlock as i, resolveDynamicComponent as k, withCtx as m, createCommentVNode as A, mergeProps as M, unref as S, createSlots as w, renderSlot as f, normalizeProps as d, guardReactiveProps as c } from "vue";
-import { generateInputStandardSchemaFromFieldMeta as P } from "./vue-components.es12.js";
-import j from "./vue-components.es7.js";
-import { useErrorLabel as B } from "./vue-components.es10.js";
-const D = /* @__PURE__ */ y({
+import { defineComponent as F, computed as l, useAttrs as A, inject as M, createBlock as i, openBlock as f, resolveDynamicComponent as S, withCtx as u, createCommentVNode as w, mergeProps as I, unref as L, createSlots as P, renderSlot as c, normalizeProps as d, guardReactiveProps as v } from "vue";
+import { useIntl as j } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as B } from "./vue-components.es12.js";
+import E from "./vue-components.es7.js";
+import { useErrorLabel as N } from "./vue-components.es10.js";
+const V = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
@@ -13,50 +14,56 @@ const D = /* @__PURE__ */ y({
     inputClass: {}
   },
   setup(a) {
-    const e = a, l = o(() => e.name), v = F(), p = o(() => {
+    const e = a, n = l(() => e.name), p = A(), g = l(() => {
       if (e.inputClass !== null)
-        return e.inputClass !== void 0 ? e.inputClass : v.class;
-    }), n = $(
+        return e.inputClass !== void 0 ? e.inputClass : p.class;
+    }), s = M(
       "getMetaFromArray",
       null
-    ), r = o(() => n?.value && n.value(e.name) ? n.value(l.value) : e.form.meta[l.value]), g = o(() => {
-      if (!r.value)
+    ), o = l(() => s?.value && s.value(e.name) ? s.value(n.value) : e.form.meta[n.value]), $ = l(() => {
+      const t = o.value;
+      if (!t) return n.value;
+      const r = t;
+      return `${n.value}-${r.type}-${r.minLength ?? ""}-${r.maxLength ?? ""}-${r.minimum ?? ""}-${r.maximum ?? ""}`;
+    }), { trans: C } = j(), b = l(() => {
+      if (!o.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return P(r.value);
-    }), C = B(e.form);
-    return (t, E) => (i(), u(k(a.form.Field), {
+      return B(o.value, C);
+    }), h = N(e.form);
+    return (t, r) => (f(), i(S(a.form.Field), {
+      key: $.value,
       name: a.name,
       validators: {
-        onChange: g.value,
+        onChange: b.value,
         ...a.validators
       }
     }, {
-      default: m(({ field: b, state: h }) => [
-        r.value ? (i(), u(j, M({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: p.value }, {
-          field: b,
-          state: h,
+      default: u(({ field: y, state: k }) => [
+        o.value ? (f(), i(E, I({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: g.value }, {
+          field: y,
+          state: k,
           register: a.form.registerField,
-          label: a.label ?? S(C)(l.value),
-          meta: r.value
-        }), w({
-          default: m((s) => [
-            f(t.$slots, "default", d(c(s)))
+          label: a.label ?? L(h)(n.value),
+          meta: o.value
+        }), P({
+          default: u((m) => [
+            c(t.$slots, "default", d(v(m)))
           ]),
           _: 2
         }, [
           t.$slots.label ? {
             name: "label",
-            fn: m((s) => [
-              f(t.$slots, "label", d(c(s)))
+            fn: u((m) => [
+              c(t.$slots, "label", d(v(m)))
             ]),
             key: "0"
           } : void 0
-        ]), 1040, ["field", "state", "register", "label", "meta"])) : A("", !0)
+        ]), 1040, ["field", "state", "register", "label", "meta"])) : w("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
 });
 export {
-  D as default
+  V as default
 };

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
-import { defineComponent as d, createBlock as u, openBlock as g, unref as l, withCtx as o, renderSlot as n, createVNode as f, createCommentVNode as c, normalizeProps as r, guardReactiveProps as s, createSlots as $, renderList as y } from "vue";
-import C from "./vue-components.es9.js";
-const h = /* @__PURE__ */ d({
+import { defineComponent as M, ref as C, computed as s, watch as b, provide as k, createBlock as F, openBlock as O, unref as f, withCtx as c, renderSlot as o, createVNode as i, createCommentVNode as S, normalizeProps as g, guardReactiveProps as d, createSlots as V, renderList as w } from "vue";
+import A from "./vue-components.es9.js";
+const N = /* @__PURE__ */ M({
   __name: "OmegaTaggedUnion",
   props: {
     name: {},
@@ -9,39 +9,55 @@ const h = /* @__PURE__ */ d({
     options: {},
     label: {}
   },
-  setup(e) {
-    return (a, b) => (g(), u(l(e.form).Field, {
-      name: e.name ? `${e.name}._tag` : "_tag"
+  setup(t) {
+    const n = t, r = C(null), v = s(() => n.name ? `${n.name}._tag` : "_tag"), $ = n.form.useStore((e) => e.values);
+    b(
+      () => v.value.split(".").reduce((l, a) => l?.[a], $.value),
+      (e) => {
+        r.value = e ?? null;
+      },
+      { immediate: !0 }
+    );
+    const y = s(() => {
+      const e = r.value;
+      return (a) => {
+        if (!e) return null;
+        const m = n.form.unionMeta[e];
+        return m ? m[a] ?? null : null;
+      };
+    });
+    return k("getMetaFromArray", y), (e, l) => (O(), F(f(t.form).Field, {
+      name: t.name ? `${t.name}._tag` : "_tag"
     }, {
-      default: o((t) => [
-        n(a.$slots, "OmegaCustomInput", r(s(t)), () => [
-          f(l(e.form).Input, {
-            name: e.name ? `${e.name}._tag` : "_tag",
-            label: e.label,
-            type: e.type ?? "select",
-            options: e.options
+      default: c((a) => [
+        o(e.$slots, "OmegaCustomInput", g(d(a)), () => [
+          i(f(t.form).Input, {
+            name: t.name ? `${t.name}._tag` : "_tag",
+            label: t.label,
+            type: t.type ?? "select",
+            options: t.options
           }, null, 8, ["name", "label", "type", "options"])
         ]),
-        n(a.$slots, "default"),
-        f(C, {
-          field: t.field,
-          state: t.state.value,
-          name: e.name,
-          form: e.form
-        }, $({ _: 2 }, [
-          y(a.$slots, (k, m) => ({
-            name: m,
-            fn: o((i) => [
-              n(a.$slots, m, r(s(i)))
+        o(e.$slots, "default"),
+        i(A, {
+          field: a.field,
+          state: a.state.value,
+          name: t.name,
+          form: t.form
+        }, V({ _: 2 }, [
+          w(e.$slots, (m, u) => ({
+            name: u,
+            fn: c((h) => [
+              o(e.$slots, u, g(d(h)))
             ])
           }))
         ]), 1032, ["field", "state", "name", "form"]),
-        t.state.value ? n(a.$slots, "OmegaCommon", { key: 0 }) : c("", !0)
+        a.state.value ? o(e.$slots, "OmegaCommon", { key: 0 }) : S("", !0)
       ]),
       _: 3
     }, 8, ["name"]));
   }
 });
 export {
-  h as default
+  N as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.10.8",
+  "version": "2.10.10",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.19.3",

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -653,7 +653,7 @@ export const createMeta = <T = any>(
       )
       .pipe(Option.getOrElse(() => ({}))) as Record<string, unknown>
 
-    meta = { ...meta, ...JSONAnnotation }
+    meta = { ...JSONAnnotation, ...meta }
 
     if ("from" in property) {
       return createMeta<T>({
@@ -681,12 +681,31 @@ export const createMeta = <T = any>(
   return acc
 }
 
+// Helper to flatten nested meta structure into dot-notation keys
+const flattenMeta = <T>(meta: MetaRecord<T> | FieldMeta, parentKey: string = ""): MetaRecord<T> => {
+  const result: MetaRecord<T> = {}
+
+  for (const key in meta) {
+    const value = (meta as any)[key]
+    const newKey = parentKey ? `${parentKey}.${key}` : key
+
+    if (value && typeof value === "object" && "type" in value) {
+      result[newKey as DeepKeys<T>] = value as FieldMeta
+    } else if (value && typeof value === "object") {
+      Object.assign(result, flattenMeta<T>(value, newKey))
+    }
+  }
+
+  return result
+}
+
 const metadataFromAst = <From, To>(
   schema: S.Schema<To, From, never>
-): { meta: MetaRecord<To>; defaultValues: Record<string, any> } => {
+): { meta: MetaRecord<To>; defaultValues: Record<string, any>; unionMeta: Record<string, MetaRecord<To>> } => {
   const ast = schema.ast
   const newMeta: MetaRecord<To> = {}
   const defaultValues: Record<string, any> = {}
+  const unionMeta: Record<string, MetaRecord<To>> = {}
 
   if (ast._tag === "Transformation" || ast._tag === "Refinement") {
     return metadataFromAst(S.make(ast.from))
@@ -709,7 +728,7 @@ const metadataFromAst = <From, To>(
       // Extract discriminator values from each union member
       const discriminatorValues: any[] = []
 
-      // Merge metadata from all union members
+      // Store metadata for each union member by its tag value
       for (const memberType of nonNullTypes) {
         if ("propertySignatures" in memberType) {
           // Find the discriminator field (usually _tag)
@@ -717,8 +736,10 @@ const metadataFromAst = <From, To>(
             (p: any) => p.name.toString() === "_tag"
           )
 
+          let tagValue: string | null = null
           if (tagProp && S.AST.isLiteral(tagProp.type)) {
-            discriminatorValues.push(tagProp.type.literal)
+            tagValue = tagProp.type.literal as string
+            discriminatorValues.push(tagValue)
           }
 
           // Create metadata for this member's properties
@@ -726,7 +747,12 @@ const metadataFromAst = <From, To>(
             propertySignatures: memberType.propertySignatures
           })
 
-          // Merge into result
+          // Store per-tag metadata for reactive lookup
+          if (tagValue) {
+            unionMeta[tagValue] = flattenMeta<To>(memberMeta)
+          }
+
+          // Merge into result (for backward compatibility)
           Object.assign(newMeta, memberMeta)
         }
       }
@@ -740,7 +766,7 @@ const metadataFromAst = <From, To>(
         } as FieldMeta
       }
 
-      return { meta: newMeta, defaultValues }
+      return { meta: newMeta, defaultValues, unionMeta }
     }
   }
 
@@ -750,7 +776,7 @@ const metadataFromAst = <From, To>(
     })
 
     if (Object.values(meta).every((value) => value && "type" in value)) {
-      return { meta: meta as MetaRecord<To>, defaultValues }
+      return { meta: meta as MetaRecord<To>, defaultValues, unionMeta }
     }
 
     const flattenObject = (
@@ -770,7 +796,7 @@ const metadataFromAst = <From, To>(
     flattenObject(meta)
   }
 
-  return { meta: newMeta, defaultValues }
+  return { meta: newMeta, defaultValues, unionMeta }
 }
 
 export const duplicateSchema = <From, To>(
@@ -784,16 +810,20 @@ export const generateMetaFromSchema = <From, To>(
 ): {
   schema: S.Schema<To, From, never>
   meta: MetaRecord<To>
+  unionMeta: Record<string, MetaRecord<To>>
 } => {
-  const { meta } = metadataFromAst(schema)
+  const { meta, unionMeta } = metadataFromAst(schema)
 
-  return { schema, meta }
+  return { schema, meta, unionMeta }
 }
 
 export const generateInputStandardSchemaFromFieldMeta = (
-  meta: FieldMeta
+  meta: FieldMeta,
+  trans?: ReturnType<typeof useIntl>["trans"]
 ): StandardSchemaV1<any, any> => {
-  const { trans } = useIntl()
+  if (!trans) {
+    trans = useIntl().trans
+  }
   let schema: S.Schema<any, any, never>
   switch (meta.type) {
     case "string":

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"
@@ -80,12 +82,27 @@ const meta = computed(() => {
   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
+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/useOmegaForm.ts

@@ -217,6 +217,7 @@ export type OmegaConfig<T> = {
 
 export interface OF<From, To> extends OmegaFormApi<From, To> {
   meta: MetaRecord<From>
+  unionMeta: Record<string, MetaRecord<From>>
   clear: () => void
   i18nNamespace?: string
   ignorePreventCloseEvents?: boolean
@@ -682,7 +683,7 @@ export const useOmegaForm = <
   const standardSchema = S.standardSchemaV1(schema)
   const decode = S.decode(schema)
 
-  const { meta } = generateMetaFromSchema(schema)
+  const { meta, unionMeta } = generateMetaFromSchema(schema)
 
   const persistencyKey = computed(() => {
     if (omegaConfig?.persistency?.id) {
@@ -952,6 +953,7 @@ export const useOmegaForm = <
     i18nNamespace: omegaConfig?.i18nNamespace,
     ignorePreventCloseEvents: omegaConfig?.ignorePreventCloseEvents,
     meta,
+    unionMeta,
     clear,
     handleSubmit: (meta?: Record<string, any>) => {
       const span = api.trace.getSpan(api.context.active())