@effect-app/vue-components 2.1.5 → 2.2.0

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

package/package.json

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

package/src/components/OmegaForm/InputProps.ts

@@ -39,6 +39,7 @@ export type InputProps<From extends Record<PropertyKey, any>, TName extends Deep
     error: boolean
     label: string
     type: string
+    inputClass: string | undefined | null
   }
   field: OmegaFieldInternalApi<From, TName>
   /** be sure to use this state and not `field.state` as it is not reactive */

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -15,16 +15,23 @@ export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer
   }[keyof T]
 
 // Helper type to make array indices flexible - accepts both [number] and numeric literals [0], [1], etc.
-export type FlexibleArrayPath<T extends string> = T extends `${infer Before}[number]${infer After}`
-  ? T | `${Before}[${number}]${FlexibleArrayPath<After>}`
-  : T
+// Simplified: if there's a [] in the path, just use TName to avoid excessive type complexity
+export type FlexibleArrayPath<T extends string> = T extends `${string}[${string}]${string}` ? T
+  : never
 
 export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
   /** Will fallback to i18n when not specified */
   label?: string
   validators?: FieldValidators<From>
-  // disabled FlexibleArrayPath as it causes excessive complexity in type resolution inside user projects
-  name: TName // & FlexibleArrayPath<Leaves<From>>
+  // Use FlexibleArrayPath: if name contains [], just use TName; otherwise intersect with Leaves<From>
+  name: FlexibleArrayPath<TName> extends never ? Leaves<From> : TName
+  /**
+   * Optional class to apply to the input element.
+   * - If a string is provided, it will be used instead of the general class
+   * - If null is provided, no class will be applied (neither inputClass nor general class)
+   * - If undefined (not provided), the general class will be used
+   */
+  inputClass?: string | null
 }
 
 export type TypesWithOptions = "radio" | "select" | "multiple" | "autocomplete" | "autocompletemultiple"

package/src/components/OmegaForm/OmegaInput.vue

@@ -10,7 +10,7 @@
     <template #default="{ field, state }">
       <OmegaInternalInput
         v-if="meta"
-        v-bind="{ ...$attrs, ...$props }"
+        v-bind="{ ...$attrs, ...$props, inputClass: computedClass }"
         :field="field"
         :state="state"
         :register="form.registerField"
@@ -35,7 +35,7 @@
 "
 >
 import { type DeepKeys } from "@tanstack/vue-form"
-import { computed, inject, type Ref } from "vue"
+import { computed, inject, type Ref, useAttrs } from "vue"
 import { useIntl } from "../../utils"
 import { type FieldMeta, generateInputStandardSchemaFromFieldMeta, type OmegaInputPropsBase } from "./OmegaFormStuff"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
@@ -49,6 +49,15 @@ defineOptions({
   inheritAttrs: false
 })
 
+const attrs = useAttrs()
+
+// Compute the class to use based on inputClass prop
+const computedClass = computed(() => {
+  if (props.inputClass === null) return undefined
+  if (props.inputClass !== undefined) return props.inputClass
+  return attrs.class as string | undefined
+})
+
 const getMetaFromArray = inject<Ref<(name: string) => FieldMeta | null> | null>(
   "getMetaFromArray",
   null

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -3,7 +3,7 @@
     <div :class="$attrs.class">
       <OmegaInputVuetify
         v-if="vuetified"
-        v-bind="{ ...$attrs, ...inputProps }"
+        v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
       />
     </div>
   </slot>
@@ -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, useAttrs, useId } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -33,6 +33,7 @@ const props = withDefaults(
     type?: TypeOverride
     validators?: FieldValidators<From>
     required?: boolean
+    inputClass?: string | null
 
     register: (
       field: ComputedRef<{
@@ -49,7 +50,8 @@ const props = withDefaults(
     required: undefined,
     type: undefined,
     options: undefined,
-    validators: undefined
+    validators: undefined,
+    inputClass: undefined
   }
 )
 
@@ -57,6 +59,13 @@ const isRequired = computed(() => props.required ?? props?.meta?.required)
 
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VTextField"]
+const attrs = useAttrs()
+
+// Create attrs without the class property to avoid duplication
+const attrsWithoutClass = computed(() => {
+  const { class: _, ...rest } = attrs
+  return rest
+})
 
 const id = useId()
 
@@ -75,7 +84,6 @@ const fieldType = computed(() => {
 
 props.register(computed(() => ({ name: props.field.name, label: props.label, id })))
 
-const fieldValue = computed(() => fieldState.value.value)
 // workaround strange tanstack form issue where the errors key becomes undefined ???
 const _errors = computed(() => fieldState.value.meta.errors ?? [])
 const errors = computed(() =>
@@ -112,35 +120,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 = {
@@ -168,7 +149,8 @@ const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
     error: !!errors.value.length,
     type: fieldType.value,
     label: `${props.label}${isRequired.value ? " *" : ""}`,
-    options: props.options
+    options: props.options,
+    inputClass: props.inputClass
   },
 
   state: props.state,

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -30,7 +30,6 @@
  */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useStore } from "@tanstack/vue-form"
-import { defineSlots } from "vue"
 import { usePreventClose } from "./blockDialog"
 import { getOmegaStore } from "./getOmegaStore"
 import { type DefaultTypeProps, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff"

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)
     }
   })