@effect-app/vue-components 2.1.4 → 2.1.6

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

package/package.json

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

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -23,7 +23,8 @@ export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
   /** Will fallback to i18n when not specified */
   label?: string
   validators?: FieldValidators<From>
-  name: TName & FlexibleArrayPath<Leaves<From>>
+  // disabled FlexibleArrayPath as it causes excessive complexity in type resolution inside user projects
+  name: TName // & FlexibleArrayPath<Leaves<From>>
 }
 
 export type TypesWithOptions = "radio" | "select" | "multiple" | "autocomplete" | "autocompletemultiple"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -14,8 +14,8 @@
   lang="ts"
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
-import { type DeepKeys, type DeepValue, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, onMounted, useId } from "vue"
+import { type DeepKeys, useStore } from "@tanstack/vue-form"
+import { computed, type ComputedRef, getCurrentInstance, useId } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -112,35 +112,8 @@ const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value)
   props.field.setMeta((m) => ({ ...m, errorMap: { ...m.errorMap, onSubmit: undefined } }))
 }
 
-// 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(() => {
-  // Initialize field value on mount if it doesn't exist
-  if (fieldValue.value === undefined) {
-    const isDirty = fieldState.value.meta.isDirty
-    // 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
-    }
-  }
-})
+// Note: Default value normalization (converting empty strings to null/undefined for nullable fields)
+// is now handled at the form level in useOmegaForm, not here in the component
 
 const wrapField = (field: OmegaFieldInternalApi<From, Name>) => {
   const handler3 = {

package/src/components/OmegaForm/useOmegaForm.ts

@@ -783,14 +783,50 @@ export const useOmegaForm = <
     return target
   }
 
+  // Normalize default values based on schema metadata
+  // Convert empty strings to null/undefined for nullable fields
+  // Also initialize missing nullable fields with null/undefined
+  const normalizeDefaultValues = (values: Partial<From>): Partial<From> => {
+    const normalized: any = { ...values }
+
+    // Process all fields in the schema metadata
+    for (const key in meta) {
+      const fieldMeta = meta[key as keyof typeof meta]
+      const value = normalized[key]
+
+      // Check if the value is falsy (but not boolean false or zero)
+      const isFalsyButNotZero = value == null || value === false || value === "" || Number.isNaN(value)
+      const isFalsy = isFalsyButNotZero && value !== false && value !== 0
+
+      if (
+        fieldMeta
+        && !fieldMeta.required
+        && fieldMeta.nullableOrUndefined
+        && fieldMeta.type !== "boolean"
+      ) {
+        // If value is missing or falsy, set to null or undefined based on schema
+        if (value === undefined || isFalsy) {
+          normalized[key] = fieldMeta.nullableOrUndefined === "undefined" ? undefined : null
+        }
+      }
+    }
+
+    return normalized
+  }
+
   const defaultValues = computed(() => {
+    // Normalize tanstack default values at the beginning
+    const normalizedTanstackDefaults = tanstackFormOptions?.defaultValues
+      ? normalizeDefaultValues(tanstackFormOptions.defaultValues)
+      : undefined
+
     if (
-      tanstackFormOptions?.defaultValues
+      normalizedTanstackDefaults
       && !omegaConfig?.persistency?.overrideDefaultValues
     ) {
       // defaultValues from tanstack are not partial,
-      // so if ovverrideDefaultValues is false we simply return them
-      return tanstackFormOptions?.defaultValues
+      // so if ovverrideDefaultValues is false we return the normalized values
+      return normalizedTanstackDefaults
     }
 
     // we are here because there are no default values from tankstack
@@ -839,12 +875,11 @@ export const useOmegaForm = <
     // to be sure we have a valid object at the end of the gathering process
     defValuesPatch ??= {}
 
-    if (tanstackFormOptions?.defaultValues == undefined) {
+    if (!normalizedTanstackDefaults) {
       // we just return what we gathered from the query/storage
       return defValuesPatch
     } else {
-      const startingDefValues = tanstackFormOptions?.defaultValues
-      return deepMerge(startingDefValues, defValuesPatch)
+      return deepMerge(normalizedTanstackDefaults, defValuesPatch)
     }
   })
 

package/dist/vue-components.es34.js

@@ -1,4 +0,0 @@
-import f from "./vue-components.es19.js";
-export {
-  f as default
-};

package/dist/vue-components.es37.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};