@effect-app/vue-components 3.0.1 → 3.0.3

package/dist/vue-components.es10.js

@@ -1,5 +1,5 @@
 import { useForm as K } from "@tanstack/vue-form";
-import { Data as T, S as W, Effect as d, Fiber as $, Option as P, Array as F } from "effect-app";
+import { Data as T, S as W, Effect as d, Fiber as $, Option as j, Array as F } from "effect-app";
 import { runtimeFiberAsPromise as z } from "./vue-components.es17.js";
 import { computed as x, onUnmounted as D, onMounted as G, onBeforeUnmount as Z, watch as R, ref as Q, h as J } from "vue";
 import { useIntl as X } from "./vue-components.es3.js";
@@ -29,19 +29,19 @@ const M = (i) => function(s) {
 }, ce = (i) => function(s) {
   return {
     setup() {
-      const { fieldMap: f, form: m } = i, a = m.useStore((v) => v.errors), g = m.useStore((v) => v.fieldMeta), p = m.useStore((v) => v.errorMap), j = ae(m), A = x(() => {
+      const { fieldMap: f, form: m } = i, a = m.useStore((v) => v.errors), g = m.useStore((v) => v.fieldMeta), p = m.useStore((v) => v.errorMap), A = ae(m), L = x(() => {
         const v = F.filterMap(
           Object.entries(g.value),
           ([O, h]) => {
             const w = h.errors ?? [];
-            if (!w.length) return P.none();
+            if (!w.length) return j.none();
             const u = f.value.get(O);
-            return u ? P.some({
+            return u ? j.some({
               label: u.label,
               inputId: u.id,
               // Only show the first error
               errors: [w[0]?.message].filter(Boolean)
-            }) : P.none();
+            }) : j.none();
           }
         ), o = [];
         if (p.value.onSubmit) {
@@ -53,7 +53,7 @@ const M = (i) => function(s) {
                   const E = u.path.join(".");
                   if (!f.value.has(E)) {
                     o.push({
-                      label: j(E),
+                      label: A(E),
                       inputId: E,
                       errors: [u.message].filter(Boolean)
                     });
@@ -66,7 +66,7 @@ const M = (i) => function(s) {
       });
       return {
         generalErrors: a,
-        errors: A
+        errors: L
       };
     },
     render({ errors: f, generalErrors: m }) {
@@ -84,12 +84,12 @@ const M = (i) => function(s) {
       return s.persistency.id;
     const e = window.location.pathname, r = Object.keys(a);
     return `${e}-${r.join("-")}`;
-  }), j = () => {
+  }), A = () => {
     const e = new URLSearchParams(window.location.search);
     e.delete(p.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
-  }, A = x(() => {
+  }, L = x(() => {
     let e;
     const r = s?.persistency;
     if (
@@ -110,7 +110,7 @@ const M = (i) => function(s) {
     if (r?.policies && b(r.policies, "querystring"))
       try {
         const t = new URLSearchParams(window.location.search).get(p.value);
-        j(), t && (e = N(e || {}, JSON.parse(t)));
+        A(), t && (e = N(e || {}, JSON.parse(t)));
       } catch (n) {
         console.error(n);
       }
@@ -145,7 +145,7 @@ const M = (i) => function(s) {
         )
       ) : t;
     }) : void 0,
-    defaultValues: A.value
+    defaultValues: L.value
   }), O = () => {
     Object.keys(a).forEach((e) => {
       o.setFieldValue(e, void 0);
@@ -195,13 +195,13 @@ const M = (i) => function(s) {
   const I = (e) => d.currentSpan.pipe(
     d.option,
     d.flatMap(
-      (r) => d.promise(() => o.handleSubmit(P.isSome(r) ? { currentSpan: r.value, ...e } : e))
+      (r) => d.promise(() => o.handleSubmit(j.isSome(r) ? { currentSpan: r.value, ...e } : e))
     )
   ), q = (e) => e?.checkErrors ? I(e?.meta).pipe(d.flatMap(d.fnUntraced(function* () {
     const r = o.getAllErrors();
     if (Object.keys(r.fields).length || r.form.errors.length)
       return yield* new ie({ form: r.form, fields: r.fields });
-  }))) : I(e?.meta), B = o.handleSubmit, L = Q(/* @__PURE__ */ new Map()), y = Object.assign(o, {
+  }))) : I(e?.meta), B = o.handleSubmit, P = Q(/* @__PURE__ */ new Map()), y = Object.assign(o, {
     i18nNamespace: s?.i18nNamespace,
     ignorePreventCloseEvents: s?.ignorePreventCloseEvents,
     meta: a,
@@ -214,9 +214,13 @@ const M = (i) => function(s) {
     // /** @experimental */
     handleSubmitEffect: q,
     registerField: (e) => {
-      R(e, (r) => L.value.set(r.name, { label: r.label, id: r.id }), { immediate: !0 }), D(() => L.value.delete(e.value.name));
+      R(e, (r) => {
+        P.value.set(r.name, { label: r.label, id: r.id });
+      }, { immediate: !0 }), D(() => {
+        P.value.get(e.value.name)?.id === e.value.id && P.value.delete(e.value.name);
+      });
     }
-  }), V = { form: y, fieldMap: L };
+  }), V = { form: y, fieldMap: P };
   return Object.assign(y, {
     // Type-level properties for performance optimization (not used at runtime)
     _paths: void 0,

package/package.json

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

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -102,6 +102,7 @@ props.register(computed(() => ({ name: props.field.name, label: props.label, id
 // 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
+  // Treat errors as an array (like useOmegaForm does)
   return fieldMeta?.errors ?? []
 })
 const errors = computed(() =>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -962,8 +962,18 @@ 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(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
+      watch(field, (f) => {
+        fieldMap.value.set(f.name, { label: f.label, id: f.id })
+      }, { immediate: true })
+      onUnmounted(() => {
+        // Only delete if we still own this entry (id matches)
+        // This prevents old components from deleting entries registered by new components
+        // during re-mount transitions (e.g., when :key changes)
+        const currentEntry = fieldMap.value.get(field.value.name)
+        if (currentEntry?.id === field.value.id) {
+          fieldMap.value.delete(field.value.name)
+        }
+      })
     }
   })
 

package/src/components/OmegaForm/useRegisterField.ts

@@ -5,7 +5,9 @@ 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
 }