Moves custom input class logic on higher step to be used also in cust…

.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

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 */

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

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,

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>

packages/vue-components/stories/OmegaForm/createUseFormWIthCustomInput.vue

@@ -29,6 +29,3 @@ const form = useForm(schema, {
   }
 })
 </script>
-
-<style>
-</style>