@effect-app/vue-components 0.22.15 → 0.22.17

package/dist/vue-components.es12.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-72cd2c5e]{display:contents}fieldset[disabled][data-v-72cd2c5e]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-72cd2c5e]{display:contents}fieldset[disabled][data-v-72cd2c5e]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,c,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-0628edeb]{display:contents}fieldset[disabled][data-v-0628edeb]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-0628edeb]{display:contents}fieldset[disabled][data-v-0628edeb]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es20.js";
 
 import r from "./vue-components.es17.js";
-const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-72cd2c5e"]]);
+const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0628edeb"]]);
 export {
-  e as default
+  a as default
 };

package/dist/vue-components.es20.js

@@ -1,9 +1,9 @@
-import { defineComponent as M, getCurrentInstance as B, computed as v, onBeforeMount as F, watch as g, createElementBlock as S, openBlock as O, withModifiers as L, createElementVNode as C, unref as m, renderSlot as p, createCommentVNode as V, Fragment as k } from "vue";
-import { useStore as h } from "@tanstack/vue-form";
-import { getOmegaStore as $ } from "./vue-components.es26.js";
+import { defineComponent as B, getCurrentInstance as F, computed as l, onBeforeMount as L, watch as S, createElementBlock as O, openBlock as h, withModifiers as C, createElementVNode as V, unref as m, renderSlot as b, createCommentVNode as k, Fragment as _ } from "vue";
+import { useStore as y } from "@tanstack/vue-form";
+import { getOmegaStore as $ } from "./vue-components.es27.js";
 import { provideOmegaErrors as A } from "./vue-components.es8.js";
 import { useOmegaForm as K } from "./vue-components.es9.js";
-const _ = ["disabled"], D = /* @__PURE__ */ M({
+const P = ["disabled"], U = /* @__PURE__ */ B({
   __name: "OmegaWrapper",
   props: {
     omegaConfig: {},
@@ -26,21 +26,21 @@ const _ = ["disabled"], D = /* @__PURE__ */ M({
     isLoading: { type: Boolean, default: void 0 },
     onSubmit: {}
   },
-  setup(y) {
-    const o = y, w = B(), E = ({ formApi: e, meta: r, value: i }) => new Promise((t) => {
-      w.emit("submit", { formApi: e, meta: r, value: i });
-      const n = g(() => o.isLoading, (u) => {
+  setup(w) {
+    const o = w, E = F(), j = ({ formApi: e, meta: r, value: i }) => new Promise((t) => {
+      E.emit("submit", { formApi: e, meta: r, value: i });
+      const n = S(() => o.isLoading, (u) => {
         u || (t(), n.stop());
       });
-    }), l = typeof o.isLoading < "u" ? E : typeof o.onSubmit < "u" ? o.onSubmit : void 0, f = o.form || !o.schema ? void 0 : K(
+    }), v = typeof o.isLoading < "u" ? l(() => j) : typeof o.onSubmit < "u" ? l(() => o.onSubmit) : void 0, f = v?.value ? (...e) => v.value(...e) : void 0, c = o.form || !o.schema ? void 0 : K(
       o.schema,
       {
         ...o,
-        onSubmit: l
+        onSubmit: f
       },
       o.omegaConfig
-    ), s = v(() => o.form ?? f);
-    F(() => {
+    ), s = l(() => o.form ?? c);
+    L(() => {
       if (!o.form) return;
       const e = Object.keys(o.form.options || {}), r = /* @__PURE__ */ new Set([
         "omegaConfig",
@@ -51,7 +51,7 @@ const _ = ["disabled"], D = /* @__PURE__ */ M({
         "schema"
       ]), i = Object.fromEntries(
         Object.entries(o).filter(
-          ([a, d]) => a === "isLoading" ? !1 : !r.has(a) && d !== void 0
+          ([a, p]) => a === "isLoading" ? !1 : !r.has(a) && p !== void 0
         )
       ), t = Object.keys(i), n = e.filter(
         (a) => t.includes(a) && i[a] !== void 0
@@ -68,27 +68,27 @@ Props will overwrite existing form options. This might indicate a configuration
         ...s.value.options,
         ...i
       };
-      l && (u.onSubmit = l), s.value.options = Object.fromEntries(
+      f && (u.onSubmit = f), s.value.options = Object.fromEntries(
         // TODO
         Object.entries(u).filter(
-          ([a, d]) => d !== void 0
+          ([a, p]) => p !== void 0
         )
       );
     });
-    const j = h(
+    const I = y(
       s.value.store,
       (e) => e.isSubmitting
-    ), b = $(
+    ), g = $(
       s.value,
       o.subscribe
-    ), I = h(
+    ), M = y(
       s.value.store,
       (e) => e.submissionAttempts
-    ), c = v(() => s.value.useStore((e) => e.errors));
-    return g(
-      () => [s.value.filterItems, c.value.value],
+    ), d = l(() => s.value.useStore((e) => e.errors));
+    return S(
+      () => [s.value.filterItems, d.value.value],
       () => {
-        const e = s.value.filterItems, r = c.value.value;
+        const e = s.value.filterItems, r = d.value.value;
         return e ? r ? (Object.values(r).filter(
           (t) => !!t
         ).flatMap(
@@ -105,23 +105,23 @@ Props will overwrite existing form options. This might indicate a configuration
           });
         }), {}) : {} : {};
       }
-    ), A(I, c.value, o.showErrorsOn), (e, r) => (O(), S("form", {
+    ), A(M, d.value, o.showErrorsOn), (e, r) => (h(), O("form", {
       novalidate: "",
-      onSubmit: r[0] || (r[0] = L((i) => s.value.handleSubmit(), ["prevent", "stop"]))
+      onSubmit: r[0] || (r[0] = C((i) => s.value.handleSubmit(), ["prevent", "stop"]))
     }, [
-      C("fieldset", { disabled: m(j) }, [
-        o.form ? (O(), S(k, { key: 0 }, [
-          p(e.$slots, "externalForm", { subscribedValues: m(b) }, void 0, !0),
-          p(e.$slots, "default", {}, void 0, !0)
-        ], 64)) : m(f) ? p(e.$slots, "internalForm", {
+      V("fieldset", { disabled: m(I) }, [
+        o.form ? (h(), O(_, { key: 0 }, [
+          b(e.$slots, "externalForm", { subscribedValues: m(g) }, void 0, !0),
+          b(e.$slots, "default", {}, void 0, !0)
+        ], 64)) : m(c) ? b(e.$slots, "internalForm", {
           key: 1,
-          form: m(f),
-          subscribedValues: m(b)
-        }, void 0, !0) : V("", !0)
-      ], 8, _)
+          form: m(c),
+          subscribedValues: m(g)
+        }, void 0, !0) : k("", !0)
+      ], 8, P)
     ], 32));
   }
 });
 export {
-  D as default
+  U as default
 };

package/dist/vue-components.es22.js

@@ -1,5 +1,5 @@
 import { Exit as c, Runtime as s } from "effect";
-import { dual as n, isFunction as m } from "./vue-components.es28.js";
+import { dual as n, isFunction as m } from "./vue-components.es26.js";
 const i = Symbol.for("clone-trait"), u = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
 n(2, (e, t) => u(e, { ...e, ...m(t) ? t(e) : t }));
 const b = (e) => new Promise((t, r) => e.addObserver((o) => {

package/dist/vue-components.es23.js

@@ -1,4 +1,4 @@
-import { isFunction as c } from "./vue-components.es28.js";
+import { isFunction as c } from "./vue-components.es26.js";
 const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
 export {
   s as isFunction,

package/dist/vue-components.es26.js

@@ -1,13 +1,44 @@
-import { useStore as u } from "@tanstack/vue-form";
-import { computed as f } from "vue";
-function c(o, t) {
-  return f(() => t ? u(o.store, (n) => {
-    const r = {};
-    for (const e of t)
-      r[e] = n[e];
-    return r;
-  }).value : {});
-}
+const f = (c) => typeof c == "function", a = function(c, r) {
+  switch (c) {
+    case 0:
+    case 1:
+      throw new RangeError(`Invalid arity ${c}`);
+    case 2:
+      return function(n, t) {
+        return arguments.length >= 2 ? r(n, t) : function(e) {
+          return r(e, n);
+        };
+      };
+    case 3:
+      return function(n, t, e) {
+        return arguments.length >= 3 ? r(n, t, e) : function(u) {
+          return r(u, n, t);
+        };
+      };
+    case 4:
+      return function(n, t, e, u) {
+        return arguments.length >= 4 ? r(n, t, e, u) : function(i) {
+          return r(i, n, t, e);
+        };
+      };
+    case 5:
+      return function(n, t, e, u, i) {
+        return arguments.length >= 5 ? r(n, t, e, u, i) : function(s) {
+          return r(s, n, t, e, u);
+        };
+      };
+    default:
+      return function() {
+        if (arguments.length >= c)
+          return r.apply(this, arguments);
+        const n = arguments;
+        return function(t) {
+          return r(t, ...n);
+        };
+      };
+  }
+};
 export {
-  c as getOmegaStore
+  a as dual,
+  f as isFunction
 };

package/dist/vue-components.es27.js

@@ -1,92 +1,13 @@
-(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as w, getCurrentInstance as x, useId as C, computed as a, watch as f, nextTick as N, onMounted as d, ref as $, watchEffect as k, renderSlot as B, normalizeProps as I, guardReactiveProps as O, createElementVNode as _, normalizeClass as q, createBlock as L, createCommentVNode as P, unref as F, openBlock as S, mergeProps as T } from "vue";
-import { useStore as z } from "@tanstack/vue-form";
-import { useOmegaErrors as A } from "./vue-components.es8.js";
-import D from "./vue-components.es51.js";
-
-const J = /* @__PURE__ */ w({
-  inheritAttrs: !1,
-  __name: "OmegaInternalInput",
-  props: {
-    field: {},
-    meta: {},
-    label: {},
-    options: {},
-    type: {},
-    validators: {}
-  },
-  setup(c) {
-    const e = c, v = x()?.appContext.components.VTextField, l = C(), o = e.field, r = z(o.store, (t) => t), m = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), n = a(() => r.value.value), g = a(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        r.value.meta.errors.map((t) => t?.message).filter(Boolean)
-      )
-    ), y = (t) => t == null || t === !1 || t === "" || Number.isNaN(t);
-    f(
-      () => !!n.value,
-      () => {
-        y(n.value) && e.meta?.type !== "boolean" && N(() => {
-          o.setValue(
-            e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
-          );
-        });
-      }
-    ), d(() => {
-      !n.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null" && o.setValue(null);
-    });
-    const { addError: h, removeError: b, showErrors: E, showErrorsOn: V } = A(), s = $(!1);
-    k(() => {
-      (E.value || V === "onChange") && (s.value = !0);
-    });
-    const u = () => {
-      s.value = !0;
-    };
-    d(() => {
-      n.value && u();
-    });
-    const p = a(() => !s.value && m.value !== "select" ? [] : g.value);
-    f(
-      () => r.value.meta.errors,
-      () => {
-        r.value.meta.errors.length ? h({
-          inputId: l,
-          errors: r.value.meta.errors.map((t) => t.message).filter(Boolean),
-          label: e.label
-        }) : b(l);
-      }
-    );
-    const i = a(() => ({
-      id: l,
-      required: e.meta?.required,
-      minLength: e.meta?.type === "string" && e.meta?.minLength,
-      maxLength: e.meta?.type === "string" && e.meta?.maxLength,
-      max: e.meta?.type === "number" && e.meta?.maximum,
-      min: e.meta?.type === "number" && e.meta?.minimum,
-      name: e.field.name,
-      modelValue: e.field.state.value,
-      errorMessages: p.value,
-      error: !!p.value.length,
-      field: e.field,
-      setRealDirty: u,
-      type: m.value,
-      label: `${e.label}${e.meta?.required ? " *" : ""}`,
-      options: e.options
-    }));
-    return (t, R) => B(t.$slots, "default", I(O(i.value)), () => [
-      _("div", {
-        class: q(t.$attrs.class),
-        onFocusout: u
-      }, [
-        F(v) ? (S(), L(D, T({
-          key: 0,
-          "input-props": i.value
-        }, t.$attrs, {
-          "vuetify-value": i.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
-      ], 34)
-    ]);
-  }
-});
+import { useStore as u } from "@tanstack/vue-form";
+import { computed as f } from "vue";
+function c(o, t) {
+  return f(() => t ? u(o.store, (n) => {
+    const r = {};
+    for (const e of t)
+      r[e] = n[e];
+    return r;
+  }).value : {});
+}
 export {
-  J as default
+  c as getOmegaStore
 };

package/dist/vue-components.es28.js

@@ -1,44 +1,92 @@
-const f = (c) => typeof c == "function", a = function(c, r) {
-  switch (c) {
-    case 0:
-    case 1:
-      throw new RangeError(`Invalid arity ${c}`);
-    case 2:
-      return function(n, t) {
-        return arguments.length >= 2 ? r(n, t) : function(e) {
-          return r(e, n);
-        };
-      };
-    case 3:
-      return function(n, t, e) {
-        return arguments.length >= 3 ? r(n, t, e) : function(u) {
-          return r(u, n, t);
-        };
-      };
-    case 4:
-      return function(n, t, e, u) {
-        return arguments.length >= 4 ? r(n, t, e, u) : function(i) {
-          return r(i, n, t, e);
-        };
-      };
-    case 5:
-      return function(n, t, e, u, i) {
-        return arguments.length >= 5 ? r(n, t, e, u, i) : function(s) {
-          return r(s, n, t, e, u);
-        };
-      };
-    default:
-      return function() {
-        if (arguments.length >= c)
-          return r.apply(this, arguments);
-        const n = arguments;
-        return function(t) {
-          return r(t, ...n);
-        };
-      };
+(function(){"use strict";try{if(typeof document<"u"){var i=document.createElement("style");if(i.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(i),window.customElements){const e=window.customElements.define;window.customElements.define=function(s,t){const n=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(n&&n.call(this),this.shadowRoot){const a=document.createElement("style");a.appendChild(document.createTextNode(".omega-input .v-input__details:has(.v-messages:empty){grid-template-rows:0fr;transition:all .2s}.omega-input .v-messages:empty{min-height:0}.omega-input .v-input__details:has(.v-messages){transition:all .2s;overflow:hidden;min-height:0;display:grid;grid-template-rows:1fr}.omega-input .v-messages{transition:all .2s}.omega-input .v-messages>*{transition-duration:0s!important}.omega-input [role=alert]:has(.v-messages:empty){padding:0}.omega-input .v-btn{cursor:pointer;width:auto;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(a)}},e.call(window.customElements,s,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as w, getCurrentInstance as x, useId as C, computed as a, watch as f, nextTick as N, onMounted as d, ref as $, watchEffect as k, renderSlot as B, normalizeProps as I, guardReactiveProps as O, createElementVNode as _, normalizeClass as q, createBlock as L, createCommentVNode as P, unref as F, openBlock as S, mergeProps as T } from "vue";
+import { useStore as z } from "@tanstack/vue-form";
+import { useOmegaErrors as A } from "./vue-components.es8.js";
+import D from "./vue-components.es51.js";
+
+const J = /* @__PURE__ */ w({
+  inheritAttrs: !1,
+  __name: "OmegaInternalInput",
+  props: {
+    field: {},
+    meta: {},
+    label: {},
+    options: {},
+    type: {},
+    validators: {}
+  },
+  setup(c) {
+    const e = c, v = x()?.appContext.components.VTextField, l = C(), o = e.field, r = z(o.store, (t) => t), m = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), n = a(() => r.value.value), g = a(
+      () => (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        r.value.meta.errors.map((t) => t?.message).filter(Boolean)
+      )
+    ), y = (t) => t == null || t === !1 || t === "" || Number.isNaN(t);
+    f(
+      () => !!n.value,
+      () => {
+        y(n.value) && e.meta?.type !== "boolean" && N(() => {
+          o.setValue(
+            e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
+          );
+        });
+      }
+    ), d(() => {
+      !n.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null" && o.setValue(null);
+    });
+    const { addError: h, removeError: b, showErrors: E, showErrorsOn: V } = A(), s = $(!1);
+    k(() => {
+      (E.value || V === "onChange") && (s.value = !0);
+    });
+    const u = () => {
+      s.value = !0;
+    };
+    d(() => {
+      n.value && u();
+    });
+    const p = a(() => !s.value && m.value !== "select" ? [] : g.value);
+    f(
+      () => r.value.meta.errors,
+      () => {
+        r.value.meta.errors.length ? h({
+          inputId: l,
+          errors: r.value.meta.errors.map((t) => t.message).filter(Boolean),
+          label: e.label
+        }) : b(l);
+      }
+    );
+    const i = a(() => ({
+      id: l,
+      required: e.meta?.required,
+      minLength: e.meta?.type === "string" && e.meta?.minLength,
+      maxLength: e.meta?.type === "string" && e.meta?.maxLength,
+      max: e.meta?.type === "number" && e.meta?.maximum,
+      min: e.meta?.type === "number" && e.meta?.minimum,
+      name: e.field.name,
+      modelValue: e.field.state.value,
+      errorMessages: p.value,
+      error: !!p.value.length,
+      field: e.field,
+      setRealDirty: u,
+      type: m.value,
+      label: `${e.label}${e.meta?.required ? " *" : ""}`,
+      options: e.options
+    }));
+    return (t, R) => B(t.$slots, "default", I(O(i.value)), () => [
+      _("div", {
+        class: q(t.$attrs.class),
+        onFocusout: u
+      }, [
+        F(v) ? (S(), L(D, T({
+          key: 0,
+          "input-props": i.value
+        }, t.$attrs, {
+          "vuetify-value": i.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
+      ], 34)
+    ]);
   }
-};
+});
 export {
-  a as dual,
-  f as isFunction
+  J as default
 };

package/dist/vue-components.es41.js

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

package/dist/vue-components.es7.js

@@ -1,6 +1,6 @@
 import { defineComponent as y, inject as h, computed as l, createBlock as s, openBlock as i, resolveDynamicComponent as M, withCtx as p, createCommentVNode as $, mergeProps as b, renderSlot as C, normalizeProps as k, guardReactiveProps as F } from "vue";
 import { generateInputStandardSchemaFromFieldMeta as A } from "./vue-components.es10.js";
-import w from "./vue-components.es27.js";
+import w from "./vue-components.es28.js";
 import { useIntl as I } from "./vue-components.es3.js";
 const z = /* @__PURE__ */ y({
   inheritAttrs: !1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.22.15",
+  "version": "0.22.17",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.17.13",
@@ -48,7 +48,7 @@
     "@tanstack/vue-form": "^1.19.5",
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.64.1",
+    "@effect-app/vue": "2.64.2",
     "effect-app": "3.3.7"
   },
   "scripts": {

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -126,12 +126,16 @@ const eventOnSubmit: FormProps<From, To>["onSubmit"] = (
     })
   })
 
-const onSubmit = typeof props.isLoading !== "undefined"
-  ? eventOnSubmit
+  // we need to keep onSubmit reactive or it can't pick up local state changes, inside forms
+  // which is the whole point of having props
+const onSubmit_ = typeof props.isLoading !== "undefined"
+  ? computed(() => eventOnSubmit)
   : typeof props.onSubmit !== "undefined"
-  ? props.onSubmit
+  ? computed(() => props.onSubmit)
   : undefined
 
+const onSubmit = onSubmit_?.value ? (...args: [any]) => onSubmit_!.value!(...args) : undefined
+
 const localForm = props.form || !props.schema
   ? undefined
   : useOmegaForm<From, To>(