From 6b8b7c023f31a2465ec258c07c381cd08d589101 Mon Sep 17 00:00:00 2001
From: Davide Di Pumpo <davidemak@gmail.com>
Date: Wed, 29 Oct 2025 22:20:14 +0100
Subject: [PATCH] Moves custom input class logic on higher step to be used also
 in custom Inputs

---
 .changeset/bright-vans-relate.md                    |  5 +++++
 .../src/components/OmegaForm/InputProps.ts          |  1 +
 .../src/components/OmegaForm/OmegaInput.vue         | 13 +++++++++++--
 .../src/components/OmegaForm/OmegaInternalInput.vue | 12 +++---------
 .../stories/OmegaForm/CustomInput.vue               |  3 +--
 .../OmegaForm/createUseFormWIthCustomInput.vue      |  3 ---
 6 files changed, 21 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/bright-vans-relate.md

diff --git a/.changeset/bright-vans-relate.md b/.changeset/bright-vans-relate.md
new file mode 100644
index 0000000000..3de873bad8
--- /dev/null
+++ b/.changeset/bright-vans-relate.md
@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+Moves custom input class logic on higher step to be used also in custom Inputs
diff --git a/packages/vue-components/src/components/OmegaForm/InputProps.ts b/packages/vue-components/src/components/OmegaForm/InputProps.ts
index 6b3ac8917d..1e0d9801fc 100644
--- a/packages/vue-components/src/components/OmegaForm/InputProps.ts
+++ b/packages/vue-components/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
   }
   field: OmegaFieldInternalApi<From, TName>
   /** be sure to use this state and not `field.state` as it is not reactive */
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
index 4dfd01e1f5..3acf610a66 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInput.vue
+++ b/packages/vue-components/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
diff --git a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
index db008d1ae5..69c971bab1 100644
--- a/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
+++ b/packages/vue-components/src/components/OmegaForm/OmegaInternalInput.vue
@@ -3,7 +3,7 @@
     <div :class="$attrs.class">
       <OmegaInputVuetify
         v-if="vuetified"
-        v-bind="{ ...attrsWithoutClass, ...inputProps, class: computedClass }"
+        v-bind="{ ...attrsWithoutClass, ...inputProps, class: props.inputClass }"
       />
     </div>
   </slot>
@@ -61,13 +61,6 @@ const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VTextField"]
 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
-})
-
 // Create attrs without the class property to avoid duplication
 const attrsWithoutClass = computed(() => {
   const { class: _, ...rest } = attrs
@@ -156,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,
diff --git a/packages/vue-components/stories/OmegaForm/CustomInput.vue b/packages/vue-components/stories/OmegaForm/CustomInput.vue
index e8ca2be886..6e7242e101 100644
--- a/packages/vue-components/stories/OmegaForm/CustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/CustomInput.vue
@@ -1,11 +1,10 @@
 <template>
   <div :class="$attrs.class">
-    {{ $attrs["input-class"] }}
     <input
       :id="field.name"
       :name="field.name"
       :value="state.value"
-      :class="$attrs['input-class']"
+      :class="inputProps.inputClass"
       @change="(e: any) => field.handleChange(e.target.value)"
     >
   </div>
diff --git a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
index e48c485404..c021953bb8 100644
--- a/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
+++ b/packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue
@@ -29,6 +29,3 @@ const form = useForm(schema, {
   }
 })
 </script>
-
-<style>
-</style>