@effect-app/vue-components 1.3.0 → 1.4.1

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

@@ -9,6 +9,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     min?: number | false;
     name: string;
     modelValue: DeepValue<From, TName>;
+    handleChange: (value: DeepValue<From, TName>) => void;
     errorMessages: string[];
     error: boolean;
     field: OmegaFieldInternalApi<From, TName>;

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

@@ -1,7 +1,6 @@
 import { type DeepKeys, type DeepValue } from "@tanstack/vue-form";
 import { type OmegaInputProps } from "./OmegaFormStuff";
-declare const __VLS_export: <// dprint ignore - somehow with 120 chars, this becomes a mess. should report it.
-From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__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<{
+declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__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<Omit<OmegaInputProps<From, To>, "validators" | "options" | "label" | "type" | "items"> & {
         defaultItems?: DeepValue<From, DeepKeys<From>>;
         items?: "please use `defaultItems` instead";

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

@@ -1,6 +1,5 @@
 import { type OmegaInputPropsBase } from "./OmegaFormStuff";
-declare const __VLS_export: <// dprint ignore - somehow with 120 chars, this becomes a mess. should report it.
-From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__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<{
+declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__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<OmegaInputPropsBase<From, To>> & import("vue").PublicProps;
     expose: (exposed: {}) => void;
     attrs: any;
@@ -14,6 +13,7 @@ From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(__VL
             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>;

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

@@ -25,6 +25,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             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>;

package/dist/vue-components.es15.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8d0c5c48]{display:contents}fieldset[disabled][data-v-8d0c5c48]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-8d0c5c48]{display:contents}fieldset[disabled][data-v-8d0c5c48]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,c,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-440e1a59]{display:contents}fieldset[disabled][data-v-440e1a59]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-440e1a59]{display:contents}fieldset[disabled][data-v-440e1a59]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es28.js";
 
 import m from "./vue-components.es27.js";
-const c = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8d0c5c48"]]);
+const e = /* @__PURE__ */ m(o, [["__scopeId", "data-v-440e1a59"]]);
 export {
-  c as default
+  e as default
 };

package/dist/vue-components.es20.js

@@ -1,4 +1,4 @@
-import { defineComponent as b, resolveComponent as o, createElementBlock as m, openBlock as r, createBlock as i, createCommentVNode as u, resolveDynamicComponent as d, mergeProps as a, unref as f, withCtx as h, Fragment as c, renderList as V } from "vue";
+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.es8.js";
 const U = /* @__PURE__ */ b({
   inheritAttrs: !1,
@@ -10,13 +10,13 @@ const U = /* @__PURE__ */ b({
   emits: ["focus", "blur"],
   setup(e) {
     return (l, n) => {
-      const s = 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");
+      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", {
         class: "omega-input",
         onFocusout: n[4] || (n[4] = (t) => l.$emit("blur", t)),
         onFocusin: n[5] || (n[5] = (t) => l.$emit("focus", t))
       }, [
-        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (r(), i(d(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), a({
+        e.inputProps.type === "boolean" || e.inputProps.type === "switch" ? (r(), u(s(e.inputProps.type === "boolean" ? "v-checkbox" : "v-switch"), a({
           key: 0,
           id: e.inputProps.id,
           name: e.inputProps.name,
@@ -26,24 +26,24 @@ const U = /* @__PURE__ */ b({
           ripple: ""
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          onChange: n[0] || (n[0] = (t) => e.inputProps.field.handleChange(t.target.checked))
-        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" || e.inputProps.type === "password" ? (r(), i(s, a({
+          onChange: n[0] || (n[0] = (t) => e.inputProps.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({
           key: 1,
           id: e.inputProps.id,
           required: e.inputProps.required,
           "min-length": e.inputProps.minLength,
           "max-length": e.inputProps.maxLength,
-          type: f(C)(e.inputProps.type),
+          type: h(C)(e.inputProps.type),
           name: e.inputProps.name,
           label: e.inputProps.label,
           "error-messages": e.inputProps.errorMessages,
           error: e.inputProps.error
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "text" ? (r(), i(P, a({
+          "onUpdate:modelValue": e.inputProps.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({
           key: 2,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -55,9 +55,9 @@ const U = /* @__PURE__ */ b({
           error: e.inputProps.error
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "number" || e.inputProps.type === "range" ? (r(), i(d(e.inputProps.type === "range" ? "v-slider" : "v-text-field"), a({
+          "onUpdate:modelValue": e.inputProps.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({
           key: 3,
           id: e.inputProps.id,
           required: e.inputProps.required,
@@ -71,10 +71,10 @@ const U = /* @__PURE__ */ b({
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
           "onUpdate:modelValue": n[1] || (n[1] = (t) => {
-            t || t === 0 ? e.inputProps.field.handleChange(Number(t)) : e.inputProps.field.handleChange(void 0);
+            t || t === 0 ? e.inputProps.handleChange(Number(t)) : e.inputProps.handleChange(void 0);
           })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : u("", !0),
-        e.inputProps.type === "radio" ? (r(), i(g, a({
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : i("", !0),
+        e.inputProps.type === "radio" ? (r(), u(g, a({
           key: 4,
           id: e.inputProps.id,
           name: e.inputProps.name,
@@ -83,18 +83,18 @@ const U = /* @__PURE__ */ b({
           error: e.inputProps.error
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
+          "onUpdate:modelValue": e.inputProps.handleChange
         }), {
-          default: h(() => [
-            (r(!0), m(c, null, V(e.inputProps.options, (t) => (r(), i(p, {
+          default: f(() => [
+            (r(!0), m(c, null, V(e.inputProps.options, (t) => (r(), u(p, {
               key: t.value,
               label: t.title,
               value: t.value
             }, null, 8, ["label", "value"]))), 128))
           ]),
           _: 1
-        }, 16, ["id", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (r(), i(v, a({
+        }, 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({
           key: 5,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "select",
@@ -108,10 +108,10 @@ const U = /* @__PURE__ */ b({
           error: e.inputProps.error
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          onClear: n[2] || (n[2] = (t) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : u("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (r(), i(y, a({
+          onClear: n[2] || (n[2] = (t) => e.inputProps.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.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({
           key: 6,
           id: e.inputProps.id,
           clearable: e.inputProps.type === "autocomplete",
@@ -125,9 +125,9 @@ const U = /* @__PURE__ */ b({
           chips: e.inputProps.type === "autocompletemultiple"
         }, l.$attrs, {
           "model-value": e.vuetifyValue,
-          onClear: n[3] || (n[3] = (t) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : u("", !0)
+          onClear: n[3] || (n[3] = (t) => e.inputProps.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.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 E, getCurrentInstance as V, useId as w, computed as a, watch as d, nextTick as N, onMounted as c, ref as $, watchEffect as k, onUnmounted as B, renderSlot as I, normalizeProps as _, guardReactiveProps as q, createElementVNode as F, normalizeClass as L, createBlock as O, createCommentVNode as P, unref as S, openBlock as T, mergeProps as U } from "vue";
+import { defineComponent as x, getCurrentInstance as N, useId as V, computed as a, onMounted as c, ref as $, watchEffect as B, watch as I, onUnmounted as _, renderSlot as k, normalizeProps as q, guardReactiveProps as D, createElementVNode as L, normalizeClass as O, createBlock as P, createCommentVNode as F, unref as M, openBlock as S, mergeProps as U } from "vue";
 import { useStore as z } from "@tanstack/vue-form";
 import A from "./vue-components.es20.js";
 
-const H = /* @__PURE__ */ E({
+const H = /* @__PURE__ */ x({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -15,48 +15,46 @@ const H = /* @__PURE__ */ E({
     validators: {}
   },
   setup(v) {
-    const e = v, g = V()?.appContext.components.VTextField, n = w(), o = e.field, r = z(o.store, (t) => t), m = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), l = a(() => r.value.value), y = a(
+    const e = v, g = N()?.appContext.components.VTextField, n = V(), l = e.field, r = z(l.store, (t) => t), u = a(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown"), m = a(() => r.value.value), h = a(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         r.value.meta.errors.map((t) => t?.message).filter(Boolean)
       )
-    ), h = (t) => t == null || t === !1 || t === "" || Number.isNaN(t);
-    d(
-      () => !!l.value,
-      () => {
-        h(l.value) && e.meta?.type !== "boolean" && N(() => {
-          o.setValue(
-            e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
-          );
-        });
+    ), y = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), b = (t) => {
+      y(t) && e.meta?.type !== "boolean" ? e.field.handleChange(
+        e.meta?.nullableOrUndefined === "undefined" ? void 0 : null
+      ) : e.field.handleChange(t);
+    };
+    c(() => {
+      if (!m.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null") {
+        const t = r.value.meta.isDirty;
+        l.setValue(null), l.setMeta((d) => ({ ...d, isDirty: t }));
       }
-    ), c(() => {
-      !l.value && !e.meta?.required && e.meta?.nullableOrUndefined === "null" && o.setValue(null);
     });
-    const { mapError: b, removeError: f, showErrors: x, showErrorsOn: C } = e.field.form.errorContext, s = $(!1);
-    k(() => {
-      (x.value || C === "onChange") && (s.value = !0);
+    const { mapError: C, removeError: f, showErrors: E, showErrorsOn: w } = e.field.form.errorContext, o = $(!1);
+    B(() => {
+      (E.value || w === "onChange") && (o.value = !0);
     });
-    const i = () => {
-      s.value = !0;
+    const s = () => {
+      o.value = !0;
     };
     c(() => {
-      l.value && i();
+      m.value && s();
     });
-    const p = a(() => !s.value && m.value !== "select" ? [] : y.value);
-    d(
+    const p = a(() => !o.value && u.value !== "select" ? [] : h.value);
+    I(
       () => r.value.meta.errors,
       () => {
-        r.value.meta.errors.length ? b({
+        r.value.meta.errors.length ? C({
           inputId: n,
           errors: r.value.meta.errors.map((t) => t.message).filter(Boolean),
           label: e.label
         }) : f(n);
       }
-    ), B(() => {
-      f(n), e.field.form.deleteField(e.field.name);
+    ), _(() => {
+      f(n);
     });
-    const u = a(() => ({
+    const i = a(() => ({
       id: n,
       required: e.meta?.required,
       minLength: e.meta?.type === "string" && e.meta?.minLength,
@@ -65,25 +63,26 @@ const H = /* @__PURE__ */ E({
       min: e.meta?.type === "number" && e.meta?.minimum,
       name: e.field.name,
       modelValue: e.field.state.value,
+      handleChange: b,
       errorMessages: p.value,
       error: !!p.value.length,
       field: e.field,
-      setRealDirty: i,
-      type: m.value,
+      setRealDirty: s,
+      type: u.value,
       label: `${e.label}${e.meta?.required ? " *" : ""}`,
       options: e.options
     }));
-    return (t, M) => I(t.$slots, "default", _(q(u.value)), () => [
-      F("div", {
-        class: L(t.$attrs.class),
-        onFocusout: i
+    return (t, d) => k(t.$slots, "default", q(D(i.value)), () => [
+      L("div", {
+        class: O(t.$attrs.class),
+        onFocusout: s
       }, [
-        S(g) ? (T(), O(A, U({
+        M(g) ? (S(), P(A, U({
           key: 0,
-          "input-props": u.value
+          "input-props": i.value
         }, t.$attrs, {
-          "vuetify-value": u.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
+          "vuetify-value": i.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : F("", !0)
       ], 34)
     ]);
   }

package/dist/vue-components.es8.js

@@ -1,6 +1,7 @@
-import { S as n, Option as c, pipe as L } from "effect-app";
-import { useIntl as U, getTransformationFrom as _ } from "./vue-components.es3.js";
-const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find((i) => i._tag === "UndefinedKeyword" || i === n.Null.ast), g = (e) => !e || !n.AST.isUnion(e) ? !1 : e.types.find((i) => i._tag === "UndefinedKeyword") ? "undefined" : e.types.find((i) => i === n.Null.ast) ? "null" : !1, m = ({ meta: e = {}, parent: i = "", property: t, propertySignatures: p }, o = {}) => {
+import { S as n, Option as c, pipe as q } from "effect-app";
+import { getMetadataFromSchema as U } from "@effect-app/vue/form";
+import { useIntl as _, getTransformationFrom as N } from "./vue-components.es3.js";
+const w = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find((i) => i._tag === "UndefinedKeyword" || i === n.Null.ast), g = (e) => !e || !n.AST.isUnion(e) ? !1 : e.types.find((i) => i._tag === "UndefinedKeyword") ? "undefined" : e.types.find((i) => i === n.Null.ast) ? "null" : !1, m = ({ meta: e = {}, parent: i = "", property: t, propertySignatures: p }, o = {}) => {
   if (t && t._tag === "Transformation")
     return m({
       parent: i,
@@ -18,7 +19,7 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
       if (n.AST.isUnion(r.type)) {
         const T = r.type.types.filter(
           (s) => s._tag !== "UndefinedKeyword" && s !== n.Null.ast
-        ).map(_);
+        ).map(N);
         if (T.some(
           (s) => "propertySignatures" in s
         )) {
@@ -148,7 +149,12 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
         const T = m({
           parent: l,
           property: r.type,
-          meta: { required: u, nullableOrUndefined: a }
+          meta: {
+            // an empty string is valid for a S.String field, so we should not mark it as required
+            // TODO: handle this better via the createMeta minLength parsing
+            required: u && (r.type._tag !== "StringKeyword" || U(r.type).minLength),
+            nullableOrUndefined: a
+          }
         });
         o[l] = T;
       }
@@ -201,10 +207,10 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
     ), e);
   }
   return o;
-}, q = (e) => {
+}, L = (e) => {
   const i = e.ast, t = {};
   if (i._tag === "Transformation" || i._tag === "Refinement")
-    return q(n.make(i.from));
+    return L(n.make(i.from));
   if ("propertySignatures" in i) {
     const p = m({
       propertySignatures: i.propertySignatures
@@ -220,13 +226,13 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
     o(p);
   }
   return t;
-}, I = (e) => n.extend(e, n.Struct({})), K = (e) => {
-  const i = q(e), t = L(
+}, P = (e) => n.extend(e, n.Struct({})), F = (e) => {
+  const i = L(e), t = q(
     e.ast,
     c.liftPredicate((p) => p._tag === "Refinement" && "filter" in p),
     c.flatMap((p) => n.AST.getJSONSchemaAnnotation(p)),
     c.filter((p) => "items" in p),
-    c.filterMap(({ items: p }) => n.decodeUnknownOption(N)(p)),
+    c.filterMap(({ items: p }) => n.decodeUnknownOption(w)(p)),
     c.zipWith(
       n.AST.getMessageAnnotation(e.ast),
       (p, o) => ({
@@ -237,8 +243,8 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
     c.getOrUndefined
   );
   return { schema: e, meta: i, filterItems: t };
-}, P = (e) => {
-  const { trans: i } = U();
+}, j = (e) => {
+  const { trans: i } = _();
   let t;
   switch (e.type) {
     case "string":
@@ -320,7 +326,7 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
       message: () => i("validation.empty")
     })
   ) : t = n.NullishOr(t), n.standardSchemaV1(t);
-}, j = (e, i) => n.NullOr(e).pipe(
+}, R = (e, i) => n.NullOr(e).pipe(
   n.transform(n.typeSchema(e), {
     decode: (t) => t ?? i(),
     encode: (t) => t
@@ -341,12 +347,12 @@ const N = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find
   "text",
   "time",
   "url"
-], F = (e) => k.includes(e) ? e : "text";
+], J = (e) => k.includes(e) ? e : "text";
 export {
   m as createMeta,
-  I as duplicateSchema,
-  P as generateInputStandardSchemaFromFieldMeta,
-  K as generateMetaFromSchema,
-  F as getInputType,
-  j as nullableInput
+  P as duplicateSchema,
+  j as generateInputStandardSchemaFromFieldMeta,
+  F as generateMetaFromSchema,
+  J as getInputType,
+  R as nullableInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -17,6 +17,7 @@
     "@storybook/vue3-vite": "^9.1.9",
     "@types/node": "^24.6.0",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vueuse/core": "^13.9.0",
     "@vue/test-utils": "^2.4.6",
     "dprint": "^0.50.2",
     "jsdom": "^27.0.0",
@@ -30,7 +31,7 @@
     "vitest": "^3.2.4",
     "vue-router": "^4.5.1",
     "vue-tsc": "^3.1.0",
-    "@effect-app/eslint-shared-config": "0.3.0"
+    "@effect-app/eslint-shared-config": "0.3.1"
   },
   "files": [
     "src",
@@ -49,8 +50,8 @@
     "@tanstack/vue-form": "^1.23.4",
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.9.0",
-    "@effect-app/vue": "2.82.0"
+    "@effect-app/vue": "2.82.0",
+    "effect-app": "3.9.0"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/InputProps.ts

@@ -36,6 +36,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
   min?: number | false
   name: string
   modelValue: DeepValue<From, TName>
+  handleChange: (value: DeepValue<From, TName>) => void
   errorMessages: string[]
   error: boolean
   field: OmegaFieldInternalApi<From, TName>

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -1,5 +1,6 @@
 import { type Effect, Option, pipe, type Record, S } from "effect-app"
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { getMetadataFromSchema } from "@effect-app/vue/form"
 import { type DeepKeys, type FieldAsyncValidateOrFn, type FieldValidateOrFn, type FormApi, type FormAsyncValidateOrFn, type FormOptions, type FormState, type FormValidateOrFn, type StandardSchemaV1, type VueFormApi } from "@tanstack/vue-form"
 import { type RuntimeFiber } from "effect/Fiber"
 import { getTransformationFrom, useIntl } from "../../utils"
@@ -492,7 +493,12 @@ export const createMeta = <T = any>(
           const newMeta = createMeta<T>({
             parent: key,
             property: p.type,
-            meta: { required: isRequired, nullableOrUndefined }
+            meta: {
+              // an empty string is valid for a S.String field, so we should not mark it as required
+              // TODO: handle this better via the createMeta minLength parsing
+              required: isRequired && (p.type._tag !== "StringKeyword" || getMetadataFromSchema(p.type).minLength),
+              nullableOrUndefined
+            }
           })
 
           acc[key as NestedKeyOf<T>] = newMeta as FieldMeta

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -15,7 +15,7 @@
       ripple
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @change="(e: any) => inputProps.field.handleChange(e.target.checked)"
+      @change="(e: any) => inputProps.handleChange(e.target.checked)"
     />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
@@ -30,7 +30,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -44,7 +44,7 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @update:model-value="inputProps.field.handleChange"
+      @update:model-value="inputProps.handleChange"
     />
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
@@ -62,9 +62,9 @@
       :model-value="vuetifyValue"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
-          inputProps.field.handleChange(Number(e) as any)
+          inputProps.handleChange(Number(e) as any)
         } else {
-          inputProps.field.handleChange(undefined as any)
+          inputProps.handleChange(undefined as any)
         }
       }"
     />
@@ -77,7 +77,7 @@
         :error="inputProps.error"
         v-bind="$attrs"
         :model-value="vuetifyValue"
-        @update:model-value="inputProps.field.handleChange"
+        @update:model-value="inputProps.handleChange"
       >
         <v-radio
           v-for="option in inputProps.options"
@@ -101,8 +101,8 @@
       :error="inputProps.error"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
 
     <v-autocomplete
@@ -120,8 +120,8 @@
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
       :model-value="vuetifyValue"
-      @clear="inputProps.field.handleChange(undefined as any)"
-      @update:model-value="inputProps.field.handleChange"
+      @clear="inputProps.handleChange(undefined as any)"
+      @update:model-value="inputProps.handleChange"
     />
   </div>
 </template>

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -20,7 +20,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -67,31 +67,35 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-// watchEffect will trigger infinite times with both free fieldValue and errors, so bet to watch a stupid boolean
-watch(
-  () => !!fieldValue.value,
-  () => {
-    if (isFalsyButNotZero(fieldValue.value) && props.meta?.type !== "boolean") {
-      nextTick(() => {
-        fieldApi.setValue(
-          props.meta?.nullableOrUndefined === "undefined"
-            ? undefined
-            : null as any
-        )
-      })
-    }
+
+// 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
+    )
+  } else {
+    props.field.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
     && !props.meta?.required
     && props.meta?.nullableOrUndefined === "null"
   ) {
+    const isDirty = fieldState.value.meta.isDirty
     fieldApi.setValue(null as any)
+    // make sure we restore the previous dirty state..
+    fieldApi.setMeta((_) => ({ ..._, isDirty }))
   }
 })
+
 const { mapError, removeError, showErrors, showErrorsOn } = (props.field.form as any).errorContext // todo; update types to include extended Omega Form props
 
 const realDirty = ref(false)
@@ -141,7 +145,6 @@ watch(
 
 onUnmounted(() => {
   removeError(id)
-  props.field.form.deleteField(props.field.name)
 })
 
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
@@ -153,6 +156,7 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   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,