@effect-app/vue-components 2.0.0 → 2.1.0

package/dist/vue-components.es61.js

@@ -0,0 +1,46 @@
+import { VERSION as d } from "./vue-components.es60.js";
+var h = /^(\d+)\.(\d+)\.(\d+)(-(.+))?$/;
+function s(c) {
+  var m = /* @__PURE__ */ new Set([c]), f = /* @__PURE__ */ new Set(), t = c.match(h);
+  if (!t)
+    return function() {
+      return !1;
+    };
+  var e = {
+    major: +t[1],
+    minor: +t[2],
+    patch: +t[3],
+    prerelease: t[4]
+  };
+  if (e.prerelease != null)
+    return function(r) {
+      return r === c;
+    };
+  function a(n) {
+    return f.add(n), !1;
+  }
+  function p(n) {
+    return m.add(n), !0;
+  }
+  return function(r) {
+    if (m.has(r))
+      return !0;
+    if (f.has(r))
+      return !1;
+    var i = r.match(h);
+    if (!i)
+      return a(r);
+    var u = {
+      major: +i[1],
+      minor: +i[2],
+      patch: +i[3],
+      prerelease: i[4]
+    };
+    return u.prerelease != null || e.major !== u.major ? a(r) : e.major === 0 ? e.minor === u.minor && e.patch <= u.patch ? p(r) : a(r) : e.minor <= u.minor ? p(r) : a(r);
+  };
+}
+var v = s(d);
+export {
+  s as _makeCompatibilityCheck,
+  v as isCompatible
+};

package/dist/vue-components.es62.js

@@ -0,0 +1,4 @@
+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.es7.js

@@ -1,7 +1,7 @@
 (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 C, computed as n, getCurrentInstance as x, useId as _, onMounted as P, renderSlot as M, normalizeProps as m, guardReactiveProps as N, createElementVNode as $, normalizeClass as q, createBlock as B, createCommentVNode as V, unref as k, openBlock as I, mergeProps as L } from "vue";
-import { useStore as S } from "@tanstack/vue-form";
-import w from "./vue-components.es26.js";
+import { defineComponent as C, computed as a, getCurrentInstance as x, useId as V, onMounted as _, renderSlot as P, normalizeProps as m, guardReactiveProps as M, createElementVNode as N, normalizeClass as $, createBlock as q, createCommentVNode as B, unref as O, openBlock as k, mergeProps as I } from "vue";
+import { useStore as L } from "@tanstack/vue-form";
+import S from "./vue-components.es30.js";
 
 const E = /* @__PURE__ */ C({
   inheritAttrs: !1,
@@ -18,53 +18,54 @@ const E = /* @__PURE__ */ C({
     options: { default: void 0 }
   },
   setup(d) {
-    const e = d, l = n(() => e.required ?? e?.meta?.required), p = x()?.appContext.components.VTextField, s = _(), o = e.field, i = S(o.store, (t) => t), f = 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 c = n(() => i.value.value), g = n(() => i.value.meta.errors ?? []), u = n(
+    const e = d, i = a(() => e.required ?? e?.meta?.required), f = x()?.appContext.components.VTextField, o = V(), r = e.field, s = L(r.store, (t) => t), p = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
+    e.register(a(() => ({ name: e.field.name, label: e.label, id: o })));
+    const c = a(() => s.value.value), g = a(() => s.value.meta.errors ?? []), u = a(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         g.value.map((t) => t?.message).filter(Boolean)
       )
     ), v = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), y = (t) => {
-      v(t) && e.meta?.type !== "boolean" ? e.field.handleChange(
-        e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
-      ) : e.field.handleChange(t), e.field.setMeta((r) => ({ ...r, errorMap: { ...r.errorMap, onSubmit: void 0 } }));
+      v(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
+        e.meta.nullableOrUndefined === "undefined" ? void 0 : null
+      ) : e.field.handleChange(t), e.field.setMeta((n) => ({ ...n, errorMap: { ...n.errorMap, onSubmit: void 0 } }));
     };
-    P(() => {
-      if (!c.value && !l.value && e.meta?.nullableOrUndefined === "null") {
-        const t = i.value.meta.isDirty;
-        o.setValue(null), o.setMeta((r) => ({ ...r, isDirty: t }));
+    _(() => {
+      if (c.value === void 0) {
+        const t = s.value.meta.isDirty;
+        if (r.setMeta((n) => ({ ...n, isDirty: t })), i.value) return;
+        e.meta?.nullableOrUndefined === "null" ? r.setValue(null) : e.meta?.nullableOrUndefined === "undefined" ? r.setValue(void 0) : e.meta?.type === "string" ? r.setValue("") : e.meta?.type === "number" || e.meta?.type === "boolean" && r.setValue(!1);
       }
     });
     const h = (t) => {
-      const r = {
-        get(R, b, z) {
+      const n = {
+        get(F, b, R) {
           return b === "handleChange" ? y : Reflect.get(...arguments);
         }
       };
-      return new Proxy(t, r);
-    }, a = n(() => ({
+      return new Proxy(t, n);
+    }, l = a(() => ({
       inputProps: {
-        id: s,
-        required: l.value,
+        id: o,
+        required: i.value,
         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: u.value,
         error: !!u.value.length,
-        type: f.value,
-        label: `${e.label}${l.value ? " *" : ""}`,
+        type: p.value,
+        label: `${e.label}${i.value ? " *" : ""}`,
         options: e.options
       },
       state: e.state,
       field: h(e.field)
     }));
-    return (t, r) => M(t.$slots, "default", m(N({ ...a.value.inputProps, field: a.value.field, state: a.value.state })), () => [
-      $("div", {
-        class: q(t.$attrs.class)
+    return (t, n) => P(t.$slots, "default", m(M({ ...l.value.inputProps, field: l.value.field, state: l.value.state })), () => [
+      N("div", {
+        class: $(t.$attrs.class)
       }, [
-        k(p) ? (I(), B(w, m(L({ key: 0 }, { ...t.$attrs, ...a.value })), null, 16)) : V("", !0)
+        O(f) ? (k(), q(S, m(I({ key: 0 }, { ...t.$attrs, ...l.value })), null, 16)) : B("", !0)
       ], 2)
     ]);
   }

package/dist/vue-components.es8.js

@@ -1,201 +1,54 @@
-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.es14.js";
-import { isObject as G } from "./vue-components.es15.js";
-import { computed as j, onUnmounted as N, onMounted as T, onBeforeUnmount as W, ref as k, watch as z, h as R } from "vue";
-import Q from "./vue-components.es16.js";
-import X from "./vue-components.es17.js";
-import Y from "./vue-components.es18.js";
-import { generateMetaFromSchema as Z } from "./vue-components.es10.js";
-import C from "./vue-components.es6.js";
-import ee from "./vue-components.es19.js";
-import { trace as _ } from "./vue-components.es20.js";
-import { context as V } from "./vue-components.es21.js";
-class re extends K.TaggedError("FormErrors") {
-}
-const w = (c) => function(n) {
-  return {
-    render() {
-      return R(n, {
-        form: c,
-        ...this.$attrs
-      }, this.$slots);
-    }
-  };
-}, te = (c) => function(n) {
-  return {
-    setup() {
-      const { fieldMap: f, form: m } = c, p = m.useStore((a) => a.errors), u = m.useStore((a) => a.fieldMeta), b = j(
-        () => P.filterMap(
-          Object.entries(u.value),
-          ([a, v]) => (v.errors ?? []).length && f.value.get(a)?.id ? M.some({
-            label: f.value.get(a).label,
-            inputId: f.value.get(a).id,
-            errors: (v.errors ?? []).map((y) => y.message).filter(Boolean)
-          }) : M.none()
-        )
-      );
-      return {
-        generalErrors: p,
-        errors: b
-      };
-    },
-    render({ errors: f, generalErrors: m }) {
-      return R(n, {
-        errors: f,
-        generalErrors: m,
-        ...this.$attrs
-      }, this.$slots);
-    }
-  };
-}, Se = (c, i, n) => {
-  if (!c) throw new Error("Schema is required");
-  const f = I.standardSchemaV1(c), m = I.decode(c), { meta: p } = Z(c), u = j(() => {
-    if (n?.persistency?.id)
-      return n.persistency.id;
-    const e = window.location.pathname, r = Object.keys(p);
-    return `${e}-${r.join("-")}`;
-  }), b = () => {
-    const e = new URLSearchParams(window.location.search);
-    e.delete(u.value);
-    const r = new URL(window.location.href);
-    r.search = e.toString(), window.history.replaceState({}, "", r.toString());
-  };
-  function a(e, r) {
-    for (const t in r)
-      r[t] && G(r[t]) ? (e[t] || (e[t] = {}), a(e[t], r[t])) : e[t] = r[t];
-    return e;
-  }
-  const v = j(() => {
-    if (i?.defaultValues && !n?.persistency?.overrideDefaultValues)
-      return i?.defaultValues;
-    let e;
-    const r = n?.persistency;
-    if (!r?.policies || r.policies.length === 0) return {};
-    if (r.policies.includes("querystring"))
-      try {
-        const s = new URLSearchParams(window.location.search).get(u.value);
-        b(), s && (e = JSON.parse(s));
-      } catch (t) {
-        console.error(t);
-      }
-    if (
-      // query string has higher priority than local/session storage
-      !e && (r.policies.includes("local") || r.policies.includes("session"))
-    ) {
-      const t = r.policies.includes("local") ? localStorage : sessionStorage;
-      if (t)
-        try {
-          const s = JSON.parse(
-            t.getItem(u.value) || "{}"
-          );
-          t.removeItem(u.value), e = s;
-        } catch (s) {
-          console.error(s);
+import { defineComponent as d, onMounted as c, createElementBlock as p, openBlock as g, Fragment as v, createVNode as m, unref as i, withCtx as u, renderSlot as f, createCommentVNode as V, createSlots as b, renderList as y, normalizeProps as F, guardReactiveProps as $ } from "vue";
+import k from "./vue-components.es9.js";
+const B = /* @__PURE__ */ d({
+  __name: "OmegaTaggedUnion",
+  props: {
+    name: {},
+    form: {},
+    type: {},
+    options: {},
+    label: {}
+  },
+  setup(n) {
+    const e = n;
+    return c(() => {
+      const t = e.form.getFieldValue(e.name), o = e.form.meta[e.name];
+      if (t === void 0)
+        if (o?.nullableOrUndefined === "null" || !o?.required)
+          e.form.setFieldValue(e.name, null);
+        else {
+          const a = e.options.find((l) => l.value !== null);
+          a && a.value && e.form.setFieldValue(e.name, {
+            _tag: a.value
+          });
         }
-    }
-    if (e ??= {}, i?.defaultValues == null)
-      return e;
-    {
-      const t = i?.defaultValues;
-      return a(t, e);
-    }
-  }), y = (e, r) => e ? V.with(_.setSpan(V.active(), e), r) : r(), d = q({
-    ...i,
-    validators: {
-      onSubmit: f,
-      ...i?.validators || {}
-    },
-    onSubmit: i?.onSubmit ? ({ formApi: e, meta: r, value: t }) => y(r?.currentSpan, async () => {
-      const s = await l.runPromise(m(t)), o = i.onSubmit({
-        formApi: e,
-        meta: r,
-        value: s
-      });
-      return F.isFiber(o) && F.isRuntimeFiber(o) ? await B(o) : l.isEffect(o) ? await l.runPromise(
-        o.pipe(
-          // meta?.currentSpan
-          //   ? Effect.withParentSpan(meta.currentSpan)
-          //   : (_) => _,
-          l.flatMap((S) => F.join(S))
-        )
-      ) : o;
-    }) : void 0,
-    defaultValues: v.value
-  }), x = () => {
-    Object.keys(p).forEach((e) => {
-      d.setFieldValue(e, void 0);
-    });
-  }, O = (e) => e.reduce((r, t) => {
-    const s = t.split(".");
-    return s.reduce((o, S, J) => (J === s.length - 1 ? o[S] = d.getFieldValue(t) : o[S] = o[S] ?? {}, o[S]), r), r;
-  }, {}), U = (e) => {
-    if (e) {
-      if (P.isArray(e.keys))
-        return O(e.keys);
-      if (P.isArray(e.banKeys)) {
-        const r = Object.keys(p).filter((t) => e.banKeys?.includes(t));
-        return O(r);
-      }
-      return d.store.state.values;
-    }
-  }, g = () => {
-    const e = n?.persistency;
-    if (!(!e?.policies || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
-      const r = e.policies.includes("local") ? localStorage : sessionStorage;
-      if (!r) return;
-      const t = U(e);
-      return r.setItem(u.value, JSON.stringify(t));
-    }
-  }, L = () => {
-    const e = n?.persistency;
-    if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = U(e), t = new URLSearchParams(window.location.search);
-      t.set(u.value, JSON.stringify(r));
-      const s = new URL(window.location.href);
-      s.search = t.toString(), window.history.replaceState({}, "", s.toString());
-    }
-  };
-  N(g), T(() => {
-    window.addEventListener("beforeunload", g), window.addEventListener("blur", L);
-  }), W(() => {
-    window.removeEventListener("beforeunload", g), window.removeEventListener("blur", L);
-  });
-  const $ = (e) => l.currentSpan.pipe(
-    l.option,
-    l.flatMap(
-      (r) => l.promise(() => d.handleSubmit(M.isSome(r) ? { currentSpan: r.value, ...e } : e))
-    )
-  ), D = (e) => e?.checkErrors ? $(e?.meta).pipe(l.flatMap(l.fnUntraced(function* () {
-    const r = d.getAllErrors();
-    if (Object.keys(r.fields).length || r.form.errors.length)
-      return yield* new re({ form: r.form, fields: r.fields });
-  }))) : $(e?.meta), H = d.handleSubmit, E = k(/* @__PURE__ */ new Map()), h = Object.assign(d, {
-    i18nNamespace: n?.i18nNamespace,
-    ignorePreventCloseEvents: n?.ignorePreventCloseEvents,
-    meta: p,
-    clear: x,
-    handleSubmit: (e) => {
-      const r = _.getSpan(V.active());
-      return H({ currentSpan: r, ...e });
-    },
-    // /** @experimental */
-    handleSubmitEffect: D,
-    registerField: (e) => {
-      z(e, (r) => E.value.set(r.name, { label: r.label, id: r.id }), { immediate: !0 }), N(() => E.value.delete(e.value.name));
-    }
-  }), A = { form: h, fieldMap: E };
-  return Object.assign(h, {
-    errorContext: A,
-    Form: w(h)(ee),
-    Input: w(h)(n?.input ?? C),
-    Field: d.Field,
-    Errors: te(A)(Y),
-    Array: w(h)(Q),
-    AutoGen: w(h)(X)
-  });
-};
+    }), (t, o) => (g(), p(v, null, [
+      m(i(n.form).Input, {
+        name: `${n.name}._tag`,
+        label: n.label,
+        type: n.type ?? "select",
+        options: n.options
+      }, null, 8, ["name", "label", "type", "options"]),
+      m(i(n.form).Field, { name: n.name }, {
+        default: u(({ field: a, state: l }) => [
+          l.value ? f(t.$slots, "default", { key: 0 }) : V("", !0),
+          m(k, {
+            field: a,
+            state: l.value
+          }, b({ _: 2 }, [
+            y(t.$slots, (C, r) => ({
+              name: r,
+              fn: u((s) => [
+                f(t.$slots, r, F($(s)))
+              ])
+            }))
+          ]), 1032, ["field", "state"])
+        ]),
+        _: 3
+      }, 8, ["name"])
+    ], 64));
+  }
+});
 export {
-  re as FormErrors,
-  Se as useOmegaForm
+  B as default
 };

package/dist/vue-components.es9.js

@@ -1,32 +1,19 @@
-import l from "./vue-components.es24.js";
-import { inject as c, provide as u } from "vue";
-import { onMountedWithCleanup as f } from "./vue-components.es25.js";
-const p = () => l(), i = 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();
-  };
-};
+import { defineComponent as l, watch as s, renderSlot as i, createCommentVNode as o, normalizeProps as r, mergeProps as d } from "vue";
+const m = /* @__PURE__ */ l({
+  __name: "OmegaTaggedUnionInternal",
+  props: {
+    state: {},
+    field: {}
+  },
+  setup(e) {
+    const a = e;
+    return s(() => a.state?._tag, (t, n) => {
+      t === null && a.field.setValue(null), t !== n && setTimeout(() => {
+        a.field.validate("change");
+      }, 0);
+    }), (t, n) => e.state?._tag ? i(t.$slots, e.state?._tag, r(d({ key: 0 }, { field: e.field, state: e.state }))) : o("", !0);
+  }
+});
 export {
-  r as injectBus,
-  g as provideBus,
-  h as useOnClose,
-  d as usePreventClose
+  m as default
 };

package/package.json

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

package/src/components/OmegaForm/InputProps.ts

@@ -55,3 +55,35 @@ export type VuetifyInputProps<From extends Record<PropertyKey, any>, TName exten
     options?: { title: string; value: unknown }[]
   }
 } & Pick<InputProps<From, TName>, "field" | "state">
+
+// Utility type to extract _tag literal values from a discriminated union
+// For a union like { _tag: "A", ... } | { _tag: "B", ... }, this returns "A" | "B"
+// For nullable unions like { _tag: "A" } | { _tag: "B" } | null, this still returns "A" | "B" (excluding null)
+export type ExtractTagValue<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> =
+  DeepValue<From, TName> extends infer U ? U extends { _tag: infer Tag } ? Tag
+    : never
+    : never
+
+// Utility type to extract a specific branch from a discriminated union based on _tag value
+// For union { _tag: "A", foo: string } | { _tag: "B", bar: number } and Tag="A", returns { _tag: "A", foo: string }
+export type ExtractUnionBranch<T, Tag> = T extends { _tag: Tag } ? T
+  : never
+
+// Option type for TaggedUnion component with strongly-typed value
+// The value can be either one of the _tag values OR null (for the placeholder)
+export type TaggedUnionOption<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
+  readonly title: string
+  readonly value: ExtractTagValue<From, TName> | null
+}
+
+// Options array must ALWAYS start with a null option (placeholder), followed by the actual options
+export type TaggedUnionOptionsArray<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = readonly [
+  { readonly title: string; readonly value: null },
+  ...ReadonlyArray<{ readonly title: string; readonly value: ExtractTagValue<From, TName> }>
+]
+
+// Props for TaggedUnion component
+export type TaggedUnionProps<From extends Record<PropertyKey, any>, TName extends DeepKeys<From>> = {
+  name: TName
+  options: TaggedUnionOptionsArray<From, TName>
+}

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -7,7 +7,7 @@ import { getTransformationFrom, useIntl } from "../../utils"
 import { type OmegaFieldInternalApi } from "./InputProps"
 import { type OF, type OmegaFormReturn } from "./useOmegaForm"
 
-type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {}
+export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {}
   : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint
       ? `${Path extends "" ? "" : `${Path}.`}${K & string}`
@@ -344,7 +344,21 @@ export const createMeta = <T = any>(
     for (const p of propertySignatures) {
       const key = parent ? `${parent}.${p.name.toString()}` : p.name.toString()
       const nullableOrUndefined = isNullableOrUndefined(p.type)
-      const isRequired = !nullableOrUndefined
+
+      // Determine if this field should be required:
+      // - For nullable discriminated unions, only _tag should be non-required
+      // - All other fields should calculate their required status normally
+      let isRequired: boolean
+      if (meta._isNullableDiscriminatedUnion && p.name.toString() === "_tag") {
+        // _tag in a nullable discriminated union is not required
+        isRequired = false
+      } else if (meta.required === false) {
+        // Explicitly set to non-required (legacy behavior for backwards compatibility)
+        isRequired = false
+      } else {
+        // Calculate from the property itself
+        isRequired = !nullableOrUndefined
+      }
 
       const typeToProcess = p.type
       if (S.AST.isUnion(p.type)) {
@@ -375,12 +389,17 @@ export const createMeta = <T = any>(
           // Process each non-null type and merge their metadata
           for (const nonNullType of nonNullTypes) {
             if ("propertySignatures" in nonNullType) {
+              // For discriminated unions (multiple branches):
+              // - If the parent union is nullable, only _tag should be non-required
+              // - All other fields maintain their normal required status based on their own types
+              const isNullableDiscriminatedUnion = nullableOrUndefined && nonNullTypes.length > 1
+
               Object.assign(
                 acc,
                 createMeta<T>({
                   parent: key,
                   propertySignatures: nonNullType.propertySignatures,
-                  meta: { required: isRequired, nullableOrUndefined }
+                  meta: isNullableDiscriminatedUnion ? { _isNullableDiscriminatedUnion: true } : {}
                 })
               )
             }

package/src/components/OmegaForm/OmegaInput.vue

@@ -76,7 +76,10 @@ const humanize = (str: string) => {
     .replace(/^./, (char) => char.toUpperCase()) // Capitalize the first letter
     .trim() // Remove leading/trailing spaces
 }
-const fallback = () => formatMessage({ id: `general.fields.${propsName.value}`, defaultMessage: humanize(props.name) })
+const fallback = () =>
+  formatMessage
+    ? formatMessage({ id: `general.fields.${propsName.value}`, defaultMessage: humanize(props.name) })
+    : humanize(props.name)
 const i18n = () =>
   props.form.i18nNamespace
     ? formatMessage({ id: `${props.form.i18nNamespace}.fields.${propsName.value}`, defaultMessage: fallback() })

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -14,7 +14,7 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
-import { type DeepKeys, useStore } from "@tanstack/vue-form"
+import { type DeepKeys, type DeepValue, useStore } from "@tanstack/vue-form"
 import { computed, type ComputedRef, getCurrentInstance, onMounted, useId } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
@@ -91,12 +91,18 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 // convert nullish value to null or undefined based on schema
 const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value) => {
   if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
-    props.field.handleChange(
-      props.meta?.nullableOrUndefined === "undefined"
-        ? undefined
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        : null as any
-    )
+    // Only convert to null/undefined if the field is actually nullable or optional
+    if (props.meta?.nullableOrUndefined) {
+      props.field.handleChange(
+        props.meta.nullableOrUndefined === "undefined"
+          ? undefined
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          : null as any
+      )
+    } else {
+      // Keep the actual value (e.g., empty string for S.String fields)
+      props.field.handleChange(value)
+    }
   } else {
     props.field.handleChange(value)
   }
@@ -108,15 +114,31 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
 
 // TODO: it would be cleaner when default values are handled in the form initialization via Schema or by the one using the form component..
 onMounted(() => {
-  if (
-    !fieldValue.value
-    && !isRequired.value
-    && props.meta?.nullableOrUndefined === "null"
-  ) {
+  // Initialize field value on mount if it doesn't exist
+  if (fieldValue.value === undefined) {
     const isDirty = fieldState.value.meta.isDirty
-    fieldApi.setValue(null as any)
     // make sure we restore the previous dirty state..
     fieldApi.setMeta((_) => ({ ..._, isDirty }))
+
+    if (isRequired.value) return
+
+    // Set appropriate default value based on field type and nullability
+    if (props.meta?.nullableOrUndefined === "null") {
+      fieldApi.setValue(null as DeepValue<From, Name>)
+    } else if (props.meta?.nullableOrUndefined === "undefined") {
+      fieldApi.setValue(undefined as DeepValue<From, Name>)
+    } else {
+      // For required fields, initialize with appropriate empty value
+      if (props.meta?.type === "string") {
+        fieldApi.setValue("" as DeepValue<From, Name>)
+      } else if (props.meta?.type === "number") {
+        // Don't initialize number fields to avoid setting them to 0
+        // Leave as undefined so validation will catch it
+      } else if (props.meta?.type === "boolean") {
+        fieldApi.setValue(false as DeepValue<From, Name>)
+      }
+      // For other types, leave undefined so validation will catch missing required fields
+    }
   }
 })