@effect-app/vue-components 0.15.29 → 0.17.0

package/README.md

@@ -182,3 +182,24 @@ In [tsconfig.json](tsconfig.js), set the following to address [Issue #32](https:
   ]
 }
 ```
+
+### On Submit event
+The :on-submit event could be tricky in `<OmegaForm />` component. 
+This is a prop that is basically a map of Tanstack Form `onSubmit` option and accept a function that return a Promise. If you want to use it as an event, you have to manage the state of loading yourself with `@submit` with a function returning `void`
+
+E.g.
+
+to use it as a Promise based Tanstack way:
+```html
+  <OmegaForm :schema="schema" :on-submit="onSubmit" :subscribe="['values']">
+```
+
+to use it as an event:
+```html
+<OmegaForm :schema="schema" @submit="onSubmit" :is-loading="false" :subscribe="['values']">
+```
+
+this will give you a type error instead, because `:is-loading` is only accepted in event mode
+```html
+  <OmegaForm :schema="schema" :on-submit="onSubmit" :is-loading="false" :subscribe="['values']">
+```

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

@@ -1,23 +1,23 @@
 import { type S } from "effect-app";
-import { type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff";
+import { type FormProps, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff";
 import { type OmegaConfig, type OmegaFormReturn } from "./useOmegaForm";
 declare const _default: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, K extends keyof OmegaFormState<From, To> = keyof OmegaFormState<From, To>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & ({
         omegaConfig?: OmegaConfig<From>;
         subscribe?: K[];
         showErrorsOn?: ShowErrorsOn;
-    } & Omit<import("@tanstack/vue-form").FormOptions<From, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").StandardSchemaV1<From, To>, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>, "onSubmit"> & ({
-        onSubmit?: ((props: {
-            formApi: import("./OmegaFormStuff").OmegaFormParams<From, To>;
-            meta: any;
-            value: To;
-        }) => Promise<any> | any) | undefined;
-    } & ({
+    } & Omit<FormProps<From, To>, "onSubmit"> & (({
         form: OmegaFormReturn<From, To>;
         schema?: undefined;
     } | {
         form?: undefined;
         schema: S.Schema<To, From, never>;
+    }) & ({
+        isLoading?: undefined;
+        onSubmit?: FormProps<From, To>["onSubmit"];
+    } | {
+        isLoading: boolean;
+        onSubmit: (data: To) => void;
     }))) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;

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-fd69dadb]{display:contents}")),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-fd69dadb]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,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-34631bd6]{display:contents}fieldset[disabled][data-v-34631bd6]>*{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-34631bd6]{display:contents}fieldset[disabled][data-v-34631bd6]>*{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 m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fd69dadb"]]);
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-34631bd6"]]);
 export {
   m as default
 };

package/dist/vue-components.es20.js

@@ -1,9 +1,9 @@
-import { defineComponent as w, computed as f, onBeforeMount as E, watch as j, createElementBlock as v, openBlock as b, withModifiers as F, createElementVNode as M, unref as c, renderSlot as p, createCommentVNode as k, Fragment as V } from "vue";
-import { useStore as g } from "@tanstack/vue-form";
-import { getOmegaStore as B } from "./vue-components.es24.js";
-import { provideOmegaErrors as C } from "./vue-components.es8.js";
-import { useOmegaForm as I } from "./vue-components.es9.js";
-const $ = ["disabled"], N = /* @__PURE__ */ w({
+import { defineComponent as M, getCurrentInstance as F, computed as c, watch as b, onBeforeMount as B, createElementBlock as v, openBlock as g, withModifiers as C, createElementVNode as I, unref as m, renderSlot as d, createCommentVNode as L, Fragment as V } from "vue";
+import { useStore as O } from "@tanstack/vue-form";
+import { getOmegaStore as k } from "./vue-components.es24.js";
+import { provideOmegaErrors as $ } from "./vue-components.es8.js";
+import { useOmegaForm as A } from "./vue-components.es9.js";
+const K = ["disabled"], W = /* @__PURE__ */ M({
   __name: "OmegaWrapper",
   props: {
     omegaConfig: {},
@@ -15,99 +15,113 @@ const $ = ["disabled"], N = /* @__PURE__ */ w({
     asyncDebounceMs: {},
     validators: {},
     onSubmitMeta: {},
-    onSubmitInvalid: { type: Function },
+    onSubmitInvalid: {},
     transform: {},
-    onSubmit: { type: Function },
     form: {},
-    schema: {}
+    schema: {},
+    isLoading: { type: Boolean, default: void 0 },
+    onSubmit: {}
   },
-  setup(O) {
-    const o = O, m = f(() => {
-      if (!(o.form || !o.schema))
-        return I(o.schema, o, o.omegaConfig);
-    }), t = f(() => o.form ?? m.value);
-    E(() => {
+  setup(S) {
+    const o = S, h = F(), y = c(
+      () => ({ value: e }) => {
+        new Promise((r) => {
+          h.emit("submit", e);
+          const n = b(() => o.isLoading, (t) => {
+            t || (r(), n.stop());
+          });
+        });
+      }
+    ), u = o.form || !o.schema ? void 0 : A(
+      o.schema,
+      {
+        ...o,
+        onSubmit: typeof o.isLoading < "u" ? y.value : o.onSubmit
+      },
+      o.omegaConfig
+    ), s = c(() => o.form ?? u);
+    B(() => {
       if (!o.form) return;
-      const e = Object.keys(o.form.options || {}), s = /* @__PURE__ */ new Set([
+      const e = Object.keys(o.form.options || {}), r = /* @__PURE__ */ new Set([
         "omegaConfig",
         "subscribe",
         "showErrorsOn",
         "asyncAlways",
         "form",
         "schema"
-      ]), i = Object.fromEntries(
+      ]), n = Object.fromEntries(
         Object.entries(o).filter(
-          ([a, u]) => !s.has(a) && u !== void 0
+          ([a, f]) => a === "isLoading" ? !1 : !r.has(a) && f !== void 0
         )
-      ), r = Object.keys(i), n = e.filter(
-        (a) => r.includes(a) && i[a] !== void 0
+      ), t = Object.keys(n), i = e.filter(
+        (a) => t.includes(a) && n[a] !== void 0
       );
-      n.length > 0 && console.warn(
+      i.length > 0 && console.warn(
         `[OmegaWrapper] Overlapping keys found between form options and filtered props:
-${n.join(
+${i.join(
           `, 
 `
         )}.
 Props will overwrite existing form options. This might indicate a configuration issue.`
       );
-      const S = {
-        ...t.value.options,
-        ...i
+      const j = {
+        ...s.value.options,
+        ...n
       };
-      t.value.options = Object.fromEntries(
+      s.value.options = Object.fromEntries(
         // TODO
-        Object.entries(S).filter(
-          ([a, u]) => u !== void 0
+        Object.entries(j).filter(
+          ([a, f]) => f !== void 0
         )
       );
     });
-    const h = g(
-      t.value.store,
+    const w = O(
+      s.value.store,
       (e) => e.isSubmitting
-    ), d = B(
-      t.value,
+    ), p = k(
+      s.value,
       o.subscribe
-    ), y = g(
-      t.value.store,
+    ), E = O(
+      s.value.store,
       (e) => e.submissionAttempts
-    ), l = f(() => t.value.useStore((e) => e.errors));
-    return j(
-      () => [t.value.filterItems, l.value.value],
+    ), l = c(() => s.value.useStore((e) => e.errors));
+    return b(
+      () => [s.value.filterItems, l.value.value],
       () => {
-        const e = t.value.filterItems, s = l.value.value;
-        return e ? s ? (Object.values(s).filter(
-          (r) => !!r
+        const e = s.value.filterItems, r = l.value.value;
+        return e ? r ? (Object.values(r).filter(
+          (t) => !!t
         ).flatMap(
-          (r) => Object.values(r).flat().map((n) => n.message)
-        ).some((r) => r === e.message) && e.items.forEach((r) => {
-          const n = t.value.getFieldMeta(r);
-          n && t.value.setFieldMeta(r, {
-            ...n,
+          (t) => Object.values(t).flat().map((i) => i.message)
+        ).some((t) => t === e.message) && e.items.forEach((t) => {
+          const i = s.value.getFieldMeta(t);
+          i && s.value.setFieldMeta(t, {
+            ...i,
             errorMap: {
               onSubmit: [
-                { path: [r], message: e.message }
+                { path: [t], message: e.message }
               ]
             }
           });
         }), {}) : {} : {};
       }
-    ), C(y, l.value, o.showErrorsOn), (e, s) => (b(), v("form", {
+    ), $(E, l.value, o.showErrorsOn), (e, r) => (g(), v("form", {
       novalidate: "",
-      onSubmit: s[0] || (s[0] = F((i) => t.value.handleSubmit(), ["prevent", "stop"]))
+      onSubmit: r[0] || (r[0] = C((n) => s.value.handleSubmit(), ["prevent", "stop"]))
     }, [
-      M("fieldset", { disabled: c(h) }, [
-        o.form ? (b(), v(V, { key: 0 }, [
-          p(e.$slots, "externalForm", { subscribedValues: c(d) }, void 0, !0),
-          p(e.$slots, "default", {}, void 0, !0)
-        ], 64)) : m.value ? p(e.$slots, "internalForm", {
+      I("fieldset", { disabled: m(w) }, [
+        o.form ? (g(), v(V, { key: 0 }, [
+          d(e.$slots, "externalForm", { subscribedValues: m(p) }, void 0, !0),
+          d(e.$slots, "default", {}, void 0, !0)
+        ], 64)) : m(u) ? d(e.$slots, "internalForm", {
           key: 1,
-          form: m.value,
-          subscribedValues: c(d)
-        }, void 0, !0) : k("", !0)
-      ], 8, $)
+          form: m(u),
+          subscribedValues: m(p)
+        }, void 0, !0) : L("", !0)
+      ], 8, K)
     ], 32));
   }
 });
 export {
-  N as default
+  W as default
 };

package/dist/vue-components.es22.js

@@ -1,4 +1,4 @@
-import { isFunction as c } from "./vue-components.es25.js";
+import { isFunction as c } from "./vue-components.es23.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.es23.js

@@ -1,92 +1,4 @@
-(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.es27.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)
-    ]);
-  }
-});
+const o = (n) => typeof n == "function";
 export {
-  J as default
+  o as isFunction
 };

package/dist/vue-components.es25.js

@@ -1,4 +1,92 @@
-const o = (n) => typeof n == "function";
+(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.es27.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 {
-  o as isFunction
+  J as default
 };

package/dist/vue-components.es26.js

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

package/dist/vue-components.es7.js

@@ -1,6 +1,6 @@
 import { defineComponent as d, inject as f, computed as r, createBlock as n, openBlock as m, resolveDynamicComponent as c, withCtx as l, createCommentVNode as v, mergeProps as y, renderSlot as g, normalizeProps as h, guardReactiveProps as b } from "vue";
 import { generateInputStandardSchemaFromFieldMeta as C } from "./vue-components.es10.js";
-import F from "./vue-components.es23.js";
+import F from "./vue-components.es25.js";
 const P = /* @__PURE__ */ d({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.15.29",
+  "version": "0.17.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "1.2.4",
@@ -53,8 +53,8 @@
   "dependencies": {
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.54.4",
-    "effect-app": "3.2.4"
+    "effect-app": "3.2.4",
+    "@effect-app/vue": "2.54.4"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -66,20 +66,20 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { type StandardSchemaV1Issue, useStore } from "@tanstack/vue-form"
-import { type S } from "effect-app"
-import { computed, onBeforeMount, watch } from "vue"
+import { type Record, type S } from "effect-app"
+import { computed, type ComputedRef, getCurrentInstance, onBeforeMount, watch } from "vue"
 import { getOmegaStore } from "./getOmegaStore"
 import { provideOmegaErrors } from "./OmegaErrorsContext"
 import { type FilterItems, type FormProps, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff"
 import { type OmegaConfig, type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 
-const props = defineProps<
+type OmegaWrapperProps =
   & {
     omegaConfig?: OmegaConfig<From>
     subscribe?: K[]
     showErrorsOn?: ShowErrorsOn
   }
-  & FormProps<From, To>
+  & Omit<FormProps<From, To>, "onSubmit">
   & (
     | {
       form: OmegaFormReturn<From, To>
@@ -90,16 +90,55 @@ const props = defineProps<
       schema: S.Schema<To, From, never>
     }
   )
->()
+  & (
+    | {
+      isLoading?: undefined
+      onSubmit?: FormProps<From, To>["onSubmit"]
+    }
+    | {
+      isLoading: boolean
+      onSubmit: (data: To) => void
+    }
+  )
 
-const localForm = computed(() => {
-  if (props.form || !props.schema) {
-    return undefined
-  }
-  return useOmegaForm<From, To>(props.schema, props, props.omegaConfig)
+const props = withDefaults(defineProps<OmegaWrapperProps>(), {
+  isLoading: undefined
 })
 
-const formToUse = computed(() => props.form ?? localForm.value!)
+const instance = getCurrentInstance()
+
+// we prefer to use the standard abstraction in Vue which separates props (going down) and event emits (going back up)
+// so if isLoading + @submit are provided, we wrap them into a Promise, so that TanStack Form can properly track the submitting state.
+// we use this approach because it means we can keep relying on the built-in beaviour of TanStack Form, and we dont have to re-implement/keep in sync/break any internals.
+const eventOnSubmit: ComputedRef<FormProps<From, To>["onSubmit"]> = computed(
+  () => ({ value }) => {
+    new Promise<void>((resolve) => {
+      instance!.emit("submit", value)
+      // even if the emit would be immediately handled, prop changes are not published/received immediately.
+      // so we have to wait for the prop to change to true, and back to false again.
+      const handle = watch(() => props.isLoading, (v) => {
+        if (v) return
+        resolve()
+        handle.stop()
+      })
+    })
+  }
+)
+
+const localForm = props.form || !props.schema
+  ? undefined
+  : useOmegaForm<From, To>(
+    props.schema,
+    {
+      ...props,
+      onSubmit: typeof props.isLoading !== "undefined"
+        ? eventOnSubmit.value
+        : props.onSubmit
+    },
+    props.omegaConfig
+  )
+
+const formToUse = computed(() => props.form ?? localForm!)
 
 onBeforeMount(() => {
   if (!props.form) return
@@ -116,17 +155,22 @@ onBeforeMount(() => {
 
   const filteredProps = Object.fromEntries(
     Object.entries(props).filter(
-      ([key, value]) =>
-        !excludedKeys.has(key as keyof typeof props) && value !== undefined
+      ([key, value]) => {
+        if (key === "isLoading") {
+          return false
+        }
+        return !excludedKeys.has(key as keyof typeof props)
+          && value !== undefined
+      }
     )
-  ) as Partial<typeof props>
+  ) as Record<string, unknown>
 
   const propsKeys = Object.keys(filteredProps)
 
   const overlappingKeys = formOptionsKeys.filter(
     (key) =>
       propsKeys.includes(key)
-      && filteredProps[key as keyof typeof props] !== undefined
+      && filteredProps[key] !== undefined
   )
 
   if (overlappingKeys.length > 0) {
@@ -227,5 +271,9 @@ defineSlots<{
 <style scoped>
 fieldset {
   display: contents;
+
+  &[disabled] > * {
+    pointer-events: none;
+  }
 }
 </style>