@effect-app/vue-components 4.0.0-beta.232 → 4.0.0-beta.234

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

@@ -16,7 +16,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
         inputClass: string | undefined | null;
     };
     field: OmegaFieldInternalApi<From, TName>;
-    /** be sure to use this state and not `field.state` as it is not reactive */
+    /** reactive field state, sourced from `field.state` (the Field slot's own `state` prop is a stale snapshot since @tanstack/vue-form 1.32) */
     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" | "state">;

package/dist/vue-components22.es.js

@@ -25,18 +25,18 @@ var h = /* @__PURE__ */ i({
 			let t = e.replace(/\[\d+\]/g, "");
 			return h.form.meta[t];
 		})), (t, c) => (l(), n(p(i.form.Field), { name: i.name }, {
-			default: m(({ field: c, state: u }) => [
+			default: m(({ field: c }) => [
 				f(t.$slots, "pre-array", s(a({
 					field: c,
-					state: u
+					state: c.state
 				}))),
 				(l(!0), r(e, null, d(_.value, (e, r) => (l(), n(p(i.form.Field), {
 					key: `${i.name}[${Number(r)}]`,
 					name: `${i.name}[${Number(r)}]`
 				}, {
-					default: m(({ field: e, state: n }) => [f(t.$slots, "default", o({ ref_for: !0 }, {
+					default: m(({ field: e }) => [f(t.$slots, "default", o({ ref_for: !0 }, {
 						subField: e,
-						subState: n,
+						subState: e.state,
 						index: Number(r),
 						field: c
 					}))]),
@@ -44,7 +44,7 @@ var h = /* @__PURE__ */ i({
 				}, 1032, ["name"]))), 128)),
 				f(t.$slots, "post-array", s(a({
 					field: c,
-					state: u
+					state: c.state
 				}))),
 				f(t.$slots, "field", s(a({ field: c })))
 			]),

package/dist/vue-components35.es.js

@@ -20,13 +20,13 @@ var _ = /* @__PURE__ */ o({
 			name: o.name,
 			validators: o.validators
 		}, {
-			default: g(({ field: n, state: c }) => [S.value ? (d(), r(t, l({ key: 0 }, {
+			default: g(({ field: n }) => [S.value ? (d(), r(t, l({ key: 0 }, {
 				...e.$attrs,
 				...e.$props,
 				inputClass: b.value
 			}, {
 				field: n,
-				state: c,
+				state: n.state,
 				register: o.form.registerField,
 				label: o.label ?? m(C)(v.value),
 				meta: S.value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "4.0.0-beta.232",
+  "version": "4.0.0-beta.234",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^4.0.0-beta.66",
@@ -57,8 +57,8 @@
     "highlight.js": "^11.11.1",
     "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "4.0.0-beta.232",
-    "effect-app": "4.0.0-beta.232"
+    "@effect-app/vue": "4.0.0-beta.234",
+    "effect-app": "4.0.0-beta.234"
   },
   "scripts": {
     "check": "vue-tsc",

package/src/components/OmegaForm/InputProps.ts

@@ -43,7 +43,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     inputClass: string | undefined | null
   }
   field: OmegaFieldInternalApi<From, TName>
-  /** be sure to use this state and not `field.state` as it is not reactive */
+  /** reactive field state, sourced from `field.state` (the Field slot's own `state` prop is a stale snapshot since @tanstack/vue-form 1.32) */
   state: OmegaFieldInternalApi<From, TName>["state"]
 }
 

package/src/components/OmegaForm/OmegaArray.vue

@@ -3,10 +3,11 @@
     :is="form.Field"
     :name="name"
   >
-    <template #default="{ field, state }">
+    <!-- `field.state` is reactive; the Field slot's `state` prop is a stale snapshot since @tanstack/vue-form 1.32 -->
+    <template #default="{ field }">
       <slot
         name="pre-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <component
         :is="form.Field"
@@ -14,11 +15,11 @@
         :key="`${name}[${Number(i)}]`"
         :name="`${name}[${Number(i)}]` as DeepKeys<From>"
       >
-        <template #default="{ field: subField, state: subState }">
+        <template #default="{ field: subField }">
           <slot
             v-bind="{
               subField,
-              subState,
+              subState: subField.state,
               index: Number(i),
               field
             }"
@@ -27,7 +28,7 @@
       </component>
       <slot
         name="post-array"
-        v-bind="{ field, state }"
+        v-bind="{ field, state: field.state }"
       />
       <!-- TODO: legacy slot, remove this slot -->
       <slot

package/src/components/OmegaForm/OmegaInput.vue

@@ -4,12 +4,18 @@
     :name="name"
     :validators="validators"
   >
-    <template #default="{ field, state }">
+    <!--
+      Read `state` from `field.state`, not the Field slot's `state` prop.
+      Since @tanstack/vue-form 1.32 the slot `state` is a one-time snapshot
+      taken when the field mounts and never updates, whereas `field.state`
+      is a reactive getter backed by the field store.
+    -->
+    <template #default="{ field }">
       <OmegaInternalInput
         v-if="meta"
         v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
         :field="field as any"
-        :state="state"
+        :state="field.state"
         :register="form.registerField"
         :label="label ?? errori18n(propsName)"
         :meta="meta"