@effect-app/vue-components 1.5.1 → 1.6.1

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

@@ -1,23 +1,23 @@
 import type { DeepKeys, DeepValue, FieldApi, FieldAsyncValidateOrFn, FieldValidateAsyncFn, FieldValidateFn, FieldValidateOrFn, FormAsyncValidateOrFn, FormValidateOrFn, StandardSchemaV1 } from "@tanstack/vue-form";
 export type OmegaFieldInternalApi<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = FieldApi<From, TName, DeepValue<From, TName>, FieldValidateOrFn<From, TName, DeepValue<From, TName>> | undefined, StandardSchemaV1<DeepValue<From, TName>, unknown> | FieldValidateFn<From, TName>, StandardSchemaV1<DeepValue<From, TName>, unknown> | FieldValidateAsyncFn<From, TName>, FieldValidateOrFn<From, TName, DeepValue<From, TName>>, FieldAsyncValidateOrFn<From, TName, DeepValue<From, TName>>, FieldValidateOrFn<From, TName, DeepValue<From, TName>> | undefined, FieldAsyncValidateOrFn<From, TName, DeepValue<From, TName>> | undefined, FieldValidateOrFn<From, TName, DeepValue<From, TName>> | undefined, FieldAsyncValidateOrFn<From, TName, DeepValue<From, TName>> | undefined, FormValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, any, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, FormAsyncValidateOrFn<From> | undefined, Record<string, any> | undefined>;
 export type InputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
-    id: string;
-    required?: boolean;
-    minLength?: number | false;
-    maxLength?: number | false;
-    max?: number | false;
-    min?: number | false;
-    name: string;
-    modelValue: DeepValue<From, TName>;
-    handleChange: (value: DeepValue<From, TName>) => void;
-    errorMessages: string[];
-    error: boolean;
+    inputProps: {
+        id: string;
+        required?: boolean;
+        minLength?: number | false;
+        maxLength?: number | false;
+        max?: number | false;
+        min?: number | false;
+        errorMessages: string[];
+        error: boolean;
+        setRealDirty: () => void;
+        type: string;
+        label: string;
+        options?: {
+            title: string;
+            value: string;
+        }[];
+    };
     field: OmegaFieldInternalApi<From, TName>;
-    setRealDirty: () => void;
-    type: string;
-    label: string;
-    options?: {
-        title: string;
-        value: string;
-    }[];
 };
+export type MergedInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = InputProps<From, TName>["inputProps"] & Pick<InputProps<From, TName>, "field">;

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

@@ -1,5 +1,5 @@
 import { type DeepKeys } from "@tanstack/vue-form";
-import type { InputProps } from "./InputProps";
+import type { MergedInputProps } from "./InputProps";
 import type { DefaultInputProps } from "./OmegaFormStuff";
 declare const __VLS_export: <From extends Record<PropertyKey, any>, To 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<{
@@ -8,7 +8,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        default(props: InputProps<From, Name>): void;
+        default(props: MergedInputProps<From, Name>): void;
     };
     emit: {};
 }>) => import("vue").VNode & {

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

@@ -5,18 +5,15 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
     attrs: any;
     slots: {
         default?: (props: {
+            field: import("./InputProps").OmegaFieldInternalApi<From, any>;
             id: string;
             required?: boolean;
             minLength?: number | false;
             maxLength?: number | false;
             max?: number | false;
             min?: number | false;
-            name: string;
-            modelValue: import("@tanstack/vue-form").DeepValue<From, any>;
-            handleChange: (value: import("@tanstack/vue-form").DeepValue<From, any>) => void;
             errorMessages: string[];
             error: boolean;
-            field: import("./InputProps").OmegaFieldInternalApi<From, any>;
             setRealDirty: () => void;
             type: string;
             label: string;

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

@@ -1,10 +1,7 @@
 import { type DeepKeys } from "@tanstack/vue-form";
 import type { InputProps } from "./InputProps";
 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<{
-        inputProps: InputProps<From, Name>;
-        vuetifyValue: unknown;
-    } & {
+    props: __VLS_PrettifyLocal<InputProps<From, Name> & {
         onBlur?: ((event: Event) => any) | undefined;
         onFocus?: ((event: Event) => any) | undefined;
     }> & import("vue").PublicProps;

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

@@ -17,18 +17,15 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
     attrs: any;
     slots: {
         default?: (props: {
+            field: OmegaFieldInternalApi<From, Name>;
             id: string;
             required?: boolean;
             minLength?: number | false;
             maxLength?: number | false;
             max?: number | false;
             min?: number | false;
-            name: string;
-            modelValue: import("@tanstack/vue-form").DeepValue<From, Name>;
-            handleChange: (value: import("@tanstack/vue-form").DeepValue<From, Name>) => void;
             errorMessages: string[];
             error: boolean;
-            field: OmegaFieldInternalApi<From, Name>;
             setRealDirty: () => void;
             type: string;
             label: string;

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

@@ -1,7 +1,7 @@
 import { type DeepKeys, DeepValue, StandardSchemaV1Issue, ValidationError, ValidationErrorMap } from "@tanstack/vue-form";
 import { Effect, Order, S } from "effect-app";
 import { type InjectionKey } from "vue";
-import { type InputProps } from "./InputProps";
+import { MergedInputProps } from "./InputProps";
 import { DefaultInputProps, type FilterItems, type FormProps, type MetaRecord, type NestedKeyOf, OmegaAutoGenMeta, OmegaError, type OmegaFormApi, OmegaFormState, OmegaInputProps, ShowErrorsOn } from "./OmegaFormStuff";
 type keysRule<T> = {
     keys?: NestedKeyOf<T>[];
@@ -71,7 +71,7 @@ export interface OmegaFormReturn<From extends Record<PropertyKey, any>, To exten
         expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
         attrs: any;
         slots: {
-            default(props: InputProps<From, Name>): void;
+            default(props: MergedInputProps<From, Name>): void;
         };
         emit: {};
     }>) => import("vue").VNode & {

package/dist/vue-components.es10.js

@@ -1,26 +1,25 @@
-import { h as e } from "vue";
+import { h as r } from "vue";
 import s from "./vue-components.es4.js";
-import { useOmegaForm as p } from "./vue-components.es7.js";
-const W = (r) => (...a) => {
-  const [m, n, o] = a;
-  return p(
+import { useOmegaForm as i } from "./vue-components.es7.js";
+const W = (e) => (...n) => {
+  const [m, o, a] = n;
+  return i(
     m,
-    n,
+    o,
     {
-      ...o,
+      ...a,
       input: {
         name: "WrappedInput",
         inheritAttrs: !1,
-        setup(f, { attrs: u, slots: i }) {
-          return () => e(s, {
+        setup(f, { attrs: u, slots: p }) {
+          return () => r(s, {
             ...f,
             ...u
           }, {
             // Override the default slot that OmegaInternalInput provides
-            default: (t) => t && "field" in t ? e(r, {
-              inputProps: t,
-              vuetifyValue: t.field.state.value
-            }) : i.default?.(t)
+            default: (t) => t && "field" in t ? r(e, {
+              inputProps: t
+            }) : p.default?.(t)
           });
         }
       }

package/dist/vue-components.es23.js

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

package/dist/vue-components.es5.js

@@ -1,9 +1,9 @@
 (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 N, getCurrentInstance as V, useId as _, computed as r, onMounted as v, ref as $, watchEffect as B, watch as I, onUnmounted as k, renderSlot as q, normalizeProps as D, guardReactiveProps as L, createElementVNode as O, normalizeClass as P, createBlock as F, createCommentVNode as M, unref as S, openBlock as U, mergeProps as z } from "vue";
-import { useStore as A } from "@tanstack/vue-form";
-import R from "./vue-components.es23.js";
+import { defineComponent as $, getCurrentInstance as B, useId as I, computed as n, onMounted as g, ref as V, watchEffect as k, watch as q, onUnmounted as D, renderSlot as F, normalizeProps as h, guardReactiveProps as L, createElementVNode as O, normalizeClass as M, createBlock as R, createCommentVNode as S, unref as U, openBlock as z, mergeProps as A } from "vue";
+import { useStore as T } from "@tanstack/vue-form";
+import Z from "./vue-components.es23.js";
 
-const J = /* @__PURE__ */ N({
+const Y = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -14,79 +14,80 @@ const J = /* @__PURE__ */ N({
     type: {},
     validators: {}
   },
-  setup(g) {
-    const e = g, h = V()?.appContext.components.VTextField, a = _(), o = e.field, n = A(o.store, (t) => t), m = r(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), f = r(() => n.value.value), p = r(() => n.value.meta.errors ?? []), y = r(
+  setup(v) {
+    const e = v, y = B()?.appContext.components.VTextField, a = I(), l = e.field, o = T(l.store, (t) => t), m = n(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), p = n(() => o.value.value), d = n(() => o.value.meta.errors ?? []), b = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        p.value.map((t) => t?.message).filter(Boolean)
+        d.value.map((t) => t?.message).filter(Boolean)
       )
-    ), b = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), C = (t) => {
-      b(t) && e.meta?.type !== "boolean" ? e.field.handleChange(
+    ), C = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), x = (t) => {
+      C(t) && e.meta?.type !== "boolean" ? e.field.handleChange(
         e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
       ) : e.field.handleChange(t);
     };
-    v(() => {
-      if (!f.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
-        const t = n.value.meta.isDirty;
-        o.setValue(null), o.setMeta((l) => ({ ...l, isDirty: t }));
+    g(() => {
+      if (!p.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
+        const t = o.value.meta.isDirty;
+        l.setValue(null), l.setMeta((r) => ({ ...r, isDirty: t }));
       }
     });
-    const { mapError: E, removeError: d, showErrors: w, showErrorsOn: x } = e.field.form.errorContext, s = $(!1);
-    B(() => {
-      (w.value || x === "onChange") && (s.value = !0);
+    const { mapError: w, removeError: f, showErrors: _, showErrorsOn: E } = e.field.form.errorContext, s = V(!1);
+    k(() => {
+      (_.value || E === "onChange") && (s.value = !0);
     });
     const i = () => {
       s.value = !0;
     };
-    v(() => {
-      f.value && i();
+    g(() => {
+      p.value && i();
     });
-    const c = r(() => !s.value && m.value !== "select" ? [] : y.value);
-    I(
-      p,
+    const c = n(() => !s.value && m.value !== "select" ? [] : b.value);
+    q(
+      d,
       (t) => {
-        t.length ? E({
+        t.length ? w({
           inputId: a,
-          errors: n.value.meta.errors.map((l) => l.message).filter(Boolean),
+          errors: o.value.meta.errors.map((r) => r.message).filter(Boolean),
           label: e.label
-        }) : d(a);
+        }) : f(a);
       }
-    ), k(() => {
-      d(a);
+    ), D(() => {
+      f(a);
     });
-    const u = r(() => ({
-      id: a,
-      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,
-      handleChange: C,
-      errorMessages: c.value,
-      error: !!c.value.length,
-      field: e.field,
-      setRealDirty: i,
-      type: m.value,
-      label: `${e.label}${e.meta?.required ? " *" : ""}`,
-      options: e.options
+    const P = (t) => {
+      const r = {
+        get(H, N, J) {
+          return N === "handleChange" ? x : Reflect.get(...arguments);
+        }
+      };
+      return new Proxy(t, r);
+    }, u = n(() => ({
+      inputProps: {
+        id: a,
+        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: c.value,
+        error: !!c.value.length,
+        setRealDirty: i,
+        type: m.value,
+        label: `${e.label}${e.meta?.required ? " *" : ""}`,
+        options: e.options
+      },
+      field: P(e.field)
     }));
-    return (t, l) => q(t.$slots, "default", D(L(u.value)), () => [
+    return (t, r) => F(t.$slots, "default", h(L({ ...u.value.inputProps, field: u.value.field })), () => [
       O("div", {
-        class: P(t.$attrs.class),
+        class: M(t.$attrs.class),
         onFocusout: i
       }, [
-        S(h) ? (U(), F(R, z({
-          key: 0,
-          "input-props": u.value
-        }, t.$attrs, {
-          "vuetify-value": u.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : M("", !0)
+        U(y) ? (z(), R(Z, h(A({ key: 0 }, { ...u.value, ...t.$attrs })), null, 16)) : S("", !0)
       ], 34)
     ]);
   }
 });
 export {
-  J as default
+  Y as default
 };

package/package.json

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

package/src/components/OmegaForm/InputProps.ts

@@ -28,20 +28,23 @@ export type OmegaFieldInternalApi<From extends Record<PropertyKey, any>, TName e
 >
 
 export type InputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
-  id: string
-  required?: boolean
-  minLength?: number | false
-  maxLength?: number | false
-  max?: number | false
-  min?: number | false
-  name: string
-  modelValue: DeepValue<From, TName>
-  handleChange: (value: DeepValue<From, TName>) => void
-  errorMessages: string[]
-  error: boolean
+  inputProps: {
+    id: string
+    required?: boolean
+    minLength?: number | false
+    maxLength?: number | false
+    max?: number | false
+    min?: number | false
+    errorMessages: string[]
+    error: boolean
+    setRealDirty: () => void
+    type: string
+    label: string
+    options?: { title: string; value: string }[]
+  }
   field: OmegaFieldInternalApi<From, TName>
-  setRealDirty: () => void
-  type: string
-  label: string
-  options?: { title: string; value: string }[]
 }
+
+export type MergedInputProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> =
+  & InputProps<From, TName>["inputProps"]
+  & Pick<InputProps<From, TName>, "field">

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -25,7 +25,7 @@
 >
 import { type DeepKeys } from "@tanstack/vue-form"
 import { inject } from "vue"
-import type { InputProps } from "./InputProps"
+import type { MergedInputProps } from "./InputProps"
 import type { DefaultInputProps, OmegaInputProps } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
 import { OmegaFormKey } from "./useOmegaForm"
@@ -46,6 +46,6 @@ defineProps<
 >()
 
 defineSlots<{
-  default(props: InputProps<From, Name>): void
+  default(props: MergedInputProps<From, Name>): void
 }>()
 </script>

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -8,14 +8,14 @@
       :is="inputProps.type === 'boolean' ? 'v-checkbox' : 'v-switch'"
       v-if="inputProps.type === 'boolean' || inputProps.type === 'switch'"
       :id="inputProps.id"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       ripple
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @change="(e: any) => inputProps.handleChange(e.target.checked)"
+      :model-value="field.state.value"
+      @change="(e: any) => field.handleChange(e.target.checked)"
     />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
@@ -24,13 +24,13 @@
       :min-length="inputProps.minLength"
       :max-length="inputProps.maxLength"
       :type="getInputType(inputProps.type)"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @update:model-value="field.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -38,13 +38,13 @@
       :required="inputProps.required"
       :min-length="inputProps.minLength"
       :max-length="inputProps.maxLength"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @update:model-value="field.handleChange"
     />
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
@@ -54,30 +54,30 @@
       :min="inputProps.min"
       :max="inputProps.max"
       :type="inputProps.type"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
+      :model-value="field.state.value"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
-          inputProps.handleChange(Number(e) as any)
+          field.handleChange(Number(e) as any)
         } else {
-          inputProps.handleChange(undefined as any)
+          field.handleChange(undefined as any)
         }
       }"
     />
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"
-        :name="inputProps.name"
+        :name="field.name"
         :label="inputProps.label"
         :error-messages="inputProps.errorMessages"
         :error="inputProps.error"
         v-bind="$attrs"
-        :model-value="vuetifyValue"
-        @update:model-value="inputProps.handleChange"
+        :model-value="field.state.value"
+        @update:model-value="field.handleChange"
       >
         <v-radio
           v-for="option in inputProps.options"
@@ -94,15 +94,15 @@
       :required="inputProps.required"
       :multiple="inputProps.type === 'multiple'"
       :chips="inputProps.type === 'multiple'"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @clear="inputProps.handleChange(undefined as any)"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @clear="field.handleChange(undefined as any)"
+      @update:model-value="field.handleChange"
     />
 
     <v-autocomplete
@@ -112,16 +112,16 @@
       :clearable="inputProps.type === 'autocomplete'"
       :multiple="inputProps.type === 'autocompletemultiple'"
       :required="inputProps.required"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @clear="inputProps.handleChange(undefined as any)"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @clear="field.handleChange(undefined as any)"
+      @update:model-value="field.handleChange"
     />
   </div>
 </template>
@@ -135,10 +135,7 @@ import { type DeepKeys } from "@tanstack/vue-form"
 import { getInputType } from "../OmegaForm/OmegaFormStuff"
 import type { InputProps } from "./InputProps"
 
-defineProps<{
-  inputProps: InputProps<From, Name>
-  vuetifyValue: unknown
-}>()
+defineProps<InputProps<From, Name>>()
 
 defineEmits<{
   (e: "focus", event: Event): void

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,14 +1,12 @@
 <template>
-  <slot v-bind="inputProps">
+  <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field }">
     <div
       :class="$attrs.class"
       @focusout="setRealDirty"
     >
       <OmegaInputVuetify
         v-if="vuetified"
-        :input-props="inputProps"
-        v-bind="$attrs"
-        :vuetify-value="inputProps.field.state.value"
+        v-bind="{ ...inputProps, ...$attrs }"
       />
     </div>
   </slot>
@@ -69,7 +67,6 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-
 // convert nullish value to null or undefined based on schema
 const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value) => {
   if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
@@ -149,22 +146,36 @@ onUnmounted(() => {
   removeError(id)
 })
 
+const wrapField = (field: OmegaFieldInternalApi<From, Name>) => {
+  const handler3 = {
+    get(_target: any, prop: PropertyKey, _receiver: any) {
+      if (prop === "handleChange") {
+        return handleChange
+      }
+      return Reflect.get(...arguments as unknown as [any, any, any])
+    }
+  }
+
+  const proxy3 = new Proxy(field, handler3)
+  return proxy3 as typeof field
+}
+
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
-  id,
-  required: props.meta?.required,
-  minLength: props.meta?.type === "string" && props.meta?.minLength,
-  maxLength: props.meta?.type === "string" && props.meta?.maxLength,
-  max: props.meta?.type === "number" && props.meta?.maximum,
-  min: props.meta?.type === "number" && props.meta?.minimum,
-  name: props.field.name,
-  modelValue: props.field.state.value,
-  handleChange,
-  errorMessages: showedErrors.value,
-  error: !!showedErrors.value.length,
-  field: props.field,
-  setRealDirty,
-  type: fieldType.value,
-  label: `${props.label}${props.meta?.required ? " *" : ""}`,
-  options: props.options
+  inputProps: {
+    id,
+    required: props.meta?.required,
+    minLength: props.meta?.type === "string" && props.meta?.minLength,
+    maxLength: props.meta?.type === "string" && props.meta?.maxLength,
+    max: props.meta?.type === "number" && props.meta?.maximum,
+    min: props.meta?.type === "number" && props.meta?.minimum,
+    errorMessages: showedErrors.value,
+    error: !!showedErrors.value.length,
+    setRealDirty,
+    type: fieldType.value,
+    label: `${props.label}${props.meta?.required ? " *" : ""}`,
+    options: props.options
+  },
+
+  field: wrapField(props.field)
 }))
 </script>

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -28,8 +28,7 @@ export const createUseFormWithCustomInput = (CustomInputComponent: Component) =>
               // If we receive inputProps from OmegaInternalInput, use our custom component
               if (inputProps && "field" in inputProps) {
                 return h(CustomInputComponent, {
-                  inputProps,
-                  vuetifyValue: inputProps.field.state.value
+                  inputProps
                 })
               }
               // Otherwise, pass through the slot content

package/src/components/OmegaForm/useOmegaForm.ts

@@ -8,7 +8,7 @@ import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
 import { Component, computed, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue"
 import { usePreventClose } from "./blockDialog"
-import { type InputProps } from "./InputProps"
+import { MergedInputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
 import OmegaAutoGen from "./OmegaAutoGen.vue"
 import { buildOmegaErrors } from "./OmegaErrorsContext"
@@ -161,7 +161,7 @@ export interface OmegaFormReturn<
       expose(exposed: import("vue").ShallowUnwrapRef<{}>): void
       attrs: any
       slots: {
-        default(props: InputProps<From, Name>): void
+        default(props: MergedInputProps<From, Name>): void
       }
       emit: {}
     }>