@effect-app/vue-components 1.8.11 → 1.8.13

package/dist/types/components/OmegaForm/InputProps.d.ts

@@ -14,8 +14,10 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
         type: string;
     };
     field: OmegaFieldInternalApi<From, TName>;
+    /** be sure to use this state and not `field.state` as it is not reactive */
+    state: OmegaFieldInternalApi<From, TName>["state"];
 };
-export type MergedInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = InputProps<From, TName>["inputProps"] & Pick<InputProps<From, TName>, "field">;
+export type MergedInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = InputProps<From, TName>["inputProps"] & Pick<InputProps<From, TName>, "field" | "state">;
 export type VuetifyInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
     inputProps: InputProps<From, TName>["inputProps"] & {
         type: string;
@@ -24,5 +26,4 @@ export type VuetifyInputProps<From extends Record<PropertyKey, any>, TName exten
             value: string;
         }[];
     };
-    field: InputProps<From, TName>["field"];
-};
+} & Pick<InputProps<From, TName>, "field" | "state">;

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

@@ -6,6 +6,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
     slots: {
         default?: (props: {
             field: import("./InputProps").OmegaFieldInternalApi<From, any>;
+            state: import("@tanstack/vue-form").FieldState<From, any, import("@tanstack/vue-form").DeepValue<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateFn<From, any>, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, any>, unknown> | import("@tanstack/vue-form").FieldValidateAsyncFn<From, any>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>>, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, any, import("@tanstack/vue-form").DeepValue<From, any>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, any, 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").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
             id: string;
             required?: boolean;
             minLength?: number | false;

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

@@ -5,6 +5,7 @@ import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./O
 declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends DeepKeys<From>>(__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<{
         field: OmegaFieldInternalApi<From, Name>;
+        state: OmegaFieldInternalApi<From, Name>["state"];
         meta: MetaRecord<From>[NestedKeyOf<From>];
         label: string;
         type?: TypeOverride;
@@ -24,6 +25,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
     slots: {
         default?: (props: {
             field: OmegaFieldInternalApi<From, Name>;
+            state: import("@tanstack/vue-form").FieldState<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>, import("@tanstack/vue-form").FieldValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>> | undefined, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, Name>, unknown> | import("@tanstack/vue-form").FieldValidateFn<From, Name>, import("@tanstack/vue-form").StandardSchemaV1<import("@tanstack/vue-form").DeepValue<From, Name>, unknown> | import("@tanstack/vue-form").FieldValidateAsyncFn<From, Name>, import("@tanstack/vue-form").FieldValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>>, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>>, import("@tanstack/vue-form").FieldValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>> | undefined, import("@tanstack/vue-form").FieldValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>> | undefined, import("@tanstack/vue-form").FieldAsyncValidateOrFn<From, Name, import("@tanstack/vue-form").DeepValue<From, Name>> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormValidateOrFn<From> | undefined, any, 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").FormValidateOrFn<From> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<From> | undefined>;
             id: string;
             required?: boolean;
             minLength?: number | false;

package/dist/vue-components.es10.js

@@ -1,23 +1,30 @@
-import { h as r } from "vue";
-import i from "./vue-components.es5.js";
-import { useOmegaForm as f } from "./vue-components.es7.js";
-const g = (e) => (...o) => {
-  const [n, m, p] = o;
-  return f(
-    n,
-    m,
+import { h as o } from "vue";
+import l from "./vue-components.es5.js";
+import { useOmegaForm as O } from "./vue-components.es7.js";
+const g = (n) => (...m) => {
+  const [p, s, a] = m;
+  return O(
+    p,
+    s,
     {
-      ...p,
+      ...a,
       input: {
         name: "WrappedInput",
         inheritAttrs: !1,
-        setup(s, { attrs: t }) {
-          return () => r(i, {
-            ...s,
+        setup(c, { attrs: t }) {
+          return () => o(l, {
+            ...c,
             ...t
           }, {
             // Override the default slot that OmegaInternalInput provides
-            default: ({ field: u, ...a }) => r(e, { ...t, field: u, inputProps: a })
+            default: ({ field: f, state: i, ...r }) => {
+              const u = Object.fromEntries(
+                Object.entries(t).filter(
+                  ([e]) => !Object.prototype.hasOwnProperty.call(r, e) && e !== "form"
+                )
+              );
+              return o(n, { ...u, field: f, state: i, inputProps: r });
+            }
           });
         }
       }

package/dist/vue-components.es12.js

@@ -1,13 +1,12 @@
-import { onMounted as e, onUnmounted as u } from "vue";
-function p(t) {
-  let n;
-  e(() => {
-    const o = t();
-    o && (n = o);
-  }), u(() => {
-    n && n();
-  });
-}
+import { Exit as c, Runtime as u } from "effect";
+import { dual as n, isFunction as m } from "./vue-components.es26.js";
+const i = Symbol.for("clone-trait"), a = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
+n(2, (e, t) => a(e, { ...e, ...m(t) ? t(e) : t }));
+const p = (e, t) => new Promise((o, s) => e.addObserver((r) => {
+  c.isSuccess(r) ? o(r.value) : s(u.makeFiberFailure(r.cause));
+}));
 export {
-  p as onMountedWithCleanup
+  a as clone,
+  i as cloneTrait,
+  p as runtimeFiberAsPromise
 };

package/dist/vue-components.es13.js

@@ -1,12 +1,7 @@
-import { Exit as c, Runtime as u } from "effect";
-import { dual as n, isFunction as m } from "./vue-components.es26.js";
-const i = Symbol.for("clone-trait"), a = n(2, (e, t) => i in e ? e[i](t) : Object.setPrototypeOf(t, Object.getPrototypeOf(e)));
-n(2, (e, t) => a(e, { ...e, ...m(t) ? t(e) : t }));
-const p = (e, t) => new Promise((o, s) => e.addObserver((r) => {
-  c.isSuccess(r) ? o(r.value) : s(u.makeFiberFailure(r.cause));
-}));
+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 {
-  a as clone,
-  i as cloneTrait,
-  p as runtimeFiberAsPromise
+  s as isFunction,
+  i as isObject,
+  t as isRecordOrArray
 };

package/dist/vue-components.es14.js

@@ -1,7 +1,56 @@
-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);
+import { defineComponent as F, computed as i, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as b, mergeProps as B } from "vue";
+const N = /* @__PURE__ */ F({
+  inheritAttrs: !1,
+  __name: "OmegaArray",
+  props: {
+    form: {},
+    name: {},
+    defaultItems: {},
+    items: {}
+  },
+  setup(n) {
+    const a = n, y = a.form.useStore((e) => e.values), d = i(() => {
+      const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
+      try {
+        return e.split(".").reduce((r, t) => r && r[t], y.value);
+      } catch (r) {
+        return console.error(r), [];
+      }
+    });
+    M(async () => {
+      a.defaultItems && !d.value && a.form.setFieldValue(a.name, a.defaultItems);
+    });
+    const $ = i(() => (r) => {
+      const t = r.replace(/\[\d+\]/g, "");
+      return a.form.meta[t];
+    });
+    return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
+      default: g(({ field: t, state: f }) => [
+        o(e.$slots, "pre-array", l(u({ field: t, state: f }))),
+        (s(!0), k(A, null, b(d.value, (C, m) => (s(), c(p(n.form.Field), {
+          key: `${n.name}[${Number(m)}]`,
+          name: (
+            // eslint-disable-next-line
+            `${n.name}[${Number(m)}]`
+          )
+        }, {
+          default: g(({ field: v, state: h }) => [
+            o(e.$slots, "default", B({ ref_for: !0 }, {
+              subField: v,
+              subState: h,
+              index: Number(m),
+              field: t
+            }))
+          ]),
+          _: 2
+        }, 1032, ["name"]))), 128)),
+        o(e.$slots, "post-array", l(u({ field: t, state: f }))),
+        o(e.$slots, "field", l(u({ field: t })))
+      ]),
+      _: 3
+    }, 8, ["name"]));
+  }
+});
 export {
-  s as isFunction,
-  i as isObject,
-  t as isRecordOrArray
+  N as default
 };

package/dist/vue-components.es15.js

@@ -1,56 +1,70 @@
-import { defineComponent as F, computed as i, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as b, mergeProps as B } from "vue";
-const N = /* @__PURE__ */ F({
-  inheritAttrs: !1,
-  __name: "OmegaArray",
+import { defineComponent as O, computed as j, createElementBlock as M, openBlock as _, Fragment as E, renderList as A, renderSlot as F, createVNode as g, unref as h, mergeProps as k } from "vue";
+import { Order as l, pipe as v, Array as u } from "effect-app";
+const I = /* @__PURE__ */ O({
+  __name: "OmegaAutoGen",
   props: {
     form: {},
-    name: {},
-    defaultItems: {},
-    items: {}
+    pick: {},
+    omit: {},
+    labelMap: { type: Function },
+    filterMap: { type: Function },
+    order: {},
+    sort: {}
   },
-  setup(n) {
-    const a = n, y = a.form.useStore((e) => e.values), d = i(() => {
-      const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
-      try {
-        return e.split(".").reduce((r, t) => r && r[t], y.value);
-      } catch (r) {
-        return console.error(r), [];
-      }
-    });
-    M(async () => {
-      a.defaultItems && !d.value && a.form.setFieldValue(a.name, a.defaultItems);
-    });
-    const $ = i(() => (r) => {
-      const t = r.replace(/\[\d+\]/g, "");
-      return a.form.meta[t];
-    });
-    return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
-      default: g(({ field: t, state: f }) => [
-        o(e.$slots, "pre-array", l(u({ field: t, state: f }))),
-        (s(!0), k(A, null, b(d.value, (C, m) => (s(), c(p(n.form.Field), {
-          key: `${n.name}[${Number(m)}]`,
-          name: (
-            // eslint-disable-next-line
-            `${n.name}[${Number(m)}]`
-          )
-        }, {
-          default: g(({ field: v, state: h }) => [
-            o(e.$slots, "default", B({ ref_for: !0 }, {
-              subField: v,
-              subState: h,
-              index: Number(m),
-              field: t
-            }))
-          ]),
-          _: 2
-        }, 1032, ["name"]))), 128)),
-        o(e.$slots, "post-array", l(u({ field: t, state: f }))),
-        o(e.$slots, "field", l(u({ field: t })))
-      ]),
-      _: 3
-    }, 8, ["name"]));
+  setup(i) {
+    const p = (e) => (r) => Object.fromEntries(
+      Object.entries(r).map(([t, o]) => [t, e(o, t)])
+    ), a = (e) => (r) => Object.fromEntries(
+      Object.entries(r).filter(([t, o]) => e(o, t))
+    ), m = (e) => (r) => Object.entries(r).reduce(
+      (t, [o, c]) => {
+        const s = e(c, o);
+        return s !== !1 && (t[o] = s), t;
+      },
+      {}
+    ), n = i, f = (e, r) => {
+      const t = r?.indexOf(e) ?? -1;
+      return t === -1 ? Number.MAX_SAFE_INTEGER : t;
+    }, d = l.mapInput(
+      l.number,
+      (e) => f(e.name, n.order || [])
+    ), b = j(
+      () => v(
+        n.form.meta,
+        // include / exclude
+        a(
+          (e, r) => n.pick ? n.pick.includes(r) && !n.omit?.includes(r) : !n.omit?.includes(r)
+        ),
+        (e) => e,
+        // labelMap and adding name
+        p((e, r) => ({
+          name: r,
+          label: n.labelMap?.(r) || r,
+          ...e
+        })),
+        // filterMap
+        n.filterMap ? m((e) => {
+          const r = n.filterMap?.(e.name, e);
+          return r === void 0 || r === !0 ? e : r;
+        }) : (e) => e,
+        // transform to array
+        (e) => Object.values(e),
+        // order
+        u.sort(d),
+        // sort
+        n.sort ? u.sort(n.sort) : (e) => e
+      )
+    );
+    return (e, r) => (_(!0), M(E, null, A(b.value, ({ name: t, label: o, ...c }) => F(e.$slots, "default", {
+      child: { name: t, label: o, ...c }
+    }, () => [
+      g(h(i.form).Input, k({
+        name: t,
+        label: o
+      }, { ref_for: !0 }, c), null, 16, ["name", "label"])
+    ])), 256));
   }
 });
 export {
-  N as default
+  I as default
 };

package/dist/vue-components.es16.js

@@ -1,70 +1,8 @@
-import { defineComponent as O, computed as j, createElementBlock as M, openBlock as _, Fragment as E, renderList as A, renderSlot as F, createVNode as g, unref as h, mergeProps as k } from "vue";
-import { Order as l, pipe as v, Array as u } from "effect-app";
-const I = /* @__PURE__ */ O({
-  __name: "OmegaAutoGen",
-  props: {
-    form: {},
-    pick: {},
-    omit: {},
-    labelMap: { type: Function },
-    filterMap: { type: Function },
-    order: {},
-    sort: {}
-  },
-  setup(i) {
-    const p = (e) => (r) => Object.fromEntries(
-      Object.entries(r).map(([t, o]) => [t, e(o, t)])
-    ), a = (e) => (r) => Object.fromEntries(
-      Object.entries(r).filter(([t, o]) => e(o, t))
-    ), m = (e) => (r) => Object.entries(r).reduce(
-      (t, [o, c]) => {
-        const s = e(c, o);
-        return s !== !1 && (t[o] = s), t;
-      },
-      {}
-    ), n = i, f = (e, r) => {
-      const t = r?.indexOf(e) ?? -1;
-      return t === -1 ? Number.MAX_SAFE_INTEGER : t;
-    }, d = l.mapInput(
-      l.number,
-      (e) => f(e.name, n.order || [])
-    ), b = j(
-      () => v(
-        n.form.meta,
-        // include / exclude
-        a(
-          (e, r) => n.pick ? n.pick.includes(r) && !n.omit?.includes(r) : !n.omit?.includes(r)
-        ),
-        (e) => e,
-        // labelMap and adding name
-        p((e, r) => ({
-          name: r,
-          label: n.labelMap?.(r) || r,
-          ...e
-        })),
-        // filterMap
-        n.filterMap ? m((e) => {
-          const r = n.filterMap?.(e.name, e);
-          return r === void 0 || r === !0 ? e : r;
-        }) : (e) => e,
-        // transform to array
-        (e) => Object.values(e),
-        // order
-        u.sort(d),
-        // sort
-        n.sort ? u.sort(n.sort) : (e) => e
-      )
-    );
-    return (e, r) => (_(!0), M(E, null, A(b.value, ({ name: t, label: o, ...c }) => F(e.$slots, "default", {
-      child: { name: t, label: o, ...c }
-    }, () => [
-      g(h(i.form).Input, k({
-        name: t,
-        label: o
-      }, { ref_for: !0 }, c), null, 16, ["name", "label"])
-    ])), 256));
-  }
-});
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");if(a.appendChild(document.createTextNode(".v-enter-from[data-v-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{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-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{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-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{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-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{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-d4ffe76f"]]);
 export {
-  I as default
+  e as default
 };

package/dist/vue-components.es17.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-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{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-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{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-d4ffe76f],.v-leave-to[data-v-d4ffe76f]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-d4ffe76f],.v-leave-active[data-v-d4ffe76f]{display:grid;transition:all .15s}.v-enter-to[data-v-d4ffe76f],.v-leave-from[data-v-d4ffe76f]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-d4ffe76f]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-d4ffe76f]{min-height:0}.error-list[data-v-d4ffe76f]{list-style-position:inside}div.error-list[data-v-d4ffe76f]{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-d4ffe76f]{grid-template-columns:auto 1fr}.error-link[data-v-d4ffe76f]{grid-column:1 / -1;justify-self:end}}@container (max-width: 17.75rem){div.error-list[data-v-d4ffe76f]{grid-template-columns:1fr}.error-message[data-v-d4ffe76f]{grid-column:1 / -1}}.error-item[data-v-d4ffe76f]{display:contents}a[data-v-d4ffe76f]{min-width:min-content}.error-link[data-v-d4ffe76f]{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";
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8fe92df3]{display:contents}fieldset[disabled][data-v-8fe92df3]>*{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-8fe92df3]{display:contents}fieldset[disabled][data-v-8fe92df3]>*{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.es32.js";
 
-import o from "./vue-components.es31.js";
-const e = /* @__PURE__ */ o(r, [["__scopeId", "data-v-d4ffe76f"]]);
+import m from "./vue-components.es31.js";
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8fe92df3"]]);
 export {
-  e as default
+  a as default
 };

package/dist/vue-components.es18.js

@@ -1,8 +1,5 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8fe92df3]{display:contents}fieldset[disabled][data-v-8fe92df3]>*{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-8fe92df3]{display:contents}fieldset[disabled][data-v-8fe92df3]>*{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.es32.js";
-
-import m from "./vue-components.es31.js";
-const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8fe92df3"]]);
+import { TraceAPI as r } from "./vue-components.es46.js";
+var t = r.getInstance();
 export {
-  a as default
+  t as trace
 };

package/dist/vue-components.es19.js

@@ -1,5 +1,5 @@
-import { TraceAPI as r } from "./vue-components.es46.js";
-var t = r.getInstance();
+import { ContextAPI as t } from "./vue-components.es45.js";
+var o = t.getInstance();
 export {
-  t as trace
+  o as context
 };

package/dist/vue-components.es20.js

@@ -1,5 +1,4 @@
-import { ContextAPI as t } from "./vue-components.es45.js";
-var o = t.getInstance();
+import f from "./vue-components.es5.js";
 export {
-  o as context
+  f as default
 };

package/dist/vue-components.es21.js

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

package/dist/vue-components.es22.js

@@ -1,4 +1,19 @@
-import f from "./vue-components.es6.js";
+function c(t) {
+  return { all: t = t || /* @__PURE__ */ new Map(), on: function(e, f) {
+    var i = t.get(e);
+    i ? i.push(f) : t.set(e, [f]);
+  }, off: function(e, f) {
+    var i = t.get(e);
+    i && (f ? i.splice(i.indexOf(f) >>> 0, 1) : t.set(e, []));
+  }, emit: function(e, f) {
+    var i = t.get(e);
+    i && i.slice().map(function(a) {
+      a(f);
+    }), (i = t.get("*")) && i.slice().map(function(a) {
+      a(e, f);
+    });
+  } };
+}
 export {
-  f as default
+  c as default
 };

package/dist/vue-components.es23.js

@@ -1,19 +1,13 @@
-function c(t) {
-  return { all: t = t || /* @__PURE__ */ new Map(), on: function(e, f) {
-    var i = t.get(e);
-    i ? i.push(f) : t.set(e, [f]);
-  }, off: function(e, f) {
-    var i = t.get(e);
-    i && (f ? i.splice(i.indexOf(f) >>> 0, 1) : t.set(e, []));
-  }, emit: function(e, f) {
-    var i = t.get(e);
-    i && i.slice().map(function(a) {
-      a(f);
-    }), (i = t.get("*")) && i.slice().map(function(a) {
-      a(e, f);
-    });
-  } };
+import { onMounted as e, onUnmounted as u } from "vue";
+function p(t) {
+  let n;
+  e(() => {
+    const o = t();
+    o && (n = o);
+  }), u(() => {
+    n && n();
+  });
 }
 export {
-  c as default
+  p as onMountedWithCleanup
 };

package/dist/vue-components.es24.js

@@ -1,16 +1,17 @@
-import { defineComponent as y, resolveComponent as o, createElementBlock as m, openBlock as n, createBlock as a, createCommentVNode as i, resolveDynamicComponent as d, mergeProps as u, unref as b, withCtx as h, Fragment as c, renderList as C } from "vue";
+import { defineComponent as b, resolveComponent as o, createElementBlock as m, openBlock as n, createBlock as a, createCommentVNode as i, resolveDynamicComponent as d, mergeProps as u, unref as f, withCtx as h, Fragment as c, renderList as C } from "vue";
 import { getInputType as q } from "./vue-components.es9.js";
-const U = /* @__PURE__ */ y({
+const U = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "OmegaInputVuetify",
   props: {
     inputProps: {},
-    field: {}
+    field: {},
+    state: {}
   },
   emits: ["focus", "blur"],
   setup(e) {
     return (r, l) => {
-      const s = o("v-text-field"), P = o("v-textarea"), g = o("v-radio"), v = o("v-radio-group"), p = o("v-select"), f = o("v-autocomplete");
+      const s = o("v-text-field"), P = o("v-textarea"), g = o("v-radio"), v = o("v-radio-group"), p = o("v-select"), y = o("v-autocomplete");
       return n(), m("div", {
         class: "omega-input",
         onFocusout: l[4] || (l[4] = (t) => r.$emit("blur", t)),
@@ -25,7 +26,7 @@ const U = /* @__PURE__ */ y({
           error: e.inputProps.error,
           ripple: ""
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           onChange: l[0] || (l[0] = (t) => e.field.handleChange(t.target.checked))
         }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
         e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (n(), a(s, u({
@@ -34,13 +35,13 @@ const U = /* @__PURE__ */ y({
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
           "max-length": e.inputProps.maxLength,
-          type: b(q)(e.inputProps.type),
+          type: f(q)(e.inputProps.type),
           name: e.field.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
         }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
         e.inputProps.type === "text" ? (n(), a(P, u({
@@ -54,7 +55,7 @@ const U = /* @__PURE__ */ y({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
         }), null, 16, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
         e.inputProps.type === "number" || e.inputProps.type === "range" ? (n(), a(d(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), u({
@@ -69,7 +70,7 @@ const U = /* @__PURE__ */ y({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           "onUpdate:modelValue": l[1] || (l[1] = (t) => {
             t || t === 0 ? e.field.handleChange(Number(t)) : e.field.handleChange(void 0);
           })
@@ -82,7 +83,7 @@ const U = /* @__PURE__ */ y({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           "onUpdate:modelValue": e.field.handleChange
         }), {
           default: h(() => [
@@ -107,11 +108,11 @@ const U = /* @__PURE__ */ y({
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           onClear: l[2] || (l[2] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
         }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : i("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (n(), a(f, u({
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (n(), a(y, u({
           key: 6,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "autocomplete",
@@ -124,7 +125,7 @@ const U = /* @__PURE__ */ y({
           error: e.inputProps.error,
           chips: e.inputProps.type === "autocompletemultiple"
         }, r.$attrs, {
-          "model-value": e.field.state.value,
+          "model-value": e.state.value,
           onClear: l[3] || (l[3] = (t) => e.field.handleChange(void 0)),
           "onUpdate:modelValue": e.field.handleChange
         }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : i("", !0)

package/dist/vue-components.es27.js

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

package/dist/vue-components.es28.js

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

package/dist/vue-components.es4.js

@@ -1,6 +1,6 @@
 import { defineComponent as c, mergeModels as f, useModel as v, resolveComponent as C, createBlock as k, openBlock as V, unref as r, createSlots as g, withCtx as d, renderSlot as u, renderList as y, normalizeProps as B, guardReactiveProps as E } from "vue";
 import { useOnClose as M } from "./vue-components.es8.js";
-import { onMountedWithCleanup as _ } from "./vue-components.es12.js";
+import { onMountedWithCleanup as _ } from "./vue-components.es23.js";
 const P = /* @__PURE__ */ c({
   __name: "Dialog",
   props: /* @__PURE__ */ f({

package/dist/vue-components.es5.js

@@ -1,8 +1,8 @@
-import { defineComponent as h, inject as $, computed as s, createBlock as i, openBlock as f, resolveDynamicComponent as M, withCtx as u, createCommentVNode as b, mergeProps as C, renderSlot as F, normalizeProps as k, guardReactiveProps as y } from "vue";
-import { useIntl as A } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as w } from "./vue-components.es9.js";
-import I from "./vue-components.es6.js";
-const z = /* @__PURE__ */ h({
+import { defineComponent as $, inject as M, computed as s, createBlock as i, openBlock as f, resolveDynamicComponent as b, withCtx as u, createCommentVNode as C, mergeProps as F, renderSlot as k, normalizeProps as y, guardReactiveProps as A } from "vue";
+import { useIntl as w } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as I } from "./vue-components.es9.js";
+import N from "./vue-components.es6.js";
+const B = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
@@ -12,38 +12,39 @@ const z = /* @__PURE__ */ h({
     name: {}
   },
   setup(a) {
-    const e = a, n = $(
+    const e = a, n = M(
       "getMetaFromArray",
       null
     ), r = s(() => n?.value && n.value(e.name) ? n.value(e.name) : e.form.meta[e.name]), c = s(() => {
       if (!r.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return w(r.value);
-    }), { formatMessage: o } = A(), d = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (l) => l.toUpperCase()).trim(), m = () => o({ id: `general.fields.${e.name}`, defaultMessage: d(e.name) }), p = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${e.name}`, defaultMessage: m() }) : m();
-    return (t, l) => (f(), i(M(a.form.Field), {
+      return I(r.value);
+    }), { formatMessage: o } = w(), d = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (l) => l.toUpperCase()).trim(), m = () => o({ id: `general.fields.${e.name}`, defaultMessage: d(e.name) }), p = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${e.name}`, defaultMessage: m() }) : m();
+    return (t, l) => (f(), i(b(a.form.Field), {
       name: a.name,
       validators: {
         onChange: c.value,
         ...a.validators
       }
     }, {
-      default: u(({ field: g }) => [
-        r.value ? (f(), i(I, C({ key: 0 }, { ...t.$attrs, ...t.$props }, {
+      default: u(({ field: g, state: v }) => [
+        r.value ? (f(), i(N, F({ key: 0 }, { ...t.$attrs, ...t.$props }, {
           field: g,
+          state: v,
           register: a.form.registerField,
           label: a.label ?? p(),
           meta: r.value
         }), {
-          default: u((v) => [
-            F(t.$slots, "default", k(y(v)))
+          default: u((h) => [
+            k(t.$slots, "default", y(A(h)))
           ]),
           _: 3
-        }, 16, ["field", "register", "label", "meta"])) : b("", !0)
+        }, 16, ["field", "state", "register", "label", "meta"])) : C("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
 });
 export {
-  z as default
+  B as default
 };

package/dist/vue-components.es6.js

@@ -8,6 +8,7 @@ const U = /* @__PURE__ */ b({
   __name: "OmegaInternalInput",
   props: {
     field: {},
+    state: {},
     meta: {},
     label: {},
     type: {},
@@ -16,9 +17,9 @@ const U = /* @__PURE__ */ b({
     options: {}
   },
   setup(u) {
-    const e = u, p = C()?.appContext.components.VTextField, i = x(), a = e.field, o = I(a.store, (t) => t), d = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
-    e.register(n(() => ({ name: e.field.name, label: e.label, id: i })));
-    const f = n(() => o.value.value), c = n(() => o.value.meta.errors ?? []), s = n(
+    const e = u, p = C()?.appContext.components.VTextField, s = x(), l = e.field, o = I(l.store, (t) => t), d = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
+    e.register(n(() => ({ name: e.field.name, label: e.label, id: s })));
+    const f = n(() => o.value.value), c = n(() => o.value.meta.errors ?? []), i = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         c.value.map((t) => t?.message).filter(Boolean)
@@ -31,7 +32,7 @@ const U = /* @__PURE__ */ b({
     _(() => {
       if (!f.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
         const t = o.value.meta.isDirty;
-        a.setValue(null), a.setMeta((r) => ({ ...r, isDirty: t }));
+        l.setValue(null), l.setMeta((r) => ({ ...r, isDirty: t }));
       }
     });
     const h = (t) => {
@@ -41,27 +42,28 @@ const U = /* @__PURE__ */ b({
         }
       };
       return new Proxy(t, r);
-    }, l = n(() => ({
+    }, a = n(() => ({
       inputProps: {
-        id: i,
+        id: s,
         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,
-        errorMessages: s.value,
-        error: !!s.value.length,
+        errorMessages: i.value,
+        error: !!i.value.length,
         type: d.value,
         label: `${e.label}${e.meta?.required ? " *" : ""}`,
         options: e.options
       },
+      state: e.state,
       field: h(e.field)
     }));
-    return (t, r) => P(t.$slots, "default", m(M({ ...l.value.inputProps, field: l.value.field })), () => [
+    return (t, r) => P(t.$slots, "default", m(M({ ...a.value.inputProps, field: a.value.field, state: a.value.state })), () => [
       N("div", {
         class: $(t.$attrs.class)
       }, [
-        q(p) ? (B(), V(L, m(F({ key: 0 }, { ...t.$attrs, ...l.value })), null, 16)) : k("", !0)
+        q(p) ? (B(), V(L, m(F({ key: 0 }, { ...t.$attrs, ...a.value })), null, 16)) : k("", !0)
       ], 2)
     ]);
   }

package/dist/vue-components.es7.js

@@ -1,17 +1,17 @@
 import { useForm as q } from "@tanstack/vue-form";
 import { Data as K, S as I, Effect as l, Fiber as F, Option as M, Array as P } from "effect-app";
-import { runtimeFiberAsPromise as B } from "./vue-components.es13.js";
-import { isObject as G } from "./vue-components.es14.js";
+import { runtimeFiberAsPromise as B } from "./vue-components.es12.js";
+import { isObject as G } from "./vue-components.es13.js";
 import { computed as j, onUnmounted as N, onMounted as T, onBeforeUnmount as W, ref as k, watch as z, h as D } from "vue";
 import { usePreventClose as Q } from "./vue-components.es8.js";
-import X from "./vue-components.es15.js";
-import Y from "./vue-components.es16.js";
-import Z from "./vue-components.es17.js";
+import X from "./vue-components.es14.js";
+import Y from "./vue-components.es15.js";
+import Z from "./vue-components.es16.js";
 import { generateMetaFromSchema as C } from "./vue-components.es9.js";
 import ee from "./vue-components.es5.js";
-import re from "./vue-components.es18.js";
-import { trace as _ } from "./vue-components.es19.js";
-import { context as V } from "./vue-components.es20.js";
+import re from "./vue-components.es17.js";
+import { trace as _ } from "./vue-components.es18.js";
+import { context as V } from "./vue-components.es19.js";
 class te extends K.TaggedError("FormErrors") {
 }
 const w = (c) => function(n) {

package/dist/vue-components.es8.js

@@ -1,6 +1,6 @@
-import r from "./vue-components.es23.js";
+import r from "./vue-components.es22.js";
 import { inject as c, provide as l } from "vue";
-import { onMountedWithCleanup as u } from "./vue-components.es12.js";
+import { onMountedWithCleanup as u } from "./vue-components.es23.js";
 const f = () => r(), i = Symbol("DialogBus"), p = () => c(i, null), g = () => {
   const e = f();
   return l(i, e), e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.8.11",
+  "version": "1.8.13",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -51,8 +51,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.10.2",
-    "@effect-app/vue": "2.84.3"
+    "@effect-app/vue": "2.84.3",
+    "effect-app": "3.10.2"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/InputProps.ts

@@ -41,16 +41,17 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     type: string
   }
   field: OmegaFieldInternalApi<From, TName>
+  /** be sure to use this state and not `field.state` as it is not reactive */
+  state: OmegaFieldInternalApi<From, TName>["state"]
 }
 
 export type MergedInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> =
   & InputProps<From, TName>["inputProps"]
-  & Pick<InputProps<From, TName>, "field">
+  & Pick<InputProps<From, TName>, "field" | "state">
 
 export type VuetifyInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
   inputProps: InputProps<From, TName>["inputProps"] & {
     type: string
     options?: { title: string; value: string }[]
   }
-  field: InputProps<From, TName>["field"]
-}
+} & Pick<InputProps<From, TName>, "field" | "state">

package/src/components/OmegaForm/OmegaInput.vue

@@ -7,11 +7,12 @@
       ...validators
     }"
   >
-    <template #default="{ field }">
+    <template #default="{ field, state }">
       <OmegaInternalInput
         v-if="meta"
         v-bind="{ ...$attrs, ...$props }"
         :field="field"
+        :state="state"
         :register="form.registerField"
         :label="label ?? i18n()"
         :meta="meta"

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -14,7 +14,7 @@
       :error="inputProps.error"
       ripple
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @change="(e: any) => field.handleChange(e.target.checked)"
     />
     <v-text-field
@@ -29,7 +29,7 @@
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @update:model-value="field.handleChange"
     />
     <v-textarea
@@ -43,7 +43,7 @@
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @update:model-value="field.handleChange"
     />
     <component
@@ -59,7 +59,7 @@
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
           field.handleChange(Number(e) as any)
@@ -76,7 +76,7 @@
         :error-messages="inputProps.errorMessages"
         :error="inputProps.error"
         v-bind="$attrs"
-        :model-value="field.state.value"
+        :model-value="state.value"
         @update:model-value="field.handleChange"
       >
         <v-radio
@@ -100,7 +100,7 @@
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
     />
@@ -119,7 +119,7 @@
       :error="inputProps.error"
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
-      :model-value="field.state.value"
+      :model-value="state.value"
       @clear="field.handleChange(undefined as any)"
       @update:model-value="field.handleChange"
     />

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field }">
+  <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field, state: inputProps.state }">
     <div :class="$attrs.class">
       <OmegaInputVuetify
         v-if="vuetified"
@@ -26,6 +26,7 @@ defineOptions({
 
 const props = defineProps<{
   field: OmegaFieldInternalApi<From, Name>
+  state: OmegaFieldInternalApi<From, Name>["state"]
   meta: MetaRecord<From>[NestedKeyOf<From>]
   label: string
   type?: TypeOverride
@@ -137,6 +138,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     options: props.options
   },
 
+  state: props.state,
   field: wrapField(props.field)
 }))
 </script>

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -27,8 +27,15 @@ export const createUseFormWithCustomInput = <
             ...attrs
           }, {
             // Override the default slot that OmegaInternalInput provides
-            default: <TName extends DeepKeys<From>>({ field, ...inputProps }: MergedInputProps<From, TName>) => {
-              return h(CustomInputComponent, { ...attrs, field, inputProps })
+            default: <TName extends DeepKeys<From>>({ field, state, ...inputProps }: MergedInputProps<From, TName>) => {
+              // Filter out attrs that are already in inputProps or are special  like 'form'
+              const filteredAttrs = Object.fromEntries(
+                Object.entries(attrs).filter(([key]) =>
+                  !Object.prototype.hasOwnProperty.call(inputProps, key)
+                  && key !== "form"
+                )
+              )
+              return h(CustomInputComponent, { ...filteredAttrs, field, state, inputProps })
             }
           })
       }