Adds input class name

.changeset/curvy-parts-invite.md

@@ -0,0 +1,5 @@
+---
+"@effect-app/vue-components": minor
+---
+
+Adds custom class names to inputs

packages/vue-components/src/components/OmegaForm/OmegaFormStuff.ts

@@ -25,6 +25,13 @@ export type BaseProps<From, TName extends DeepKeys<From> = DeepKeys<From>> = {
   validators?: FieldValidators<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"

packages/vue-components/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: computedClass }"
       />
     </div>
   </slot>
@@ -15,7 +15,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, useId } from "vue"
+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,14 +50,29 @@ const props = withDefaults(
     required: undefined,
     type: undefined,
     options: undefined,
-    validators: undefined
+    validators: undefined,
+    inputClass: undefined
   }
 )
 
 const isRequired = computed(() => props.required ?? props?.meta?.required)
 
 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
+  return rest
+})
 
 const id = useId()
 
@@ -75,7 +91,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(() =>

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

@@ -9,6 +9,7 @@ import BooleansComponent from "./OmegaForm/Booleans.vue"
 import ClearableComponent from "./OmegaForm/Clearable.vue"
 import ComplexFormComponent from "./OmegaForm/ComplexForm.vue"
 import CreateUseFormWithCustomInputComponent from "./OmegaForm/CreateUseFormWithCustomInput.vue"
+import CustomInputClassNameComponent from "./OmegaForm/CustomInputClassName.vue"
 import DateComponent from "./OmegaForm/Date.vue"
 import DialogBlockingExamplesComponent from "./OmegaForm/DialogBlockingExamples.vue"
 import EmailFormComponent from "./OmegaForm/EmailForm.vue"
@@ -222,3 +223,10 @@ export const WindowExitPrevention: Story = {
     template: "<WindowExitPreventionComponent />"
   })
 }
+
+export const CustomInputClassName: Story = {
+  render: () => ({
+    components: { CustomInputClassNameComponent },
+    template: "<CustomInputClassNameComponent />"
+  })
+}

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

@@ -1,9 +1,11 @@
 <template>
-  <div>
+  <div :class="$attrs.class">
+    {{ $attrs["input-class"] }}
     <input
       :id="field.name"
       :name="field.name"
       :value="state.value"
+      :class="$attrs['input-class']"
       @change="(e: any) => field.handleChange(e.target.value)"
     >
   </div>

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

@@ -0,0 +1,53 @@
+<template>
+  <form.Form :subscribe="['values']">
+    <template #default="{ subscribedValues: { values } }">
+      <form.Input
+        label="aString (uses inputClass)"
+        name="aString"
+        class="generalClassName"
+        input-class="custom-input-class"
+      />
+      <form.Input
+        label="bString (inputClass=null, no class applied)"
+        name="bString"
+        class="generalClassName"
+        :input-class="null"
+      />
+      <pre>{{ values }}</pre>
+      <button>submit</button>
+
+      <form.Errors />
+    </template>
+  </form.Form>
+</template>
+
+<script setup lang="ts">
+import { S } from "effect-app"
+import { useOmegaForm } from "../../src"
+
+const schema = S.Struct({
+  aString: S.NullOr(S.NonEmptyString255).withDefault,
+  bString: S.NullOr(S.NonEmptyString255).withDefault
+})
+const defaultValues = {
+  aString: ""
+}
+const form = useOmegaForm(schema, {
+  onSubmit: async (values) => {
+    console.log(values)
+  },
+  defaultValues
+})
+</script>
+
+<style scoped>
+:deep(.generalClassName) {
+  outline: 2px solid red;
+  opacity: 0.5;
+}
+
+:deep(.custom-input-class) {
+  outline: 2px solid blue;
+  opacity: 0.8;
+}
+</style>

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

@@ -5,6 +5,8 @@
       <form.Input
         label="asder2"
         name="asder2"
+        class="test"
+        input-class="testina"
       />
       <v-btn type="submit">
         submit
@@ -27,3 +29,6 @@ const form = useForm(schema, {
   }
 })
 </script>
+
+<style>
+</style>