@effect-app/vue-components 4.0.0-beta.15 → 4.0.0-beta.151

package/src/components/OmegaForm/OmegaInput.vue

@@ -4,7 +4,8 @@
     :key="fieldKey"
     :name="name"
     :validators="{
-      onChange: schema,
+      //     onChange: schema,
+      onBlur: schema,
       ...validators
     }"
   >
@@ -97,12 +98,45 @@ const fieldKey = computed(() => {
 // Call useIntl during setup to avoid issues when computed re-evaluates
 const { trans } = useIntl()
 
+const hasIssues = (result: any): boolean => Array.isArray(result?.issues) && result.issues.length > 0
+
+const composeStandardSchemas = (
+  omegaSchema: any,
+  originalSchema: any
+) => ({
+  "~standard": {
+    ...omegaSchema["~standard"],
+    validate: (value: unknown) => {
+      const omegaResult = omegaSchema["~standard"].validate(value)
+      if (omegaResult && typeof omegaResult.then === "function") {
+        return omegaResult.then((resolved: any) => {
+          if (hasIssues(resolved)) {
+            return resolved
+          }
+          return originalSchema["~standard"].validate(value)
+        })
+      }
+
+      if (hasIssues(omegaResult)) {
+        return omegaResult
+      }
+
+      return originalSchema["~standard"].validate(value)
+    }
+  }
+})
+
 const schema = computed(() => {
   if (!meta.value) {
     console.log(props.name, Object.keys(props.form.meta), props.form.meta)
     throw new Error("Meta is undefined")
   }
-  return generateInputStandardSchemaFromFieldMeta(meta.value, trans)
+  const omegaSchema = generateInputStandardSchemaFromFieldMeta(meta.value, trans)
+  const fieldSchema = meta.value.originalSchema
+  if (fieldSchema) {
+    return composeStandardSchemas(omegaSchema, fieldSchema)
+  }
+  return omegaSchema
 })
 
 const errori18n = useErrorLabel(props.form)

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     class="omega-input"
-    @focusout="$emit('blur', $event)"
+    @focusout="(e) => {
+      $emit('blur', e)
+      field.handleBlur()
+    }"
     @focusin="$emit('focus', $event)"
   >
     <component

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -119,6 +119,7 @@ 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) => {
+  let fieldDeleted = false
   if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
     // Only convert to null/undefined if the field is actually nullable or optional
     if (props.meta?.nullableOrUndefined) {
@@ -128,6 +129,14 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           : null as any
       )
+    } else if (props.meta?.isOptionalKey) {
+      // `S.optionalKey` expects the key to be ABSENT from the submitted
+      // object, not present-with-undefined. Remove it from form state
+      // rather than setting it to `undefined`. Note: this is distinct
+      // from `required: false`, which may also just mean "empty string
+      // is valid" for unconstrained `S.String` fields.
+      props.field.form.deleteField(props.field.name)
+      fieldDeleted = true
     } else {
       // Keep the actual value (e.g., empty string for S.String fields)
       props.field.handleChange(value)
@@ -138,7 +147,10 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
 
   // whenever we change the field, regardless if we set it to null, we should reset onSubmit.
   // not sure why this is not the case in tanstack form.
-  props.field.setMeta((m) => ({ ...m, errorMap: { ...m.errorMap, onSubmit: undefined } }))
+  // Skip when the field was deleted — its meta no longer exists in the form store.
+  if (!fieldDeleted) {
+    props.field.setMeta((m) => ({ ...m, errorMap: { ...m.errorMap, onSubmit: undefined } }))
+  }
 }
 
 // Note: Default value normalization (converting empty strings to null/undefined for nullable fields)
@@ -165,11 +177,13 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     minLength: props.meta?.type === "string" && props.meta?.minLength,
     maxLength: props.meta?.type === "string" && props.meta?.maxLength,
     max: (props.meta?.type === "number")
-      && (props.meta?.maximum
-        ?? (typeof props.meta?.exclusiveMaximum === "number" && props.meta.exclusiveMaximum - 1)),
+      ? (props.meta?.maximum
+        ?? (typeof props.meta?.exclusiveMaximum === "number" ? props.meta.exclusiveMaximum - 1 : undefined))
+      : undefined,
     min: (props.meta?.type === "number")
-      && (props.meta?.minimum
-        ?? (typeof props.meta?.exclusiveMinimum === "number" && props.meta.exclusiveMinimum + 1)),
+      ? (props.meta?.minimum
+        ?? (typeof props.meta?.exclusiveMinimum === "number" ? props.meta.exclusiveMinimum + 1 : undefined))
+      : undefined,
     errorMessages: errors.value,
     error: !!errors.value.length,
     type: fieldType.value,

package/src/components/OmegaForm/useOmegaForm.ts

@@ -3,7 +3,7 @@
 
 import * as api from "@opentelemetry/api"
 import { type DeepKeys, DeepValue, type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, StandardSchemaV1Issue, useForm, ValidationError, ValidationErrorMap } from "@tanstack/vue-form"
-import { Array, Data, Effect, Fiber, Option, Order, S } from "effect-app"
+import { Array, Context, Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise, UnionToTuples } from "effect-app/utils"
 import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from "vue"
 import { useIntl } from "../../utils"
@@ -11,11 +11,13 @@ import { MergedInputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
 import OmegaAutoGen from "./OmegaAutoGen.vue"
 import OmegaErrorsInternal from "./OmegaErrorsInternal.vue"
-import { BaseProps, deepMerge, defaultsValueFromSchema, DefaultTypeProps, FieldPath, type FormProps, generateMetaFromSchema, type MetaRecord, type NestedKeyOf, OmegaArrayProps, OmegaAutoGenMeta, OmegaError, type OmegaFormApi, OmegaFormState } from "./OmegaFormStuff"
+import { BaseProps, deepMerge, defaultsValueFromSchema, DefaultTypeProps, FieldPath, type FormProps, generateMetaFromSchema, type MetaRecord, type NestedKeyOf, OmegaArrayProps, OmegaAutoGenMeta, OmegaError, type OmegaFormApi, OmegaFormState, toFormSchema } from "./OmegaFormStuff"
 import OmegaInput from "./OmegaInput.vue"
 import OmegaTaggedUnion from "./OmegaTaggedUnion.vue"
 import OmegaForm from "./OmegaWrapper.vue"
 
+import { makeRunPromise } from "@effect-app/vue/runtime"
+
 type keysRule<T> =
   | {
     keys?: NestedKeyOf<T>[]
@@ -395,7 +397,7 @@ export interface OmegaFormReturn<
 > extends OF<From, To> {
   // Pre-computed type aliases - computed ONCE for performance
   _paths: FieldPath<From>
-  _keys: DeepKeys<From>
+  _keys: NestedKeyOf<From>
   _schema: S.Codec<To, From, never>
 
   // this crazy thing here is copied from the OmegaFormInput.vue.d.ts, with `From` removed as Generic, instead closed over from the From generic above..
@@ -668,6 +670,8 @@ export interface OmegaFormReturn<
   }
 }
 
+const runPromise = makeRunPromise(Context.empty())
+
 export const useOmegaForm = <
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   From extends Record<PropertyKey, any>,
@@ -680,10 +684,11 @@ export const useOmegaForm = <
   omegaConfig?: OmegaConfig<To>
 ): OmegaFormReturn<From, To, TypeProps> => {
   if (!schema) throw new Error("Schema is required")
-  const standardSchema = S.toStandardSchemaV1(schema)
-  const decode = S.decodeUnknownEffect(schema)
+  const formCompatibleSchema = toFormSchema(schema)
+  const standardSchema = S.toStandardSchemaV1(formCompatibleSchema)
+  const decode = S.decodeUnknownEffect(formCompatibleSchema)
 
-  const { meta, unionMeta } = generateMetaFromSchema(schema)
+  const { meta, unionMeta } = generateMetaFromSchema(formCompatibleSchema)
 
   const persistencyKey = computed(() => {
     if (omegaConfig?.persistency?.id) {
@@ -790,7 +795,7 @@ export const useOmegaForm = <
       ? ({ formApi, meta, value }) =>
         wrapWithSpan(meta?.currentSpan, async () => {
           // validators only validate, they don't actually transform, so we have to do that manually here.
-          const parsedValue = await Effect.runPromise(decode(value))
+          const parsedValue = await runPromise(decode(value))
           const r = tanstackFormOptions.onSubmit!({
             formApi: formApi as OmegaFormApi<From, To>,
             meta,
@@ -800,7 +805,7 @@ export const useOmegaForm = <
             return await runtimeFiberAsPromise(r)
           }
           if (Effect.isEffect(r)) {
-            const effectResult = await Effect.runPromise(r)
+            const effectResult = await runPromise(r)
             return Fiber.isFiber(effectResult)
               ? await runtimeFiberAsPromise(effectResult)
               : effectResult
@@ -974,6 +979,24 @@ export const useOmegaForm = <
     }
   })
 
+  // Clear all field onSubmit errors when any value changes after a failed submission.
+  // Form-level onSubmit validation (e.g. union schemas) distributes errors to individual fields.
+  // TanStack only clears the changed field's onSubmit error, leaving sibling fields with stale
+  // errors that keep isFieldsValid=false and block re-submission.
+  const lastSubmitAttempts = ref(0)
+  const submissionAttempts = form.useStore((s) => s.submissionAttempts)
+  const formValues = form.useStore((s) => s.values)
+  watch(formValues, () => {
+    if (lastSubmitAttempts.value === submissionAttempts.value) return
+    lastSubmitAttempts.value = submissionAttempts.value
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    for (const info of Object.values(form.fieldInfo) as any[]) {
+      if (info?.instance?.state.meta.errorMap?.onSubmit) {
+        info.instance.setMeta((prev: any) => ({ ...prev, errorMap: { ...prev.errorMap, onSubmit: undefined } }))
+      }
+    }
+  }, { deep: true })
+
   const errorContext = { form: formWithExtras, fieldMap }
 
   return Object.assign(formWithExtras, {

package/src/reset.css

@@ -0,0 +1,52 @@
+/*
+ * Supplemental CSS reset for Vuetify 4.
+ * Vuetify 4 removed the aggressive global reset that v3 included.
+ * Import this file to restore equivalent behavior:
+ *   import '@effect-app/vue-components/reset.css'
+ */
+@layer vuetify-reset {
+  body {
+    margin: 0;
+  }
+
+  ul,
+  ol {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  input,
+  textarea,
+  select {
+    border: 0;
+    background: transparent;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+
+  figure,
+  details,
+  summary {
+    margin: 0;
+    padding: 0;
+  }
+}

package/src/utils/index.ts

@@ -1,5 +1,5 @@
 import { type makeIntl } from "@effect-app/vue"
-import { S } from "effect-app"
+import type { S } from "effect-app"
 import { inject, type InjectionKey, provide } from "vue"
 
 export const useIntlKey = Symbol() as InjectionKey<
@@ -17,12 +17,15 @@ export const provideIntl = (
 ) => provide(useIntlKey, intl)
 
 /**
- * Recursively extracts the source AST from a transformation chain.
- * If the provided AST is a transformation, it follows the chain to find the original source AST.
- *
- * @param ast - The AST node to extract the transformation source from
- * @returns The source AST at the end of the transformation chain
+ * Walks the encoding chain of the given AST node to its source (encoded)
+ * side. Shallow — does not recurse into children, so inner prop-level
+ * transformations (e.g. `FiniteFromString`) keep their decoded shape
+ * while struct-level `decodeTo` transformations are unwrapped to their
+ * input side (e.g. `NonNegativeInt` rather than the decoded `PositiveInt`).
  */
 export function getTransformationFrom(ast: S.AST.AST) {
-  return S.AST.toType(ast)
+  while (ast.encoding) {
+    ast = ast.encoding[0].to
+  }
+  return ast
 }

package/dist/vue-components.es10.js

@@ -1,239 +0,0 @@
-import { useForm as K } from "@tanstack/vue-form";
-import { Data as T, S as I, Effect as m, Fiber as V, Option as z, Array as P } from "effect-app";
-import { runtimeFiberAsPromise as W } from "./vue-components.es18.js";
-import { computed as $, onUnmounted as D, onMounted as G, onBeforeUnmount as Z, watch as R, ref as Q, h as J } from "vue";
-import { useIntl as X } from "./vue-components.es3.js";
-import Y from "./vue-components.es19.js";
-import C from "./vue-components.es20.js";
-import ee from "./vue-components.es21.js";
-import { generateMetaFromSchema as re, deepMerge as N, defaultsValueFromSchema as te } from "./vue-components.es12.js";
-import se from "./vue-components.es6.js";
-import ne from "./vue-components.es8.js";
-import oe from "./vue-components.es22.js";
-import { trace as H } from "./vue-components.es23.js";
-import { context as _ } from "./vue-components.es24.js";
-class ie extends T.TaggedError("FormErrors") {
-}
-const M = (a) => function(s) {
-  return {
-    render() {
-      return J(s, {
-        form: a,
-        ...this.$attrs
-      }, this.$slots);
-    }
-  };
-}, ae = (a) => {
-  const { formatMessage: l } = X(), s = (c) => c.replace(/([A-Z])/g, " $1").replace(/^./, (F) => F.toUpperCase()).trim(), p = (c) => l ? l({ id: `general.fields.${c}`, defaultMessage: s(c) }) : s(c);
-  return (c) => a.i18nNamespace ? l({ id: `${a.i18nNamespace}.fields.${c}`, defaultMessage: p(c) }) : p(c);
-}, ce = (a) => function(s) {
-  return {
-    setup() {
-      const { fieldMap: p, form: v } = a, c = v.useStore((S) => S.errors), F = v.useStore((S) => S.fieldMeta), h = v.useStore((S) => S.errorMap), A = ae(v), L = $(() => {
-        const S = Object.entries(F.value).reduce((y, [w, g]) => {
-          const u = g?.errors ?? [];
-          if (!u.length)
-            return y;
-          const d = p.value.get(w);
-          return d && y.push({
-            label: d.label,
-            inputId: d.id,
-            errors: [u[0]?.message].filter(Boolean)
-          }), y;
-        }, []), o = [];
-        if (h.value.onSubmit) {
-          for (const [y, w] of Object.entries(h.value.onSubmit))
-            if (P.isArray(w) && w.length)
-              for (const g of w) {
-                const u = g;
-                if (u?.path && P.isArray(u.path) && u.path.length) {
-                  const d = u.path.join(".");
-                  if (!p.value.has(d)) {
-                    o.push({
-                      label: A(d),
-                      inputId: d,
-                      errors: [u.message].filter(Boolean)
-                    });
-                    break;
-                  }
-                }
-              }
-        }
-        return [...S, ...o];
-      });
-      return {
-        generalErrors: c,
-        errors: L
-      };
-    },
-    render({ errors: p, generalErrors: v }) {
-      return J(s, {
-        errors: p,
-        generalErrors: v,
-        ...this.$attrs
-      }, this.$slots);
-    }
-  };
-}, b = (a, l) => a.includes(l), Fe = (a, l, s) => {
-  if (!a) throw new Error("Schema is required");
-  const p = I.toStandardSchemaV1(a), v = I.decodeUnknownEffect(a), { meta: c, unionMeta: F } = re(a), h = $(() => {
-    if (s?.persistency?.id)
-      return s.persistency.id;
-    const e = window.location.pathname, r = Object.keys(c);
-    return `${e}-${r.join("-")}`;
-  }), A = () => {
-    const e = new URLSearchParams(window.location.search);
-    e.delete(h.value);
-    const r = new URL(window.location.href);
-    r.search = e.toString(), window.history.replaceState({}, "", r.toString());
-  }, L = $(() => {
-    let e;
-    const r = s?.persistency;
-    if (
-      // query string has higher priority than local/session storage
-      r?.policies && !e && (b(r.policies, "local") || b(r.policies, "session"))
-    ) {
-      const n = b(r.policies, "local") ? localStorage : sessionStorage;
-      if (n)
-        try {
-          const t = JSON.parse(
-            n.getItem(h.value) || "{}"
-          );
-          n.removeItem(h.value), e = t;
-        } catch (t) {
-          console.error(t);
-        }
-    }
-    if (r?.policies && b(r.policies, "querystring"))
-      try {
-        const t = new URLSearchParams(window.location.search).get(h.value);
-        A(), t && (e = N(e || {}, JSON.parse(t)));
-      } catch (n) {
-        console.error(n);
-      }
-    e ??= {};
-    const i = {
-      tanstack: l?.defaultValues || {},
-      persistency: e,
-      schema: te(a)
-    };
-    return (s?.defaultValuesPriority || ["tanstack", "persistency", "schema"]).reverse().reduce(
-      (n, t) => Object.keys(n).length ? N(n, i[t]) : i[t],
-      {}
-    );
-  }), S = (e, r) => e ? _.with(H.setSpan(_.active(), e), r) : r(), o = K({
-    ...l,
-    validators: {
-      onSubmit: p,
-      ...l?.validators || {}
-    },
-    onSubmit: l?.onSubmit ? ({ formApi: e, meta: r, value: i }) => S(r?.currentSpan, async () => {
-      const n = await m.runPromise(v(i)), t = l.onSubmit({
-        formApi: e,
-        meta: r,
-        value: n
-      });
-      if (V.isFiber(t))
-        return await W(t);
-      if (m.isEffect(t)) {
-        const f = await m.runPromise(t);
-        return V.isFiber(f) ? await W(f) : f;
-      }
-      return t;
-    }) : void 0,
-    defaultValues: L.value
-  }), y = () => {
-    Object.keys(c).forEach((e) => {
-      o.setFieldValue(e, void 0);
-    });
-  }, w = (e) => e.reduce((r, i) => {
-    const n = i.split(".");
-    return n.reduce((t, f, U) => (U === n.length - 1 ? t[f] = o.getFieldValue(i) : t[f] = t[f] ?? {}, t[f]), r), r;
-  }, {}), g = (e) => {
-    if (!e) return;
-    const { banKeys: r, keys: i } = e;
-    if (P.isArray(i))
-      return w(i);
-    if (P.isArray(r)) {
-      const n = Object.keys(c).filter((t) => r.includes(t));
-      return w(n);
-    }
-    return o.store.state.values;
-  }, u = () => {
-    const e = s?.persistency;
-    if (!(!e?.policies || e.policies.length === 0) && (b(e.policies, "local") || b(e.policies, "session"))) {
-      const r = b(e.policies, "local") ? localStorage : sessionStorage;
-      if (!r) return;
-      const i = g(e);
-      return r.setItem(h.value, JSON.stringify(i));
-    }
-  }, d = () => {
-    const e = s?.persistency;
-    if (!(!e?.policies || e.policies.length === 0) && b(e.policies, "querystring")) {
-      const r = g(e), i = new URLSearchParams(window.location.search);
-      i.set(h.value, JSON.stringify(r));
-      const n = new URL(window.location.href);
-      n.search = i.toString(), window.history.replaceState({}, "", n.toString());
-    }
-  }, j = (e) => {
-    o.store.state.isDirty && e.preventDefault();
-  };
-  if (D(u), G(() => {
-    window.addEventListener("beforeunload", u), window.addEventListener("blur", d), s?.preventWindowExit && s.preventWindowExit !== "nope" && window.addEventListener("beforeunload", j);
-  }), Z(() => {
-    window.removeEventListener("beforeunload", u), window.removeEventListener("blur", d), s?.preventWindowExit && s.preventWindowExit !== "nope" && window.removeEventListener("beforeunload", j);
-  }), s?.preventWindowExit === "prevent-and-reset") {
-    const e = o.useStore((t) => t.isSubmitting), r = o.useStore((t) => t.submissionAttempts), i = o.useStore((t) => t.canSubmit), n = o.useStore((t) => t.values);
-    R([e, r], ([t, f], [U]) => {
-      U && !t && f > 0 && i.value && o.reset(n.value);
-    });
-  }
-  const x = (e) => m.currentSpan.pipe(
-    m.option,
-    m.flatMap(
-      (r) => m.promise(() => o.handleSubmit(z.isSome(r) ? { currentSpan: r.value, ...e } : e))
-    )
-  ), q = (e) => e?.checkErrors ? x(e?.meta).pipe(m.flatMap(m.fnUntraced(function* () {
-    const r = o.getAllErrors();
-    if (Object.keys(r.fields).length || r.form.errors.length)
-      return yield* m.fail(new ie({ form: r.form, fields: r.fields }));
-  }))) : x(e?.meta), B = o.handleSubmit, O = Q(/* @__PURE__ */ new Map()), E = Object.assign(o, {
-    i18nNamespace: s?.i18nNamespace,
-    ignorePreventCloseEvents: s?.ignorePreventCloseEvents,
-    meta: c,
-    unionMeta: F,
-    clear: y,
-    handleSubmit: (e) => {
-      const r = H.getSpan(_.active());
-      return B({ currentSpan: r, ...e });
-    },
-    // /** @experimental */
-    handleSubmitEffect: q,
-    registerField: (e) => {
-      R(e, (r) => {
-        O.value.set(r.name, { label: r.label, id: r.id });
-      }, { immediate: !0 }), D(() => {
-        O.value.get(e.value.name)?.id === e.value.id && O.value.delete(e.value.name);
-      });
-    }
-  }), k = { form: E, fieldMap: O };
-  return Object.assign(E, {
-    // Type-level properties for performance optimization (not used at runtime)
-    _paths: void 0,
-    _keys: void 0,
-    _schema: a,
-    errorContext: k,
-    Form: M(E)(oe),
-    Input: M(E)(s?.input ?? se),
-    TaggedUnion: M(E)(ne),
-    Field: o.Field,
-    Errors: ce(k)(ee),
-    Array: M(E)(Y),
-    AutoGen: M(E)(C)
-  });
-};
-export {
-  ie as FormErrors,
-  ae as useErrorLabel,
-  Fe as useOmegaForm
-};

package/dist/vue-components.es11.js

@@ -1,32 +0,0 @@
-import l from "./vue-components.es29.js";
-import { inject as c, provide as u } from "vue";
-import { onMountedWithCleanup as f } from "./vue-components.es16.js";
-const p = () => l(), i = /* @__PURE__ */ Symbol("DialogBus"), r = () => c(i, null), g = () => {
-  const n = p();
-  return u(i, n), n;
-}, d = (n) => {
-  const o = r();
-  if (!o)
-    return;
-  const s = n();
-  f(() => {
-    const e = (t) => {
-      s.value && (confirm("Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?") || (t.prevent = !0));
-    };
-    return o.on("dialog-closing", e), () => o.off("dialog-closing", e);
-  });
-}, h = (n) => {
-  let o = r();
-  return o || (o = g()), () => {
-    const e = {};
-    o.emit("dialog-closing", e), e.prevent ? typeof e.prevent == "object" && "then" in e.prevent && e.prevent.then((t) => {
-      t !== !1 && n();
-    }) : n();
-  };
-};
-export {
-  r as injectBus,
-  g as provideBus,
-  h as useOnClose,
-  d as usePreventClose
-};