@effect-app/vue-components 0.0.8 → 0.1.0

package/dist/vue-components.es6.js

@@ -0,0 +1,218 @@
+import { S as i, pipe as p, Option as f } from "effect-app";
+import { useIntl as S } from "./vue-components.es3.js";
+const y = i.NonEmptyArray(i.String), v = (e) => i.AST.isUnion(e) && e.types.find((t) => t._tag === "UndefinedKeyword" || t === i.Null.ast), x = (e) => !e || !i.AST.isUnion(e) ? !1 : e.types.find((t) => t._tag === "UndefinedKeyword") ? "undefined" : e.types.find((t) => t === i.Null.ast) ? "null" : !1, m = ({ meta: e = {}, parent: t = "", property: n, propertySignatures: a }, l = {}) => {
+  if (n && n._tag === "Transformation")
+    return m({
+      parent: t,
+      meta: e,
+      property: n.from
+    });
+  if ((n == null ? void 0 : n._tag) === "TypeLiteral" && "propertySignatures" in n)
+    return m({
+      meta: e,
+      propertySignatures: n.propertySignatures
+    });
+  if (a) {
+    for (const s of a) {
+      const u = t ? `${t}.${s.name.toString()}` : s.name.toString(), r = x(s.type), o = e.required ?? !r;
+      let d = s.type;
+      if (i.AST.isUnion(s.type) && (d = s.type.types.find(
+        (g) => g._tag !== "UndefinedKeyword" && g !== i.Null.ast
+      )), "propertySignatures" in d)
+        Object.assign(
+          l,
+          m({
+            parent: u,
+            propertySignatures: d.propertySignatures,
+            meta: { required: o, nullableOrUndefined: r }
+          })
+        );
+      else {
+        const g = m({
+          parent: u,
+          property: s.type,
+          meta: { required: o, nullableOrUndefined: r }
+        });
+        l[u] = g;
+      }
+    }
+    return l;
+  }
+  if (n) {
+    const s = v(n);
+    if (Object.hasOwnProperty.call(e, "required") || (e.required = !s), i.AST.isUnion(n)) {
+      const r = n.types.find(
+        (o) => o._tag !== "UndefinedKeyword" && o !== i.Null.ast
+      );
+      return "propertySignatures" in r ? m({
+        propertySignatures: r.propertySignatures,
+        parent: t,
+        meta: e
+      }) : n.types.every(i.AST.isLiteral) ? {
+        ...e,
+        type: "select",
+        members: n.types.map((o) => o.literal)
+      } : {
+        ...e,
+        ...m({
+          parent: t,
+          meta: e,
+          property: r
+        })
+      };
+    }
+    if (i.AST.isTupleType(n))
+      return {
+        ...e,
+        type: "multiple",
+        members: n.elements
+      };
+    const u = i.AST.getAnnotation(
+      n,
+      i.AST.JSONSchemaAnnotationId
+    ).pipe(f.getOrElse(() => ({})));
+    return e = { ...e, ...u }, "from" in n ? m({
+      parent: t,
+      meta: e,
+      property: n.from
+    }) : (e.type = i.AST.getAnnotation(
+      n,
+      i.AST.TitleAnnotationId
+    ).pipe(
+      f.getOrElse(() => "unknown")
+    ), e);
+  }
+  return l;
+}, c = (e) => {
+  const t = e.ast, n = {};
+  if (t._tag === "Transformation" || t._tag === "Refinement")
+    return c(i.make(t.from));
+  if ("propertySignatures" in t) {
+    const a = m({
+      propertySignatures: t.propertySignatures
+    });
+    if (Object.values(a).every((s) => s && "type" in s))
+      return a;
+    const l = (s, u = "") => {
+      for (const r in s) {
+        const o = u ? `${u}.${r}` : r;
+        s[r] && typeof s[r] == "object" && "type" in s[r] ? n[o] = s[r] : s[r] && typeof s[r] == "object" && l(s[r], o);
+      }
+    };
+    l(a);
+  }
+  return n;
+}, b = (e) => i.extend(e, i.Struct({})), A = (e) => {
+  const t = c(e), n = p(
+    e.ast,
+    f.liftPredicate((a) => a._tag === "Refinement" && "filter" in a),
+    f.flatMap((a) => i.AST.getJSONSchemaAnnotation(a)),
+    f.filter((a) => "items" in a),
+    f.filterMap(
+      ({ items: a }) => i.decodeUnknownOption(y)(a)
+    ),
+    f.zipWith(
+      i.AST.getMessageAnnotation(e.ast),
+      (a, l) => ({
+        items: a,
+        message: l("")
+      })
+    ),
+    f.getOrUndefined
+  );
+  return { schema: e, meta: t, filterItems: n };
+}, O = (e) => {
+  const { trans: t } = S();
+  let n;
+  switch (e.type) {
+    case "string":
+      n = i.String.annotations({
+        message: () => t("validation.empty")
+      }), e.format === "email" && (n = i.compose(
+        n,
+        i.Email.annotations({
+          message: () => t("validation.email.invalid")
+        })
+      )), e.required && n.annotations({
+        message: () => t("validation.empty")
+      }), e.maxLength && (n = n.pipe(i.maxLength(e.maxLength)).annotations({
+        message: () => t("validation.string.maxLength", {
+          maxLength: e.maxLength
+        })
+      })), e.minLength && (n = n.pipe(i.minLength(e.minLength)).annotations({
+        message: () => t("validation.string.minLength", {
+          minLength: e.minLength
+        })
+      }));
+      break;
+    case "number":
+      n = i.Number.annotations({
+        message: () => t("validation.empty")
+      }), e.required && n.annotations({
+        message: () => t("validation.empty")
+      }), e.minimum && (n = n.pipe(i.greaterThanOrEqualTo(e.minimum)).annotations({
+        message: () => t("validation.number.min", {
+          minimum: e.minimum,
+          isExclusive: !0
+        })
+      })), e.maximum && (n = n.pipe(i.lessThanOrEqualTo(e.maximum)).annotations({
+        message: () => t("validation.number.max", {
+          maximum: e.maximum,
+          isExclusive: !0
+        })
+      })), e.exclusiveMinimum && (n = n.pipe(i.greaterThan(e.exclusiveMinimum)).annotations({
+        message: () => t("validation.number.min", {
+          minimum: e.exclusiveMinimum,
+          isExclusive: !1
+        })
+      })), e.exclusiveMaximum && (n = n.pipe(i.lessThan(e.exclusiveMaximum)).annotations({
+        message: () => t("validation.number.max", {
+          maximum: e.exclusiveMaximum,
+          isExclusive: !1
+        })
+      }));
+      break;
+    case "select":
+      n = i.Literal(...e.members).annotations({
+        message: () => ({
+          message: t("validation.not_a_valid", {
+            type: "select",
+            message: e.members.join(", ")
+          }),
+          override: !0
+        })
+      });
+      break;
+    case "multiple":
+      n = i.Array(i.String).annotations({
+        message: () => t("validation.not_a_valid", {
+          type: "multiple",
+          message: e.members.join(", ")
+        })
+      });
+      break;
+    case "boolean":
+      n = i.Boolean;
+      break;
+    // todo: switch must be exhaustive or have default case, otherwise falls through with schema undefined.
+    case "unknown":
+      n = i.Unknown;
+      break;
+  }
+  return e.required ? n.pipe(
+    i.annotations({
+      message: () => t("validation.empty")
+    })
+  ) : n = i.NullishOr(n), i.standardSchemaV1(n);
+}, L = (e, t) => i.NullOr(e).pipe(
+  i.transform(i.typeSchema(e), {
+    decode: (n) => n ?? t(),
+    encode: (n) => n
+  })
+);
+export {
+  b as duplicateSchema,
+  O as generateInputStandardSchemaFromFieldMeta,
+  A as generateMetaFromSchema,
+  L as nullableInput
+};

package/dist/vue-components.es7.js

@@ -0,0 +1,7 @@
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-0de09910]{display:contents}")),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-0de09910]{display:contents}")),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.es11.js";
+import m from "./vue-components.es12.js";
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-0de09910"]]);
+export {
+  a as default
+};

package/dist/vue-components.es8.js

@@ -0,0 +1,48 @@
+import { defineComponent as i, computed as t, createBlock as p, openBlock as d, resolveDynamicComponent as u, withCtx as r, createVNode as f, mergeProps as c, renderSlot as v, normalizeProps as h, guardReactiveProps as g } from "vue";
+import { generateInputStandardSchemaFromFieldMeta as y } from "./vue-components.es6.js";
+import b from "./vue-components.es15.js";
+const S = /* @__PURE__ */ i({
+  inheritAttrs: !1,
+  __name: "OmegaInput",
+  props: {
+    form: {},
+    name: {},
+    validators: {},
+    label: {},
+    options: {},
+    type: {}
+  },
+  setup(n) {
+    const o = n, a = t(() => o.form.meta[o.name]), m = t(() => {
+      if (!a.value)
+        throw new Error("Meta is undefined");
+      return y(a.value);
+    });
+    return (e, C) => (d(), p(u(e.form.Field), {
+      name: e.name,
+      validators: {
+        onChange: m.value,
+        ...e.validators
+      }
+    }, {
+      default: r(({ field: l }) => [
+        f(b, c({
+          field: l,
+          label: e.label,
+          options: e.options,
+          meta: a.value,
+          type: e.type
+        }, e.$attrs), {
+          default: r((s) => [
+            v(e.$slots, "default", h(g(s)))
+          ]),
+          _: 2
+        }, 1040, ["field", "label", "options", "meta", "type"])
+      ]),
+      _: 3
+    }, 8, ["name", "validators"]));
+  }
+});
+export {
+  S as default
+};

package/dist/vue-components.es9.js

@@ -0,0 +1,7 @@
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");if(t.appendChild(document.createTextNode(".v-enter-from[data-v-fde7a2c8],.v-leave-to[data-v-fde7a2c8]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-fde7a2c8],.v-leave-active[data-v-fde7a2c8]{display:grid;transition:all .15s}.v-enter-to[data-v-fde7a2c8],.v-leave-from[data-v-fde7a2c8]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-fde7a2c8]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-fde7a2c8]{min-height:0}.error-list[data-v-fde7a2c8]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:.5em;align-items:start}@container (max-width: 28.125rem){.error-list[data-v-fde7a2c8]{grid-template-columns:auto 1fr}.error-link[data-v-fde7a2c8]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){.error-list[data-v-fde7a2c8]{grid-template-columns:1fr}.error-message[data-v-fde7a2c8]{grid-column:1 / -1}}.error-item[data-v-fde7a2c8]{display:contents}a[data-v-fde7a2c8]{min-width:min-content}.error-link[data-v-fde7a2c8]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),document.head.appendChild(t),window.customElements){const e=window.customElements.define;window.customElements.define=function(d,a){const i=a.prototype.connectedCallback;return a.prototype.connectedCallback=function(){if(i&&i.call(this),this.shadowRoot){const r=document.createElement("style");r.appendChild(document.createTextNode(".v-enter-from[data-v-fde7a2c8],.v-leave-to[data-v-fde7a2c8]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-fde7a2c8],.v-leave-active[data-v-fde7a2c8]{display:grid;transition:all .15s}.v-enter-to[data-v-fde7a2c8],.v-leave-from[data-v-fde7a2c8]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-fde7a2c8]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-fde7a2c8]{min-height:0}.error-list[data-v-fde7a2c8]{container-type:inline-size;display:grid;grid-template-columns:auto 1fr auto;gap:.5em;align-items:start}@container (max-width: 28.125rem){.error-list[data-v-fde7a2c8]{grid-template-columns:auto 1fr}.error-link[data-v-fde7a2c8]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){.error-list[data-v-fde7a2c8]{grid-template-columns:1fr}.error-message[data-v-fde7a2c8]{grid-column:1 / -1}}.error-item[data-v-fde7a2c8]{display:contents}a[data-v-fde7a2c8]{min-width:min-content}.error-link[data-v-fde7a2c8]{align-items:center;color:inherit;display:inline-flex;flex-wrap:wrap;gap:.25em;padding-bottom:1em;text-decoration:none}")),this.shadowRoot.appendChild(r)}},e.call(window.customElements,d,a)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import o from "./vue-components.es14.js";
+import r from "./vue-components.es12.js";
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-fde7a2c8"]]);
+export {
+  e as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.0.8",
+  "version": "0.1.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -15,11 +15,18 @@
   },
   "devDependencies": {
     "@types/node": "^22.13.14",
+    "@typescript-eslint/eslint-plugin": "8.29.0",
+    "@typescript-eslint/parser": "8.29.0",
     "@vitejs/plugin-vue": "^5.2.3",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-vue": "^10.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.86.0",
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vitepress": "^1.6.3",
     "vue-tsc": "^2.2.8"
   },
@@ -36,13 +43,15 @@
     "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "dependencies": {
-    "@effect-app/vue": "2.39.7",
-    "effect-app": "2.38.3"
+    "@effect-app/vue": "2.39.8",
+    "effect-app": "2.38.4"
   },
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:serve": "vitepress serve docs"
+    "docs:serve": "vitepress serve docs",
+    "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src",
+    "autofix": "pnpm lint --fix"
   }
 }

package/src/components/OmegaForm/InputProps.ts

@@ -0,0 +1,81 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { FieldApi, DeepValue, ValidationError } from "@tanstack/vue-form"
+import { type NestedKeyOf } from "./OmegaFormStuff"
+
+// Placeholder types for validator function shapes
+type ValidatorFnSync = (opts: {
+  value: any
+  fieldApi: any
+}) => ValidationError | undefined
+type ValidatorFnAsync = (opts: {
+  value: any
+  fieldApi: any
+}) => Promise<ValidationError | undefined>
+// Assuming form validators have a similar structure but might operate on the whole form data (any for simplicity)
+type FormValidatorFnSync = (opts: {
+  value: any
+  formApi: any
+}) => ValidationError | undefined
+type FormValidatorFnAsync = (opts: {
+  value: any
+  formApi: any
+}) => Promise<ValidationError | undefined>
+// Placeholder for other form-related types
+type FormServerError = any
+type SubmitMeta = any
+
+// Define a more flexible Updater type that can accept direct values
+type FlexibleUpdater<T> = ((prev: T) => T) | T
+
+export type OmegaFieldInternalApi<To> = Omit<
+  FieldApi<
+    To, // TParentData
+    NestedKeyOf<To>, // TName
+    DeepValue<To, NestedKeyOf<To>>, // TData
+    // Field Validators (approximated typqes)
+    ValidatorFnSync, // TOnMount
+    ValidatorFnSync, // TOnChange
+    ValidatorFnAsync, // TOnChangeAsync
+    ValidatorFnSync, // TOnBlur
+    ValidatorFnAsync, // TOnBlurAsync
+    ValidatorFnSync, // TOnSubmit
+    ValidatorFnAsync, // TOnSubmitAsync
+    // Form Validators (approximated types)
+    FormValidatorFnSync, // TFormOnMount
+    FormValidatorFnSync, // TFormOnChange
+    FormValidatorFnAsync, // TFormOnChangeAsync
+    FormValidatorFnSync, // TFormOnBlur
+    FormValidatorFnAsync, // TFormOnBlurAsync
+    FormValidatorFnSync, // TFormOnSubmit
+    FormValidatorFnAsync, // TFormOnSubmitAsync
+    // Other Form types (placeholders)
+    FormServerError, // TFormOnServer
+    SubmitMeta // TParentSubmitMeta
+  >,
+  "handleChange" | "setValue"
+> & {
+  handleChange: (
+    updater: FlexibleUpdater<DeepValue<To, NestedKeyOf<To>>> | any,
+  ) => void
+  setValue: (
+    updater: FlexibleUpdater<DeepValue<To, NestedKeyOf<To>>> | any,
+  ) => void
+}
+
+export type InputProps<T> = {
+  id: string
+  required?: boolean
+  minLength?: number | false
+  maxLength?: number | false
+  max?: number | false
+  min?: number | false
+  name: string
+  modelValue: unknown
+  errorMessages: string[]
+  error: boolean
+  field: OmegaFieldInternalApi<T>
+  setRealDirty: () => void
+  type: string
+  label: string
+  options?: { title: string; value: string }[]
+}

package/src/components/OmegaForm/OmegaErrors.vue

@@ -1,32 +1,66 @@
 <template>
   <Transition>
-    <div v-if="
-      formSubmissionAttempts > 0 &&
-      (errors.length || showedGeneralErrors.length)
-    " class="error-alert">
-      <v-alert type="error" variant="tonal" role="alert" aria-live="polite" class="mb-4">
-        <div class="text-h6 mb-3">{{ trans("form.includes_error") }}:</div>
-        <component :is="errors.length > 1 ? 'ul' : 'div'" v-if="errors.length" class="error-list">
-          <component :is="errors.length > 1 ? 'li' : 'div'" v-for="error in errors" :key="error.inputId"
-            class="error-item">
-            <div class="font-weight-medium">{{ error.label }}</div>
-            <div class="error-message">
-              <component :is="error.errors.length > 1 ? 'ul' : 'div'" class="error-list">
-                <component :is="error.errors.length > 1 ? 'li' : 'span'" v-for="e in error.errors" :key="e">
-                  {{ e }}
+    <div
+      v-if="
+        formSubmissionAttempts > 0 &&
+        (errors.length || showedGeneralErrors.length)
+      "
+      class="error-alert"
+    >
+      <slot v-bind="{ errors, showedGeneralErrors }">
+        <component
+          :is="vuetified ? 'v-alert' : 'div'"
+          :class="vuetified ? 'mb-4' : 'error-alert-content'"
+          type="error"
+          variant="tonal"
+          role="alert"
+          aria-live="polite"
+          class="mb-4"
+        >
+          <div class="text-h6 mb-3">{{ trans("form.includes_error") }}:</div>
+          <component
+            :is="errors.length > 1 ? 'ul' : 'div'"
+            v-if="errors.length"
+            class="error-list"
+          >
+            <component
+              :is="errors.length > 1 ? 'li' : 'div'"
+              v-for="error in errors"
+              :key="error.inputId"
+              class="error-item"
+            >
+              <div class="font-weight-medium">{{ error.label }}</div>
+              <div class="error-message">
+                <component
+                  :is="error.errors.length > 1 ? 'ul' : 'div'"
+                  class="error-list"
+                >
+                  <component
+                    :is="error.errors.length > 1 ? 'li' : 'span'"
+                    v-for="e in error.errors"
+                    :key="e"
+                  >
+                    {{ e }}
+                  </component>
                 </component>
-              </component>
-            </div>
-            <a :href="`#${error.inputId}`" class="error-link">
-              <v-icon :icon="mdiLink" />
-              {{ trans("form.fix_input") }}
-            </a>
+              </div>
+              <a :href="`#${error.inputId}`" class="error-link">
+                <component
+                  :is="vuetified ? 'v-icon' : 'i'"
+                  :icon="mdiLink"
+                  aria-hidden="true"
+                >
+                  <i>&#128279;</i>
+                </component>
+                {{ trans("form.fix_input") }}
+              </a>
+            </component>
           </component>
+          <span v-else>
+            {{ showedGeneralErrors[0] }}
+          </span>
         </component>
-        <span v-else>
-          {{ showedGeneralErrors[0] }}
-        </span>
-      </v-alert>
+      </slot>
     </div>
   </Transition>
 </template>
@@ -36,7 +70,10 @@ import { useOmegaErrors } from "./OmegaErrorsContext"
 import { mdiLink } from "@mdi/js"
 import { useIntl } from "../../utils"
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
-import { computed } from "vue"
+import { computed, getCurrentInstance } from "vue"
+
+const instance = getCurrentInstance()
+const vuetified = instance?.appContext.components["VAlert"]
 
 const { errors, formSubmissionAttempts, generalErrors } = useOmegaErrors()
 
@@ -91,7 +128,7 @@ const showedGeneralErrors = computed(() => {
   overflow: hidden;
   min-height: 0;
 
-  >* {
+  > * {
     min-height: 0;
   }
 }
@@ -100,7 +137,7 @@ const showedGeneralErrors = computed(() => {
   container-type: inline-size;
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 8px;
+  gap: 0.5em;
   align-items: start;
 }
 
@@ -112,7 +149,6 @@ const showedGeneralErrors = computed(() => {
   .error-link {
     grid-column: 1 / -1;
     justify-self: end;
-    padding-bottom: 16px;
   }
 }
 
@@ -135,9 +171,12 @@ a {
 }
 
 .error-link {
+  align-items: center;
   color: inherit;
-  text-decoration: none;
   display: inline-flex;
-  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25em;
+  padding-bottom: 1em;
+  text-decoration: none;
 }
 </style>

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -23,6 +23,8 @@ export type TypeOverride =
   | "select"
   | "multiple"
   | "boolean"
+  | "autocomplete"
+  | "autocompletemultiple"
 
 export interface OmegaError {
   label: string

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,38 +1,25 @@
 <template>
-  <component :is="form.Field" :name="name" :validators="{
-    onChange: schema,
-    ...validators,
-  }">
-    <template #default="{
-      field,
-    }: {
-      // TODO: exact type
-      field: FieldApi<
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any,
-        any
+  <component
+    :is="form.Field"
+    :name="name"
+    :validators="{
+      onChange: schema,
+      ...validators,
+    }"
+  >
+    <template #default="{ field }: { field: OmegaFieldInternalApi<To> }">
+      <OmegaInternalInput
+        :field="field"
+        :label="label"
+        :options="options"
+        :meta="meta"
+        :type="type"
+        v-bind="$attrs"
       >
-    }">
-      <slot :field="field" :label="label" :options="options" :meta="meta" :type="type">
-        <OmegaInternalInput v-bind="$attrs" :field="field" :label="label" :options="options" :meta="meta"
-          :type="type" />
-      </slot>
+        <template #default="inputProps">
+          <slot v-bind="inputProps" />
+        </template>
+      </OmegaInternalInput>
     </template>
   </component>
 </template>
@@ -48,11 +35,7 @@ import {
   type TypeOverride,
 } from "./OmegaFormStuff"
 import OmegaInternalInput from "./OmegaInternalInput.vue"
-import type { FieldApi } from "@tanstack/vue-form"
-
-defineOptions({
-  inheritAttrs: false
-})
+import type { OmegaFieldInternalApi } from "./InputProps"
 
 const props = defineProps<{
   form: FormType<From, To> & {
@@ -65,6 +48,10 @@ const props = defineProps<{
   type?: TypeOverride
 }>()
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 const meta = computed(() => {
   return props.form.meta[props.name]
 })