@effect-app/vue-components 1.8.6 → 1.8.7

package/dist/types/components/OmegaForm/OmegaErrorsInternal.vue.d.ts

@@ -1,11 +1,13 @@
-import type { StandardSchemaV1Issue } from "@tanstack/vue-form";
-import { type OmegaError } from "./OmegaFormStuff";
+import { type OmegaError, type OmegaFormApi } from "./OmegaFormStuff";
 type __VLS_Props = {
-    errors: readonly OmegaError[];
-    generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined;
+    form: OmegaFormApi<any, any>;
+    fieldMap: Map<string, {
+        id: string;
+        label: string;
+    }>;
 };
 declare var __VLS_6: {
-    errors: readonly OmegaError[];
+    errors: OmegaError[];
     showedGeneralErrors: string[];
 };
 type __VLS_Slots = {} & {

package/dist/vue-components.es16.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode(".v-enter-from[data-v-4f889c81],.v-leave-to[data-v-4f889c81]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-4f889c81],.v-leave-active[data-v-4f889c81]{display:grid;transition:all .15s}.v-enter-to[data-v-4f889c81],.v-leave-from[data-v-4f889c81]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-4f889c81]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-4f889c81]{min-height:0}.error-list[data-v-4f889c81]{list-style-position:inside}div.error-list[data-v-4f889c81]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-4f889c81]{grid-template-columns:auto 1fr}.error-link[data-v-4f889c81]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-4f889c81]{grid-template-columns:1fr}.error-message[data-v-4f889c81]{grid-column:1 / -1}}.error-item[data-v-4f889c81]{display:contents}a[data-v-4f889c81]{min-width:min-content}.error-link[data-v-4f889c81]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(n,t){const i=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(i&&i.call(this),this.shadowRoot){const r=document.createElement("style");r.appendChild(document.createTextNode(".v-enter-from[data-v-4f889c81],.v-leave-to[data-v-4f889c81]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-4f889c81],.v-leave-active[data-v-4f889c81]{display:grid;transition:all .15s}.v-enter-to[data-v-4f889c81],.v-leave-from[data-v-4f889c81]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-4f889c81]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-4f889c81]{min-height:0}.error-list[data-v-4f889c81]{list-style-position:inside}div.error-list[data-v-4f889c81]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-4f889c81]{grid-template-columns:auto 1fr}.error-link[data-v-4f889c81]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-4f889c81]{grid-template-columns:1fr}.error-message[data-v-4f889c81]{grid-column:1 / -1}}.error-item[data-v-4f889c81]{display:contents}a[data-v-4f889c81]{min-width:min-content}.error-link[data-v-4f889c81]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),this.shadowRoot.appendChild(r)}},e.call(window.customElements,n,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode(".v-enter-from[data-v-6dbb0b00],.v-leave-to[data-v-6dbb0b00]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6dbb0b00],.v-leave-active[data-v-6dbb0b00]{display:grid;transition:all .15s}.v-enter-to[data-v-6dbb0b00],.v-leave-from[data-v-6dbb0b00]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6dbb0b00]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6dbb0b00]{min-height:0}.error-list[data-v-6dbb0b00]{list-style-position:inside}div.error-list[data-v-6dbb0b00]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-6dbb0b00]{grid-template-columns:auto 1fr}.error-link[data-v-6dbb0b00]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-6dbb0b00]{grid-template-columns:1fr}.error-message[data-v-6dbb0b00]{grid-column:1 / -1}}.error-item[data-v-6dbb0b00]{display:contents}a[data-v-6dbb0b00]{min-width:min-content}.error-link[data-v-6dbb0b00]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),document.head.appendChild(a),window.customElements){const e=window.customElements.define;window.customElements.define=function(r,t){const i=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(i&&i.call(this),this.shadowRoot){const d=document.createElement("style");d.appendChild(document.createTextNode(".v-enter-from[data-v-6dbb0b00],.v-leave-to[data-v-6dbb0b00]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-6dbb0b00],.v-leave-active[data-v-6dbb0b00]{display:grid;transition:all .15s}.v-enter-to[data-v-6dbb0b00],.v-leave-from[data-v-6dbb0b00]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-6dbb0b00]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-6dbb0b00]{min-height:0}.error-list[data-v-6dbb0b00]{list-style-position:inside}div.error-list[data-v-6dbb0b00]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:1.5em;align-items:start}@container (max-width: 27.125rem){div.error-list[data-v-6dbb0b00]{grid-template-columns:auto 1fr}.error-link[data-v-6dbb0b00]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-6dbb0b00]{grid-template-columns:1fr}.error-message[data-v-6dbb0b00]{grid-column:1 / -1}}.error-item[data-v-6dbb0b00]{display:contents}a[data-v-6dbb0b00]{min-width:min-content}.error-link[data-v-6dbb0b00]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),this.shadowRoot.appendChild(d)}},e.call(window.customElements,r,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import r from "./vue-components.es29.js";
 
 import o from "./vue-components.es31.js";
-const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-4f889c81"]]);
+const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-6dbb0b00"]]);
 export {
   e as default
 };

package/dist/vue-components.es29.js

@@ -1,53 +1,63 @@
-import { defineComponent as y, getCurrentInstance as E, computed as C, createBlock as n, openBlock as e, Transition as x, withCtx as o, createElementBlock as d, createCommentVNode as B, renderSlot as b, normalizeProps as I, guardReactiveProps as w, resolveDynamicComponent as s, unref as a, normalizeClass as V, createElementVNode as c, toDisplayString as u, Fragment as p, renderList as _, createTextVNode as k } from "vue";
-import { mdiLink as N } from "@mdi/js";
-import { useIntl as z } from "./vue-components.es3.js";
+import { defineComponent as x, getCurrentInstance as E, computed as h, createBlock as o, openBlock as t, Transition as I, withCtx as a, createElementBlock as m, createCommentVNode as w, renderSlot as O, normalizeProps as S, guardReactiveProps as V, resolveDynamicComponent as s, unref as i, normalizeClass as N, createElementVNode as d, toDisplayString as c, Fragment as M, renderList as b, createTextVNode as k } from "vue";
+import { mdiLink as j } from "@mdi/js";
+import { Array as z, Option as y } from "effect-app";
+import { useIntl as A } from "./vue-components.es3.js";
 const D = {
   key: 0,
   class: "error-alert"
-}, G = { class: "text-h6 mb-3" }, L = { class: "font-weight-medium" }, M = { class: "error-message" }, O = ["href"], P = { key: 1 }, A = /* @__PURE__ */ y({
+}, G = { class: "text-h6 mb-3" }, L = { class: "font-weight-medium" }, P = { class: "error-message" }, T = ["href"], $ = { key: 1 }, K = /* @__PURE__ */ x({
   __name: "OmegaErrorsInternal",
   props: {
-    errors: {},
-    generalErrors: {}
+    form: {},
+    fieldMap: {}
   },
-  setup(t) {
-    const m = E()?.appContext.components.VAlert, h = t, { trans: g } = z(), f = C(() => h.generalErrors ? h.generalErrors.filter((i) => !!i).flatMap(
-      (i) => Object.values(i).filter((l) => !!l).flatMap(
+  setup(B) {
+    const f = E()?.appContext.components.VAlert, u = B, v = u.form.useStore((e) => e.errors), C = u.form.useStore((e) => e.fieldMeta), n = h(
+      () => z.filterMap(
+        Object.entries(C.value),
+        ([e, l]) => (l.errors ?? []).length && u.fieldMap.get(e)?.id ? y.some({
+          label: u.fieldMap.get(e).label,
+          inputId: u.fieldMap.get(e).id,
+          errors: (l.errors ?? []).map((r) => r.message).filter(Boolean)
+        }) : y.none()
+      )
+    ), { trans: _ } = A(), p = h(() => v.value ? v.value.filter((e) => !!e).flatMap(
+      (e) => Object.values(e).filter((l) => !!l).flatMap(
         (l) => l.filter(
           (r) => !!r?.message
         ).map((r) => r.message)
       )
     ) : []);
-    return (i, l) => (e(), n(x, null, {
-      default: o(() => [
-        t.errors.length || f.value.length ? (e(), d("div", D, [
-          b(i.$slots, "default", I(w({ errors: t.errors, showedGeneralErrors: f.value })), () => [
-            (e(), n(s(a(m) ? "v-alert" : "div"), {
-              class: V([a(m) ? "mb-4" : "error-alert-content", "mb-4"]),
+    return (e, l) => (t(), o(I, null, {
+      default: a(() => [
+        n.value.length || p.value.length ? (t(), m("div", D, [
+          O(e.$slots, "default", S(V({ errors: n.value, showedGeneralErrors: p.value })), () => [
+            (t(), o(s(i(f) ? "v-alert" : "div"), {
+              class: N([i(f) ? "mb-4" : "error-alert-content", "mb-4"]),
               type: "error",
               variant: "tonal",
               role: "alert",
               "aria-live": "polite"
             }, {
-              default: o(() => [
-                c("div", G, u(a(g)("form.includes_error")) + ": ", 1),
-                t.errors.length ? (e(), n(s(t.errors.length > 1 ? "ul" : "div"), {
+              default: a(() => [
+                d("div", G, c(i(_)("form.includes_error")) + ": ", 1),
+                n.value.length ? (t(), o(s(n.value.length > 1 ? "ul" : "div"), {
                   key: 0,
                   class: "error-list"
                 }, {
-                  default: o(() => [
-                    (e(!0), d(p, null, _(t.errors, (r) => (e(), n(s(t.errors.length > 1 ? "li" : "div"), {
+                  default: a(() => [
+                    (t(!0), m(M, null, b(n.value, (r) => (t(), o(s(n.value.length > 1 ? "li" : "div"), {
                       key: r.inputId,
                       class: "error-item"
                     }, {
-                      default: o(() => [
-                        c("div", L, u(r.label), 1),
-                        c("div", M, [
-                          (e(), n(s(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
-                            default: o(() => [
-                              (e(!0), d(p, null, _(r.errors, (v) => (e(), n(s(r.errors.length > 1 ? "li" : "span"), { key: v }, {
-                                default: o(() => [
-                                  k(u(v), 1)
+                      default: a(() => [
+                        d("div", L, c(r.label), 1),
+                        d("div", P, [
+                          (t(), o(s(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
+                            default: a(() => [
+                              (t(!0), m(M, null, b(r.errors, (g) => (t(), o(s(r.errors.length > 1 ? "li" : "span"), { key: g }, {
+                                default: a(() => [
+                                  k(c(g), 1)
                                 ]),
                                 _: 2
                               }, 1024))), 128))
@@ -55,37 +65,37 @@ const D = {
                             _: 2
                           }, 1024))
                         ]),
-                        c("a", {
+                        d("a", {
                           href: `#${r.inputId}`,
                           class: "error-link"
                         }, [
-                          (e(), n(s(a(m) ? "v-icon" : "i"), {
-                            icon: a(N),
+                          (t(), o(s(i(f) ? "v-icon" : "i"), {
+                            icon: i(j),
                             "aria-hidden": "true"
                           }, {
-                            default: o(() => [...l[0] || (l[0] = [
-                              c("i", null, "🔗", -1)
+                            default: a(() => [...l[0] || (l[0] = [
+                              d("i", null, "🔗", -1)
                             ])]),
                             _: 1
                           }, 8, ["icon"])),
-                          k(" " + u(a(g)("form.fix_input")), 1)
-                        ], 8, O)
+                          k(" " + c(i(_)("form.fix_input")), 1)
+                        ], 8, T)
                       ]),
                       _: 2
                     }, 1024))), 128))
                   ]),
                   _: 1
-                })) : (e(), d("span", P, u(f.value[0]), 1))
+                })) : (t(), m("span", $, c(p.value[0]), 1))
               ]),
               _: 1
             }, 8, ["class"]))
           ], !0)
-        ])) : B("", !0)
+        ])) : w("", !0)
       ]),
       _: 3
     }));
   }
 });
 export {
-  A as default
+  K as default
 };

package/dist/vue-components.es7.js

@@ -1,8 +1,8 @@
-import { useForm as T } from "@tanstack/vue-form";
-import { Data as W, S as U, Effect as l, Array as g, Option as E, Fiber as F } from "effect-app";
-import { runtimeFiberAsPromise as k } from "./vue-components.es12.js";
-import { isObject as z } from "./vue-components.es13.js";
-import { computed as $, onUnmounted as A, onMounted as Q, onBeforeUnmount as X, watch as N, h as D } from "vue";
+import { useForm as k } from "@tanstack/vue-form";
+import { Data as B, S as L, Effect as l, Fiber as b, Option as G, Array as O } from "effect-app";
+import { runtimeFiberAsPromise as T } from "./vue-components.es12.js";
+import { isObject as W } from "./vue-components.es13.js";
+import { computed as I, onUnmounted as U, onMounted as z, onBeforeUnmount as Q, ref as X, watch as $, h as N } from "vue";
 import { usePreventClose as Y } from "./vue-components.es8.js";
 import Z from "./vue-components.es14.js";
 import C from "./vue-components.es15.js";
@@ -10,63 +10,62 @@ import ee from "./vue-components.es16.js";
 import { generateMetaFromSchema as re } from "./vue-components.es9.js";
 import te from "./vue-components.es5.js";
 import se from "./vue-components.es17.js";
-import { trace as _ } from "./vue-components.es18.js";
-import { context as M } from "./vue-components.es19.js";
-class ne extends W.TaggedError("FormErrors") {
+import { trace as A } from "./vue-components.es18.js";
+import { context as y } from "./vue-components.es19.js";
+class ne extends B.TaggedError("FormErrors") {
 }
-const h = (c) => function(o) {
+const p = (c) => function(i) {
   return {
     render() {
-      return D(o, {
+      return N(i, {
         form: c,
         ...this.$attrs
       }, this.$slots);
     }
   };
-}, oe = (c) => function(o) {
+}, ie = (c) => function(i) {
   return {
     setup() {
       return {
         ...c
       };
     },
-    render({ errors: S, generalErrors: w, showErrors: v }) {
-      return D(o, {
-        errors: S,
-        generalErrors: w,
-        showErrors: v,
+    render({ fieldMap: h, form: S }) {
+      return N(i, {
+        form: S,
+        fieldMap: h,
         ...this.$attrs
       }, this.$slots);
     }
   };
-}, ye = (c, a, o) => {
+}, ye = (c, a, i) => {
   if (!c) throw new Error("Schema is required");
-  const S = U.standardSchemaV1(c), w = U.decode(c), { filterItems: v, meta: p } = re(c), m = $(() => {
-    if (o?.persistency?.id)
-      return o.persistency.id;
-    const e = window.location.pathname, r = Object.keys(p);
+  const h = L.standardSchemaV1(c), S = L.decode(c), { filterItems: _, meta: d } = re(c), m = I(() => {
+    if (i?.persistency?.id)
+      return i.persistency.id;
+    const e = window.location.pathname, r = Object.keys(d);
     return `${e}-${r.join("-")}`;
-  }), R = () => {
+  }), D = () => {
     const e = new URLSearchParams(window.location.search);
     e.delete(m.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
   };
-  function j(e, r) {
+  function g(e, r) {
     for (const t in r)
-      r[t] && z(r[t]) ? (e[t] || (e[t] = {}), j(e[t], r[t])) : e[t] = r[t];
+      r[t] && W(r[t]) ? (e[t] || (e[t] = {}), g(e[t], r[t])) : e[t] = r[t];
     return e;
   }
-  const x = $(() => {
-    if (a?.defaultValues && !o?.persistency?.overrideDefaultValues)
+  const R = I(() => {
+    if (a?.defaultValues && !i?.persistency?.overrideDefaultValues)
       return a?.defaultValues;
     let e;
-    const r = o?.persistency;
+    const r = i?.persistency;
     if (!r?.policies || r.policies.length === 0) return {};
     if (r.policies.includes("querystring"))
       try {
         const s = new URLSearchParams(window.location.search).get(m.value);
-        R(), s && (e = JSON.parse(s));
+        D(), s && (e = JSON.parse(s));
       } catch (t) {
         console.error(t);
       }
@@ -89,113 +88,104 @@ const h = (c) => function(o) {
       return e;
     {
       const t = a?.defaultValues;
-      return j(t, e);
+      return g(t, e);
     }
-  }), H = (e, r) => e ? M.with(_.setSpan(M.active(), e), r) : r(), u = T({
+  }), x = (e, r) => e ? y.with(A.setSpan(y.active(), e), r) : r(), u = k({
     ...a,
     validators: {
-      onSubmit: S,
+      onSubmit: h,
       ...a?.validators || {}
     },
-    onSubmit: a?.onSubmit ? ({ formApi: e, meta: r, value: t }) => H(r?.currentSpan, async () => {
-      const s = await l.runPromise(w(t)), n = a.onSubmit({
+    onSubmit: a?.onSubmit ? ({ formApi: e, meta: r, value: t }) => x(r?.currentSpan, async () => {
+      const s = await l.runPromise(S(t)), n = a.onSubmit({
         formApi: e,
         meta: r,
         value: s
       });
-      return F.isFiber(n) && F.isRuntimeFiber(n) ? await k(n) : l.isEffect(n) ? await l.runPromise(
+      return b.isFiber(n) && b.isRuntimeFiber(n) ? await T(n) : l.isEffect(n) ? await l.runPromise(
         n.pipe(
           // meta?.currentSpan
           //   ? Effect.withParentSpan(meta.currentSpan)
           //   : (_) => _,
-          l.flatMap((d) => F.join(d))
+          l.flatMap((f) => b.join(f))
         )
       ) : n;
     }) : void 0,
-    defaultValues: x.value
-  }), J = () => {
-    Object.keys(p).forEach((e) => {
+    defaultValues: R.value
+  }), H = () => {
+    Object.keys(d).forEach((e) => {
       u.setFieldValue(e, void 0);
     });
-  }, V = (e) => e.reduce((r, t) => {
+  }, E = (e) => e.reduce((r, t) => {
     const s = t.split(".");
-    return s.reduce((n, d, G) => (G === s.length - 1 ? n[d] = u.getFieldValue(t) : n[d] = n[d] ?? {}, n[d]), r), r;
-  }, {}), O = (e) => {
+    return s.reduce((n, f, K) => (K === s.length - 1 ? n[f] = u.getFieldValue(t) : n[f] = n[f] ?? {}, n[f]), r), r;
+  }, {}), F = (e) => {
     if (e) {
-      if (g.isArray(e.keys))
-        return V(e.keys);
-      if (g.isArray(e.banKeys)) {
-        const r = Object.keys(p).filter((t) => e.banKeys?.includes(t));
-        return V(r);
+      if (O.isArray(e.keys))
+        return E(e.keys);
+      if (O.isArray(e.banKeys)) {
+        const r = Object.keys(d).filter((t) => e.banKeys?.includes(t));
+        return E(r);
       }
       return u.store.state.values;
     }
-  }, b = () => {
-    const e = o?.persistency;
+  }, v = () => {
+    const e = i?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
       const r = e.policies.includes("local") ? localStorage : sessionStorage;
       if (!r) return;
-      const t = O(e);
+      const t = F(e);
       return r.setItem(m.value, JSON.stringify(t));
     }
-  }, P = () => {
-    const e = o?.persistency;
+  }, V = () => {
+    const e = i?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = O(e), t = new URLSearchParams(window.location.search);
+      const r = F(e), t = new URLSearchParams(window.location.search);
       t.set(m.value, JSON.stringify(r));
       const s = new URL(window.location.href);
       s.search = t.toString(), window.history.replaceState({}, "", s.toString());
     }
   };
-  A(b), Q(() => {
-    window.addEventListener("beforeunload", b), window.addEventListener("blur", P);
-  }), X(() => {
-    window.removeEventListener("beforeunload", b), window.removeEventListener("blur", P);
+  U(v), z(() => {
+    window.addEventListener("beforeunload", v), window.addEventListener("blur", V);
+  }), Q(() => {
+    window.removeEventListener("beforeunload", v), window.removeEventListener("blur", V);
   });
-  const I = (e) => l.currentSpan.pipe(
+  const j = (e) => l.currentSpan.pipe(
     l.option,
     l.flatMap(
-      (r) => l.promise(() => u.handleSubmit(E.isSome(r) ? { currentSpan: r.value, ...e } : e))
+      (r) => l.promise(() => u.handleSubmit(G.isSome(r) ? { currentSpan: r.value, ...e } : e))
     )
-  ), q = (e) => e?.checkErrors ? I(e?.meta).pipe(l.flatMap(l.fnUntraced(function* () {
+  ), J = (e) => e?.checkErrors ? j(e?.meta).pipe(l.flatMap(l.fnUntraced(function* () {
     const r = u.getAllErrors();
     if (Object.keys(r.fields).length || r.form.errors.length)
       return yield* new ne({ form: r.form, fields: r.fields });
-  }))) : I(e?.meta), B = u.handleSubmit, f = /* @__PURE__ */ new Map(), i = Object.assign(u, {
-    i18nNamespace: o?.i18nNamespace,
-    meta: p,
-    filterItems: v,
-    clear: J,
+  }))) : j(e?.meta), q = u.handleSubmit, w = X(/* @__PURE__ */ new Map()), o = Object.assign(u, {
+    i18nNamespace: i?.i18nNamespace,
+    meta: d,
+    filterItems: _,
+    clear: H,
     handleSubmit: (e) => {
-      const r = _.getSpan(M.active());
-      return B({ currentSpan: r, ...e });
+      const r = A.getSpan(y.active());
+      return q({ currentSpan: r, ...e });
     },
     // /** @experimental */
-    handleSubmitEffect: q,
+    handleSubmitEffect: J,
     registerField: (e) => {
-      N(e, (r) => f.set(r.name, { label: r.label, id: r.id }), { immediate: !0 }), A(() => f.delete(e.value.name));
+      $(e, (r) => w.value.set(r.name, { label: r.label, id: r.id }), { immediate: !0 }), U(() => w.value.delete(e.value.name));
     }
-  }), y = i.useStore((e) => e.errors), K = i.useStore(
-    (e) => g.filterMap(
-      Object.entries(e.fieldMeta),
-      ([r, t]) => (t.errors ?? []).length && f.get(r)?.id ? E.some({
-        label: f.get(r).label,
-        inputId: f.get(r).id,
-        errors: (t.errors ?? []).map((s) => s.message).filter(Boolean)
-      }) : E.none()
-    )
-  );
-  N(
-    () => [i.filterItems, y.value],
+  }), M = o.useStore((e) => e.errors);
+  $(
+    () => [o.filterItems, M.value],
     () => {
-      const e = i.filterItems, r = y.value;
+      const e = o.filterItems, r = M.value;
       return e ? r ? (Object.values(r).filter(
         (s) => !!s
       ).flatMap(
         (s) => Object.values(s).flat().map((n) => n.message)
       ).some((s) => s === e.message) && e.items.forEach((s) => {
-        const n = i.getFieldMeta(s);
-        n && i.setFieldMeta(s, {
+        const n = o.getFieldMeta(s);
+        n && o.setFieldMeta(s, {
           ...n,
           errorMap: {
             onSubmit: [
@@ -206,15 +196,15 @@ const h = (c) => function(o) {
       }), {}) : {} : {};
     }
   );
-  const L = { generalErrors: y, errors: K };
-  return o?.ignorePreventCloseEvents || Y(() => i.useStore((e) => e.isDirty)), Object.assign(i, {
-    errorContext: L,
-    Form: h(i)(se),
-    Input: h(i)(o?.input ?? te),
+  const P = { form: o, fieldMap: w };
+  return i?.ignorePreventCloseEvents || Y(() => o.useStore((e) => e.isDirty)), Object.assign(o, {
+    errorContext: P,
+    Form: p(o)(se),
+    Input: p(o)(i?.input ?? te),
     Field: u.Field,
-    Errors: oe(L)(ee),
-    Array: h(i)(Z),
-    AutoGen: h(i)(C)
+    Errors: ie(P)(ee),
+    Array: p(o)(Z),
+    AutoGen: p(o)(C)
   });
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",

package/src/components/OmegaForm/OmegaErrorsInternal.vue

@@ -74,27 +74,45 @@
 <script setup lang="ts">
 import { mdiLink } from "@mdi/js"
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
+import { Array as Array$, Option } from "effect-app"
 import { computed, getCurrentInstance } from "vue"
 import { useIntl } from "../../utils"
-import { type OmegaError } from "./OmegaFormStuff"
+import { type OmegaError, type OmegaFormApi } from "./OmegaFormStuff"
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]
 
 const props = defineProps<
   {
-    errors: readonly OmegaError[]
-    generalErrors: (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined
+    form: OmegaFormApi<any, any>
+    fieldMap: Map<string, { id: string; label: string }>
   }
 >()
 
+const generalErrors = props.form.useStore((state) => state.errors)
+const fieldMeta = props.form.useStore((state) => state.fieldMeta)
+const errors = computed(() =>
+  Array$.filterMap(
+    Object
+      .entries(fieldMeta.value),
+    ([key, m]): Option.Option<OmegaError> =>
+      ((m as any).errors ?? []).length && props.fieldMap.get(key)?.id
+        ? Option.some({
+          label: props.fieldMap.get(key)!.label,
+          inputId: props.fieldMap.get(key)!.id,
+          errors: ((m as any).errors ?? []).map((e: any) => e.message).filter(Boolean)
+        })
+        : Option.none()
+  )
+)
+
 const { trans } = useIntl()
 
 const showedGeneralErrors = computed(() => {
-  if (!props.generalErrors) return []
+  if (!generalErrors.value) return []
 
-  return props
-    .generalErrors
+  return generalErrors
+    .value
     .filter((record): record is Record<string, StandardSchemaV1Issue[]> => Boolean(record))
     .flatMap((errorRecord) =>
       Object

package/src/components/OmegaForm/useOmegaForm.ts

@@ -6,7 +6,7 @@ import { type DeepKeys, DeepValue, type FormAsyncValidateOrFn, type FormValidate
 import { Array, Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
-import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, watch } from "vue"
+import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from "vue"
 import { usePreventClose } from "./blockDialog"
 import { MergedInputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
@@ -65,13 +65,8 @@ const fHoc = (form: OF<any, any>) => {
 }
 
 const eHoc = (errorProps: {
-  generalErrors: Readonly<
-    Ref<
-      (Record<string, StandardSchemaV1Issue[]> | undefined)[],
-      (Record<string, StandardSchemaV1Issue[]> | undefined)[]
-    >
-  >
-  errors: Readonly<Ref<(OmegaError | undefined)[], (OmegaError | undefined)[]>>
+  form: OF<any, any>
+  fieldMap: Ref<Map<string, { id: string; label: string }>>
 }) => {
   return function FormHoc<P>(
     WrappedComponent: Component<P>
@@ -82,11 +77,10 @@ const eHoc = (errorProps: {
           ...errorProps
         }
       },
-      render({ errors, generalErrors, showErrors }: any) {
+      render({ fieldMap, form }: any) {
         return h(WrappedComponent, {
-          errors,
-          generalErrors,
-          showErrors,
+          form,
+          fieldMap,
           ...this.$attrs
         } as any, this.$slots)
       }
@@ -863,7 +857,7 @@ export const useOmegaForm = <
 
   const handleSubmit = form.handleSubmit
 
-  const fieldMap = new Map<string, { label: string; id: string }>()
+  const fieldMap = ref(new Map<string, { label: string; id: string }>())
 
   const formWithExtras: OF<From, To> = Object.assign(form, {
     i18nNamespace: omegaConfig?.i18nNamespace,
@@ -877,26 +871,12 @@ export const useOmegaForm = <
     // /** @experimental */
     handleSubmitEffect,
     registerField: (field: ComputedRef<{ name: string; label: string; id: string }>) => {
-      watch(field, (f) => fieldMap.set(f.name, { label: f.label, id: f.id }), { immediate: true })
-      onUnmounted(() => fieldMap.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(() => fieldMap.value.delete(field.value.name)) // todo; perhap only when owned (id match)
     }
   })
 
   const errors = formWithExtras.useStore((state) => state.errors)
-  const fieldErrors = formWithExtras.useStore((state) =>
-    Array.filterMap(
-      Object
-        .entries(state.fieldMeta),
-      ([key, m]): Option.Option<OmegaError> =>
-        ((m as any).errors ?? []).length && fieldMap.get(key)?.id
-          ? Option.some({
-            label: fieldMap.get(key)!.label,
-            inputId: fieldMap.get(key)!.id,
-            errors: ((m as any).errors ?? []).map((e: any) => e.message).filter(Boolean)
-          })
-          : Option.none()
-    )
-  )
 
   watch(
     () => [formWithExtras.filterItems, errors.value],
@@ -937,7 +917,7 @@ export const useOmegaForm = <
     }
   )
 
-  const errorContext = { generalErrors: errors, errors: fieldErrors }
+  const errorContext = { form: formWithExtras, fieldMap }
 
   if (!omegaConfig?.ignorePreventCloseEvents) {
     usePreventClose(() => formWithExtras.useStore((state) => state.isDirty))