@effect-app/vue-components 4.0.0-beta.9 → 4.0.0-beta.91

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,6 +1,6 @@
 <template>
   <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field, state: inputProps.state }">
-    <div :class="$attrs.class as any">
+    <div :class="rootClass">
       <OmegaInputVuetify
         v-if="vuetified"
         v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
@@ -78,6 +78,8 @@ const attrsWithoutClass = computed(() => {
   return rest
 })
 
+const rootClass = computed(() => attrs.class as any)
+
 const id = useId()
 
 const fieldApi = props.field
@@ -163,11 +165,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,24 +3,21 @@
 
 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, Context, Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise, UnionToTuples } from "effect-app/utils"
-import * as Data from "effect/Data"
-import * as Effect from "effect/Effect"
-import * as Fiber from "effect/Fiber"
-import * as Option from "effect/Option"
-import * as Order from "effect/Order"
-import * as S from "effect/Schema"
 import { Component, computed, ComputedRef, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from "vue"
 import { useIntl } from "../../utils"
 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>[]
@@ -107,26 +104,25 @@ const eHoc = (errorProps: {
 
         const errors = computed(() => {
           // Collect errors from fieldMeta (field-level errors for registered fields)
-          const fieldErrors = Object
-            .entries(fieldMeta.value)
-            .reduce<OmegaError[]>((acc, [key, m]) => {
-              const fieldErrors = (m as { errors?: Array<{ message?: string }> } | undefined)?.errors ?? []
-              if (!fieldErrors.length) {
-                return acc
-              }
-
-              const fieldInfo = fieldMap.value.get(key)
-              if (!fieldInfo) {
-                return acc
-              }
+          const fieldErrors = Object.entries(fieldMeta.value).reduce<OmegaError[]>((acc, [key, m]) => {
+            const fieldErrors = (m as { errors?: Array<{ message?: string }> } | undefined)?.errors ?? []
+            if (!fieldErrors.length) {
+              return acc
+            }
 
-              acc.push({
-                label: fieldInfo.label,
-                inputId: fieldInfo.id,
-                errors: [fieldErrors[0]?.message].filter(Boolean) as string[]
-              })
+            const fieldInfo = fieldMap.value.get(key)
+            if (!fieldInfo) {
               return acc
-            }, [])
+            }
+
+            acc.push({
+              label: fieldInfo.label,
+              inputId: fieldInfo.id,
+              errors: [fieldErrors[0]?.message].filter(Boolean) as string[]
+            })
+
+            return acc
+          }, [])
 
           // Collect errors from errorMap.onSubmit ONLY for fields that are NOT registered
           // (registered fields already have their errors in fieldMeta)
@@ -401,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..
@@ -674,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>,
@@ -686,8 +684,9 @@ 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.decodeEffect(schema)
+  const formCompatibleSchema = toFormSchema(schema)
+  const standardSchema = S.toStandardSchemaV1(formCompatibleSchema)
+  const decode = S.decodeUnknownEffect(formCompatibleSchema)
 
   const { meta, unionMeta } = generateMetaFromSchema(schema)
 
@@ -796,17 +795,20 @@ 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,
             value: parsedValue
           })
           if (Fiber.isFiber(r)) {
-            return await runtimeFiberAsPromise(r as any)
+            return await runtimeFiberAsPromise(r)
           }
           if (Effect.isEffect(r)) {
-            return await Effect.runPromise(r)
+            const effectResult = await runPromise(r)
+            return Fiber.isFiber(effectResult)
+              ? await runtimeFiberAsPromise(effectResult)
+              : effectResult
           }
           return r
         })
@@ -836,11 +838,12 @@ export const useOmegaForm = <
 
   const persistFilter = (persistency: OmegaConfig<From>["persistency"]) => {
     if (!persistency) return
-    if (Array.isArray(persistency.keys)) {
-      return createNestedObjectFromPaths(persistency.keys)
+    const { banKeys, keys } = persistency
+    if (Array.isArray(keys)) {
+      return createNestedObjectFromPaths(keys as string[])
     }
-    if (Array.isArray(persistency.banKeys)) {
-      const subs = Object.keys(meta).filter((metakey) => persistency.banKeys?.includes(metakey as any))
+    if (Array.isArray(banKeys)) {
+      const subs = Object.keys(meta).filter((metakey) => banKeys.includes(metakey as any))
       return createNestedObjectFromPaths(subs)
     }
     return form.store.state.values
@@ -939,7 +942,7 @@ export const useOmegaForm = <
       ? handleSubmitEffect_(options?.meta).pipe(Effect.flatMap(Effect.fnUntraced(function*() {
         const errors = form.getAllErrors()
         if (Object.keys(errors.fields).length || errors.form.errors.length) {
-          return yield* new FormErrors({ form: errors.form, fields: errors.fields })
+          return yield* Effect.fail(new FormErrors({ form: errors.form, fields: errors.fields }))
         }
       })))
       : handleSubmitEffect_(options?.meta)
@@ -976,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 { type S } from "effect-app"
+import { S } from "effect-app"
 import { inject, type InjectionKey, provide } from "vue"
 
 export const useIntlKey = Symbol() as InjectionKey<
@@ -18,15 +18,11 @@ export const provideIntl = (
 
 /**
  * Recursively extracts the source AST from a transformation chain.
- * In v4, transformations are stored in the `encoding` property, not as wrapped AST nodes.
- * This function returns the encoded form if an encoding chain exists, otherwise returns the AST itself.
+ * 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 (the decoded/type form, which is the AST itself in v4)
+ * @returns The source AST at the end of the transformation chain
  */
 export function getTransformationFrom(ast: S.AST.AST) {
-  // In v4, the AST itself is the decoded (type) form
-  // The encoding chain points to the encoded (wire) form via ast.encoding
-  // For most metadata extraction purposes, we want the decoded form, so just return the ast
-  return ast
+  return S.AST.toType(ast)
 }

package/dist/vue-components.es10.js

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

package/dist/vue-components.es100.js

@@ -1,4 +0,0 @@
-var o = typeof globalThis == "object" ? globalThis : typeof self == "object" ? self : typeof window == "object" ? window : typeof global == "object" ? global : {};
-export {
-  o as _globalThis
-};

package/dist/vue-components.es11.js

@@ -1,32 +0,0 @@
-import l from "./vue-components.es34.js";
-import { inject as c, provide as u } from "vue";
-import { onMountedWithCleanup as f } from "./vue-components.es35.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
-};