@effect-app/vue-components 1.5.0 → 1.6.0

package/src/components/OmegaForm/OmegaInputVuetify.vue

@@ -8,14 +8,14 @@
       :is="inputProps.type === 'boolean' ? 'v-checkbox' : 'v-switch'"
       v-if="inputProps.type === 'boolean' || inputProps.type === 'switch'"
       :id="inputProps.id"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       ripple
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @change="(e: any) => inputProps.handleChange(e.target.checked)"
+      :model-value="field.state.value"
+      @change="(e: any) => field.handleChange(e.target.checked)"
     />
     <v-text-field
       v-if="inputProps.type === 'email' || inputProps.type === 'string' || inputProps.type === 'password'"
@@ -24,13 +24,13 @@
       :min-length="inputProps.minLength"
       :max-length="inputProps.maxLength"
       :type="getInputType(inputProps.type)"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @update:model-value="field.handleChange"
     />
     <v-textarea
       v-if="inputProps.type === 'text'"
@@ -38,13 +38,13 @@
       :required="inputProps.required"
       :min-length="inputProps.minLength"
       :max-length="inputProps.maxLength"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @update:model-value="field.handleChange"
     />
     <component
       :is="inputProps.type === 'range' ? 'v-slider' : 'v-text-field'"
@@ -54,30 +54,30 @@
       :min="inputProps.min"
       :max="inputProps.max"
       :type="inputProps.type"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
+      :model-value="field.state.value"
       @update:model-value="(e: any) => {
         if (e || e === 0) {
-          inputProps.handleChange(Number(e) as any)
+          field.handleChange(Number(e) as any)
         } else {
-          inputProps.handleChange(undefined as any)
+          field.handleChange(undefined as any)
         }
       }"
     />
     <template v-if="inputProps.type === 'radio'">
       <v-radio-group
         :id="inputProps.id"
-        :name="inputProps.name"
+        :name="field.name"
         :label="inputProps.label"
         :error-messages="inputProps.errorMessages"
         :error="inputProps.error"
         v-bind="$attrs"
-        :model-value="vuetifyValue"
-        @update:model-value="inputProps.handleChange"
+        :model-value="field.state.value"
+        @update:model-value="field.handleChange"
       >
         <v-radio
           v-for="option in inputProps.options"
@@ -94,15 +94,15 @@
       :required="inputProps.required"
       :multiple="inputProps.type === 'multiple'"
       :chips="inputProps.type === 'multiple'"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @clear="inputProps.handleChange(undefined as any)"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @clear="field.handleChange(undefined as any)"
+      @update:model-value="field.handleChange"
     />
 
     <v-autocomplete
@@ -112,16 +112,16 @@
       :clearable="inputProps.type === 'autocomplete'"
       :multiple="inputProps.type === 'autocompletemultiple'"
       :required="inputProps.required"
-      :name="inputProps.name"
+      :name="field.name"
       :label="inputProps.label"
       :items="inputProps.options"
       :error-messages="inputProps.errorMessages"
       :error="inputProps.error"
       :chips="inputProps.type === 'autocompletemultiple'"
       v-bind="$attrs"
-      :model-value="vuetifyValue"
-      @clear="inputProps.handleChange(undefined as any)"
-      @update:model-value="inputProps.handleChange"
+      :model-value="field.state.value"
+      @clear="field.handleChange(undefined as any)"
+      @update:model-value="field.handleChange"
     />
   </div>
 </template>
@@ -135,10 +135,7 @@ import { type DeepKeys } from "@tanstack/vue-form"
 import { getInputType } from "../OmegaForm/OmegaFormStuff"
 import type { InputProps } from "./InputProps"
 
-defineProps<{
-  inputProps: InputProps<From, Name>
-  vuetifyValue: unknown
-}>()
+defineProps<InputProps<From, Name>>()
 
 defineEmits<{
   (e: "focus", event: Event): void

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,14 +1,12 @@
 <template>
-  <slot v-bind="inputProps">
+  <slot v-bind="{ ...inputProps.inputProps, field: inputProps.field }">
     <div
       :class="$attrs.class"
       @focusout="setRealDirty"
     >
       <OmegaInputVuetify
         v-if="vuetified"
-        :input-props="inputProps"
-        v-bind="$attrs"
-        :vuetify-value="inputProps.field.state.value"
+        v-bind="{ ...inputProps, ...$attrs }"
       />
     </div>
   </slot>
@@ -69,7 +67,6 @@ const isFalsyButNotZero = (value: unknown): boolean => {
 }
 
 // we remove value and errors when the field is empty and not required
-
 // convert nullish value to null or undefined based on schema
 const handleChange: OmegaFieldInternalApi<From, Name>["handleChange"] = (value) => {
   if (isFalsyButNotZero(value) && props.meta?.type !== "boolean") {
@@ -149,22 +146,36 @@ onUnmounted(() => {
   removeError(id)
 })
 
+const wrapField = (field: OmegaFieldInternalApi<From, Name>) => {
+  const handler3 = {
+    get(_target: any, prop: PropertyKey, _receiver: any) {
+      if (prop === "handleChange") {
+        return handleChange
+      }
+      return Reflect.get(...arguments as unknown as [any, any, any])
+    }
+  }
+
+  const proxy3 = new Proxy(field, handler3)
+  return proxy3 as typeof field
+}
+
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
-  id,
-  required: props.meta?.required,
-  minLength: props.meta?.type === "string" && props.meta?.minLength,
-  maxLength: props.meta?.type === "string" && props.meta?.maxLength,
-  max: props.meta?.type === "number" && props.meta?.maximum,
-  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,
-  setRealDirty,
-  type: fieldType.value,
-  label: `${props.label}${props.meta?.required ? " *" : ""}`,
-  options: props.options
+  inputProps: {
+    id,
+    required: props.meta?.required,
+    minLength: props.meta?.type === "string" && props.meta?.minLength,
+    maxLength: props.meta?.type === "string" && props.meta?.maxLength,
+    max: props.meta?.type === "number" && props.meta?.maximum,
+    min: props.meta?.type === "number" && props.meta?.minimum,
+    errorMessages: showedErrors.value,
+    error: !!showedErrors.value.length,
+    setRealDirty,
+    type: fieldType.value,
+    label: `${props.label}${props.meta?.required ? " *" : ""}`,
+    options: props.options
+  },
+
+  field: wrapField(props.field)
 }))
 </script>

package/src/components/OmegaForm/createUseFormWithCustomInput.ts

@@ -28,8 +28,7 @@ export const createUseFormWithCustomInput = (CustomInputComponent: Component) =>
               // If we receive inputProps from OmegaInternalInput, use our custom component
               if (inputProps && "field" in inputProps) {
                 return h(CustomInputComponent, {
-                  inputProps,
-                  vuetifyValue: inputProps.field.state.value
+                  inputProps
                 })
               }
               // Otherwise, pass through the slot content