@effect-app/vue-components 2.1.6 → 2.2.0

package/dist/types/components/OmegaForm/InputProps.d.ts

@@ -12,6 +12,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/dist/types/components/OmegaForm/OmegaFormStuff.d.ts

@@ -6,12 +6,19 @@ import { type OF, type OmegaFormReturn } from "./useOmegaForm";
 export type Leaves<T, Path extends string = ""> = T extends ReadonlyArray<infer U> ? Leaves<U, `${Path}[number]`> & {} : {
     [K in keyof T]: T[K] extends string | boolean | number | null | undefined | symbol | bigint ? `${Path extends "" ? "" : `${Path}.`}${K & string}` : Leaves<T[K], `${Path extends "" ? "" : `${Path}.`}${K & string}`> & {};
 }[keyof T];
-export type FlexibleArrayPath<T extends string> = T extends `${infer Before}[number]${infer After}` ? T | `${Before}[${number}]${FlexibleArrayPath<After>}` : T;
+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>;
-    name: TName;
+    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";
 export type DefaultTypeProps = {

package/dist/types/components/OmegaForm/OmegaInput.vue.d.ts

@@ -17,6 +17,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, To extends R
             error: boolean;
             label: string;
             type: string;
+            inputClass: string | undefined | null;
         }) => any;
     };
     emit: {};

package/dist/types/components/OmegaForm/OmegaInternalInput.vue.d.ts

@@ -11,6 +11,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
         type?: TypeOverride;
         validators?: FieldValidators<From>;
         required?: boolean;
+        inputClass?: string | null;
         register: (field: ComputedRef<{
             name: string;
             label: string;
@@ -37,6 +38,7 @@ declare const __VLS_export: <From extends Record<PropertyKey, any>, Name extends
             error: boolean;
             label: string;
             type: string;
+            inputClass: string | undefined | null;
         }) => any;
     };
     emit: {};

package/dist/vue-components.es18.js

@@ -1,15 +1,16 @@
-import { defineComponent as F, computed as i, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as b, mergeProps as B } from "vue";
+import { defineComponent as F, computed as f, onMounted as M, provide as P, createBlock as c, openBlock as s, resolveDynamicComponent as p, withCtx as g, renderSlot as o, createElementBlock as k, normalizeProps as l, guardReactiveProps as u, Fragment as A, renderList as C, mergeProps as b } from "vue";
 const N = /* @__PURE__ */ F({
   inheritAttrs: !1,
   __name: "OmegaArray",
   props: {
     form: {},
+    inputClass: {},
     name: {},
     defaultItems: {},
     items: {}
   },
   setup(n) {
-    const a = n, y = a.form.useStore((e) => e.values), d = i(() => {
+    const a = n, y = a.form.useStore((e) => e.values), i = f(() => {
       const e = a.name.replace(/\[/g, ".").replace(/\]/g, "");
       try {
         return e.split(".").reduce((r, t) => r && r[t], y.value);
@@ -18,16 +19,16 @@ const N = /* @__PURE__ */ F({
       }
     });
     M(async () => {
-      a.defaultItems && !d.value && a.form.setFieldValue(a.name, a.defaultItems);
+      a.defaultItems && !i.value && a.form.setFieldValue(a.name, a.defaultItems);
     });
-    const $ = i(() => (r) => {
+    const $ = f(() => (r) => {
       const t = r.replace(/\[\d+\]/g, "");
       return a.form.meta[t];
     });
     return P("getMetaFromArray", $), (e, r) => (s(), c(p(n.form.Field), { name: n.name }, {
-      default: g(({ field: t, state: f }) => [
-        o(e.$slots, "pre-array", l(u({ field: t, state: f }))),
-        (s(!0), k(A, null, b(d.value, (C, m) => (s(), c(p(n.form.Field), {
+      default: g(({ field: t, state: d }) => [
+        o(e.$slots, "pre-array", l(u({ field: t, state: d }))),
+        (s(!0), k(A, null, C(i.value, (B, m) => (s(), c(p(n.form.Field), {
           key: `${n.name}[${Number(m)}]`,
           name: (
             // eslint-disable-next-line
@@ -35,7 +36,7 @@ const N = /* @__PURE__ */ F({
           )
         }, {
           default: g(({ field: v, state: h }) => [
-            o(e.$slots, "default", B({ ref_for: !0 }, {
+            o(e.$slots, "default", b({ ref_for: !0 }, {
               subField: v,
               subState: h,
               index: Number(m),
@@ -44,7 +45,7 @@ const N = /* @__PURE__ */ F({
           ]),
           _: 2
         }, 1032, ["name"]))), 128)),
-        o(e.$slots, "post-array", l(u({ field: t, state: f }))),
+        o(e.$slots, "post-array", l(u({ field: t, state: d }))),
         o(e.$slots, "field", l(u({ field: t })))
       ]),
       _: 3

package/dist/vue-components.es21.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-8a2f9d6f]{display:contents}fieldset[disabled][data-v-8a2f9d6f]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-8a2f9d6f]{display:contents}fieldset[disabled][data-v-8a2f9d6f]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-05e510ab]{display:contents}fieldset[disabled][data-v-05e510ab]>*{pointer-events:none}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(i,t){const d=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(d&&d.call(this),this.shadowRoot){const o=document.createElement("style");o.appendChild(document.createTextNode("fieldset[data-v-05e510ab]{display:contents}fieldset[disabled][data-v-05e510ab]>*{pointer-events:none}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es36.js";
 
 import m from "./vue-components.es35.js";
-const f = /* @__PURE__ */ m(o, [["__scopeId", "data-v-8a2f9d6f"]]);
+const e = /* @__PURE__ */ m(o, [["__scopeId", "data-v-05e510ab"]]);
 export {
-  f as default
+  e as default
 };

package/dist/vue-components.es6.js

@@ -1,50 +1,54 @@
-import { defineComponent as M, computed as l, inject as b, createBlock as f, openBlock as c, resolveDynamicComponent as C, withCtx as d, createCommentVNode as F, mergeProps as k, renderSlot as y, normalizeProps as A, guardReactiveProps as N } from "vue";
-import { useIntl as w } from "./vue-components.es3.js";
-import { generateInputStandardSchemaFromFieldMeta as I } from "./vue-components.es12.js";
-import P from "./vue-components.es7.js";
-const O = /* @__PURE__ */ M({
+import { defineComponent as b, computed as s, useAttrs as F, inject as k, createBlock as c, openBlock as f, resolveDynamicComponent as y, withCtx as d, createCommentVNode as A, mergeProps as N, renderSlot as w, normalizeProps as I, guardReactiveProps as P } from "vue";
+import { useIntl as S } from "./vue-components.es3.js";
+import { generateInputStandardSchemaFromFieldMeta as j } from "./vue-components.es12.js";
+import z from "./vue-components.es7.js";
+const R = /* @__PURE__ */ b({
   inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
     form: {},
     label: {},
     validators: {},
-    name: {}
+    name: {},
+    inputClass: {}
   },
   setup(a) {
-    const e = a, r = l(() => e.name), n = b(
+    const e = a, r = s(() => e.name), p = F(), v = s(() => {
+      if (e.inputClass !== null)
+        return e.inputClass !== void 0 ? e.inputClass : p.class;
+    }), l = k(
       "getMetaFromArray",
       null
-    ), o = l(() => n?.value && n.value(e.name) ? n.value(r.value) : e.form.meta[r.value]), p = l(() => {
-      if (!o.value)
+    ), n = s(() => l?.value && l.value(e.name) ? l.value(r.value) : e.form.meta[r.value]), g = s(() => {
+      if (!n.value)
         throw console.log(e.name, Object.keys(e.form.meta), e.form.meta), new Error("Meta is undefined");
-      return I(o.value);
-    }), { formatMessage: m } = w(), s = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (u) => u.toUpperCase()).trim(), i = () => m ? m({ id: `general.fields.${r.value}`, defaultMessage: s(e.name) }) : s(e.name), v = () => e.form.i18nNamespace ? m({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: i() }) : i();
-    return (t, u) => (c(), f(C(a.form.Field), {
+      return j(n.value);
+    }), { formatMessage: o } = S(), m = (t) => t.replace(/([A-Z])/g, " $1").replace(/^./, (u) => u.toUpperCase()).trim(), i = () => o ? o({ id: `general.fields.${r.value}`, defaultMessage: m(e.name) }) : m(e.name), C = () => e.form.i18nNamespace ? o({ id: `${e.form.i18nNamespace}.fields.${r.value}`, defaultMessage: i() }) : i();
+    return (t, u) => (f(), c(y(a.form.Field), {
       name: a.name,
       validators: {
-        onChange: p.value,
+        onChange: g.value,
         ...a.validators
       }
     }, {
-      default: d(({ field: g, state: h }) => [
-        o.value ? (c(), f(P, k({ key: 0 }, { ...t.$attrs, ...t.$props }, {
-          field: g,
-          state: h,
+      default: d(({ field: h, state: $ }) => [
+        n.value ? (f(), c(z, N({ key: 0 }, { ...t.$attrs, ...t.$props, inputClass: v.value }, {
+          field: h,
+          state: $,
           register: a.form.registerField,
-          label: a.label ?? v(),
-          meta: o.value
+          label: a.label ?? C(),
+          meta: n.value
         }), {
-          default: d(($) => [
-            y(t.$slots, "default", A(N($)))
+          default: d((M) => [
+            w(t.$slots, "default", I(P(M)))
           ]),
           _: 3
-        }, 16, ["field", "state", "register", "label", "meta"])) : F("", !0)
+        }, 16, ["field", "state", "register", "label", "meta"])) : A("", !0)
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
 });
 export {
-  O as default
+  R as default
 };

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 b, computed as r, getCurrentInstance as C, useId as x, renderSlot as _, normalizeProps as m, guardReactiveProps as P, createElementVNode as N, normalizeClass as $, createBlock as q, createCommentVNode as B, unref as k, openBlock as I, mergeProps as L } from "vue";
-import { useStore as M } 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 U = /* @__PURE__ */ b({
+const Z = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -14,54 +14,59 @@ const U = /* @__PURE__ */ b({
     type: { default: void 0 },
     validators: { default: void 0 },
     required: { type: Boolean, default: void 0 },
+    inputClass: { default: void 0 },
     register: {},
     options: { default: void 0 }
   },
   setup(u) {
-    const e = u, o = r(() => e.required ?? e?.meta?.required), d = C()?.appContext.components.VTextField, l = x(), p = e.field, i = M(p.store, (t) => t), f = r(() => e.type ? e.type : e.meta?.type === "string" ? e.meta.format === "email" ? "email" : "string" : e.meta?.type || "unknown");
-    e.register(r(() => ({ name: e.field.name, label: e.label, id: l }))), r(() => i.value.value);
-    const c = r(() => i.value.meta.errors ?? []), s = r(
+    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
-        c.value.map((t) => t?.message).filter(Boolean)
+        h.value.map((t) => t?.message).filter(Boolean)
       )
-    ), g = (t) => t == null || t === !1 || t === "" || Number.isNaN(t), v = (t) => {
-      g(t) && e.meta?.type !== "boolean" && e.meta?.nullableOrUndefined ? e.field.handleChange(
+    ), 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 } }));
-    }, h = (t) => {
-      const n = {
-        get(O, y, R) {
-          return y === "handleChange" ? v : Reflect.get(...arguments);
+      ) : 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);
-    }, a = r(() => ({
+      return new Proxy(t, r);
+    }, a = n(() => ({
       inputProps: {
         id: l,
-        required: o.value,
+        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: s.value,
-        error: !!s.value.length,
-        type: f.value,
-        label: `${e.label}${o.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) => _(t.$slots, "default", m(P({ ...a.value.inputProps, field: a.value.field, state: a.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)
       }, [
-        k(d) ? (I(), q(S, m(L({ key: 0 }, { ...t.$attrs, ...a.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 {
-  U as default
+  Z as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "2.1.6",
+  "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>
@@ -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,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(() =>
@@ -141,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"