@effect-app/vue-components 0.0.3 → 0.0.5

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

@@ -1,7 +1,7 @@
 import { S, type Effect } from "effect-app";
 import { type FormAsyncValidateOrFn, type FormValidateOrFn, type StandardSchemaV1, type FormApi, type VueFormApi, type FieldComponent, type FormOptions, type DeepKeys, type FieldValidateOrFn, type FieldAsyncValidateOrFn, type FormState } from "@tanstack/vue-form";
 import type { Component } from "vue";
-export type TypeOverride = "string" | "number" | "select" | "multiple" | "boolean";
+export type TypeOverride = "string" | "text" | "number" | "select" | "multiple" | "boolean";
 export interface OmegaError {
     label: string;
     inputId: string;

package/dist/vue-components.es.js

@@ -1,51 +1,51 @@
-import { computed as S, ref as ee, readonly as Se, provide as te, inject as ne, defineComponent as q, watch as U, createElementBlock as E, openBlock as c, withModifiers as Oe, unref as f, createElementVNode as T, renderSlot as re, useId as Ee, onMounted as _e, watchEffect as ke, resolveComponent as L, createBlock as v, createCommentVNode as w, normalizeClass as Te, createVNode as A, resolveDynamicComponent as I, withCtx as O, Transition as we, toDisplayString as k, Fragment as H, renderList as Q, createTextVNode as X, defineCustomElement as $ } from "vue";
-import { useStore as M, useForm as Ie } from "@tanstack/vue-form";
-import { S as i, pipe as Ae, Option as h } from "effect-app";
-import { VTextField as Y, VSelect as Me } from "vuetify/components";
-import { mdiRefresh as qe, mdiLink as Ue } from "@mdi/js";
-function Le(e, n) {
-  return S(() => n ? M(e.store, (r) => {
-    const o = {};
+import { computed as O, ref as le, readonly as Ae, provide as oe, inject as ue, defineComponent as U, watch as L, createElementBlock as k, openBlock as g, withModifiers as Ie, unref as f, createElementVNode as _, renderSlot as me, useId as Me, onMounted as $e, watchEffect as Ue, resolveComponent as I, createBlock as v, createCommentVNode as T, mergeProps as q, normalizeClass as Le, createVNode as M, resolveDynamicComponent as A, withCtx as E, Transition as Ve, toDisplayString as w, Fragment as ne, renderList as re, createTextVNode as ae, defineCustomElement as V } from "vue";
+import { useStore as $, useForm as Ne } from "@tanstack/vue-form";
+import { S as i, pipe as Ce, Option as S } from "effect-app";
+import { VTextField as se, VSelect as Fe } from "vuetify/components";
+import { mdiRefresh as Be, mdiLink as je } from "@mdi/js";
+function Pe(e, n) {
+  return O(() => n ? $(e.store, (s) => {
+    const l = {};
     for (const a of n)
-      o[a] = r[a];
-    return o;
+      l[a] = s[a];
+    return l;
   }).value : {});
 }
 const N = Symbol();
-function ae(e, n) {
-  const t = ee([]), r = (u) => {
-    t.value = t.value.filter((l) => l.inputId !== u);
-  }, o = (u) => {
-    r(u.inputId), t.value.push(u);
+function de(e, n) {
+  const t = le([]), s = (u) => {
+    t.value = t.value.filter((o) => o.inputId !== u);
+  }, l = (u) => {
+    s(u.inputId), t.value.push(u);
   }, a = () => {
     t.value = [];
   }, d = {
-    errors: Se(t),
-    addError: o,
-    removeError: r,
+    errors: Ae(t),
+    addError: l,
+    removeError: s,
     clearErrors: a,
     formSubmissionAttempts: e,
     generalErrors: n
   };
-  return te(N, d), d;
+  return oe(N, d), d;
 }
-function V() {
-  const e = ne(N);
+function C() {
+  const e = ue(N);
   if (!e)
     throw new Error("useOmegaErrors must be used within an OmegaForm provider");
   return e;
 }
-const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ke = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   OmegaErrorsKey: N,
-  provideOmegaErrors: ae,
-  useOmegaErrors: V
-}, Symbol.toStringTag, { value: "Module" })), ie = Symbol(), se = () => {
-  const e = ne(ie);
+  provideOmegaErrors: de,
+  useOmegaErrors: C
+}, Symbol.toStringTag, { value: "Module" })), fe = Symbol(), ge = () => {
+  const e = ue(fe);
   if (!e)
     throw new Error("useIntl must be used within a IntlProvider");
   return e;
-}, rt = (e) => te(ie, e), Ne = i.NonEmptyArray(i.String), Ve = (e) => i.AST.isUnion(e) && e.types.find((n) => n._tag === "UndefinedKeyword" || n === i.Null.ast), Ce = (e) => !e || !i.AST.isUnion(e) ? !1 : e.types.find((n) => n._tag === "UndefinedKeyword") ? "undefined" : e.types.find((n) => n === i.Null.ast) ? "null" : !1, y = ({ meta: e = {}, parent: n = "", property: t, propertySignatures: r }, o = {}) => {
+}, dt = (e) => oe(fe, e), Re = i.NonEmptyArray(i.String), De = (e) => i.AST.isUnion(e) && e.types.find((n) => n._tag === "UndefinedKeyword" || n === i.Null.ast), xe = (e) => !e || !i.AST.isUnion(e) ? !1 : e.types.find((n) => n._tag === "UndefinedKeyword") ? "undefined" : e.types.find((n) => n === i.Null.ast) ? "null" : !1, y = ({ meta: e = {}, parent: n = "", property: t, propertySignatures: s }, l = {}) => {
   if (t && t._tag === "Transformation")
     return y({
       parent: n,
@@ -57,37 +57,37 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       meta: e,
       propertySignatures: t.propertySignatures
     });
-  if (r) {
-    for (const a of r) {
-      const d = n ? `${n}.${a.name.toString()}` : a.name.toString(), u = Ce(a.type), l = e.required ?? !u;
+  if (s) {
+    for (const a of s) {
+      const d = n ? `${n}.${a.name.toString()}` : a.name.toString(), u = xe(a.type), o = e.required ?? !u;
       let p = a.type;
       if (i.AST.isUnion(a.type) && (p = a.type.types.find(
         (m) => m._tag !== "UndefinedKeyword" && m !== i.Null.ast
       )), "propertySignatures" in p)
         Object.assign(
-          o,
+          l,
           y({
             parent: d,
             propertySignatures: p.propertySignatures,
-            meta: { required: l, nullableOrUndefined: u }
+            meta: { required: o, nullableOrUndefined: u }
           })
         );
       else {
         const m = y({
           parent: d,
           property: a.type,
-          meta: { required: l, nullableOrUndefined: u }
+          meta: { required: o, nullableOrUndefined: u }
         });
-        o[d] = m;
+        l[d] = m;
       }
     }
-    return o;
+    return l;
   }
   if (t) {
-    const a = Ve(t);
+    const a = De(t);
     if (Object.hasOwnProperty.call(e, "required") || (e.required = !a), i.AST.isUnion(t)) {
       const u = t.types.find(
-        (l) => l._tag !== "UndefinedKeyword" && l !== i.Null.ast
+        (o) => o._tag !== "UndefinedKeyword" && o !== i.Null.ast
       );
       return "propertySignatures" in u ? y({
         propertySignatures: u.propertySignatures,
@@ -96,7 +96,7 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       }) : t.types.every(i.AST.isLiteral) ? {
         ...e,
         type: "select",
-        members: t.types.map((l) => l.literal)
+        members: t.types.map((o) => o.literal)
       } : {
         ...e,
         ...y({
@@ -115,7 +115,7 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     const d = i.AST.getAnnotation(
       t,
       i.AST.JSONSchemaAnnotationId
-    ).pipe(h.getOrElse(() => ({})));
+    ).pipe(S.getOrElse(() => ({})));
     return e = { ...e, ...d }, "from" in t ? y({
       parent: n,
       meta: e,
@@ -124,50 +124,50 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       t,
       i.AST.TitleAnnotationId
     ).pipe(
-      h.getOrElse(() => "unknown")
+      S.getOrElse(() => "unknown")
     ), e);
   }
-  return o;
-}, oe = (e) => {
+  return l;
+}, pe = (e) => {
   const n = e.ast, t = {};
   if (n._tag === "Transformation" || n._tag === "Refinement")
-    return oe(i.make(n.from));
+    return pe(i.make(n.from));
   if ("propertySignatures" in n) {
-    const r = y({
+    const s = y({
       propertySignatures: n.propertySignatures
     });
-    if (Object.values(r).every((a) => a && "type" in a))
-      return r;
-    const o = (a, d = "") => {
+    if (Object.values(s).every((a) => a && "type" in a))
+      return s;
+    const l = (a, d = "") => {
       for (const u in a) {
-        const l = d ? `${d}.${u}` : u;
-        a[u] && typeof a[u] == "object" && "type" in a[u] ? t[l] = a[u] : a[u] && typeof a[u] == "object" && o(a[u], l);
+        const o = d ? `${d}.${u}` : u;
+        a[u] && typeof a[u] == "object" && "type" in a[u] ? t[o] = a[u] : a[u] && typeof a[u] == "object" && l(a[u], o);
       }
     };
-    o(r);
+    l(s);
   }
   return t;
-}, Fe = (e) => i.extend(e, i.Struct({})), le = (e) => {
-  const n = oe(e), t = Ae(
+}, ze = (e) => i.extend(e, i.Struct({})), ce = (e) => {
+  const n = pe(e), t = Ce(
     e.ast,
-    h.liftPredicate((r) => r._tag === "Refinement" && "filter" in r),
-    h.flatMap((r) => i.AST.getJSONSchemaAnnotation(r)),
-    h.filter((r) => "items" in r),
-    h.filterMap(
-      ({ items: r }) => i.decodeUnknownOption(Ne)(r)
+    S.liftPredicate((s) => s._tag === "Refinement" && "filter" in s),
+    S.flatMap((s) => i.AST.getJSONSchemaAnnotation(s)),
+    S.filter((s) => "items" in s),
+    S.filterMap(
+      ({ items: s }) => i.decodeUnknownOption(Re)(s)
     ),
-    h.zipWith(
+    S.zipWith(
       i.AST.getMessageAnnotation(e.ast),
-      (r, o) => ({
-        items: r,
-        message: o("")
+      (s, l) => ({
+        items: s,
+        message: l("")
       })
     ),
-    h.getOrUndefined
+    S.getOrUndefined
   );
   return { schema: e, meta: n, filterItems: t };
-}, ue = (e) => {
-  const { trans: n } = se();
+}, ve = (e) => {
+  const { trans: n } = ge();
   let t;
   switch (e.type) {
     case "string":
@@ -249,30 +249,30 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
       message: () => n("validation.empty")
     })
   ) : t = i.NullishOr(t), i.standardSchemaV1(t);
-}, xe = (e, n) => i.NullOr(e).pipe(
+}, Je = (e, n) => i.NullOr(e).pipe(
   i.transform(i.typeSchema(e), {
     decode: (t) => t ?? n(),
     encode: (t) => t
   })
-), me = (e, n) => {
+), he = (e, n) => {
   if (!e) throw new Error("Schema is required");
-  const t = i.standardSchemaV1(e), { filterItems: r, meta: o } = le(e), a = Ie({
+  const t = i.standardSchemaV1(e), { filterItems: s, meta: l } = ce(e), a = Ne({
     ...n,
     validators: {
       onSubmit: t,
       ...(n == null ? void 0 : n.validators) || {}
     },
-    onSubmit: n != null && n.onSubmit ? ({ formApi: u, meta: l, value: p }) => {
+    onSubmit: n != null && n.onSubmit ? ({ formApi: u, meta: o, value: p }) => {
       var m;
       return (m = n.onSubmit) == null ? void 0 : m.call(n, {
         formApi: u,
-        meta: l,
+        meta: o,
         value: p
       });
     } : void 0
   });
-  return Object.assign(a, { meta: o, filterItems: r });
-}, Be = ["disabled"], je = /* @__PURE__ */ q({
+  return Object.assign(a, { meta: l, filterItems: s });
+}, We = ["disabled"], Ge = /* @__PURE__ */ U({
   __name: "OmegaWrapper",
   props: {
     subscribe: {},
@@ -289,50 +289,51 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     onSubmit: { type: Function }
   },
   setup(e, { expose: n }) {
-    const t = e, r = t.form ?? me(t.schema, t), o = M(r.store, (l) => l.isSubmitting);
-    n(r);
-    const a = Le(
-      r,
+    const t = e, s = t.form ?? he(t.schema, t), l = $(s.store, (o) => o.isSubmitting);
+    n(s);
+    const a = Pe(
+      s,
       t.subscribe
-    ), d = M(
-      r.store,
-      (l) => l.submissionAttempts
-    ), u = r.useStore((l) => l.errors);
-    return U(
-      () => [r.filterItems, u.value],
+    ), d = $(
+      s.store,
+      (o) => o.submissionAttempts
+    ), u = s.useStore((o) => o.errors);
+    return L(
+      () => [s.filterItems, u.value],
       () => {
-        const l = r.filterItems;
-        return l ? u.value ? (Object.values(u.value).filter(
+        const o = s.filterItems;
+        return o ? u.value ? (Object.values(u.value).filter(
           (m) => !!m
         ).flatMap(
-          (m) => Object.values(m).flat().map((b) => b.message)
-        ).some((m) => m === l.message) && l.items.forEach((m) => {
-          const b = r.getFieldMeta(m);
-          r.setFieldMeta(m, {
-            ...b,
+          (m) => Object.values(m).flat().map((h) => h.message)
+        ).some((m) => m === o.message) && o.items.forEach((m) => {
+          const h = s.getFieldMeta(m);
+          s.setFieldMeta(m, {
+            ...h,
             errorMap: {
-              onSubmit: [{ path: [m], message: l.message }]
+              onSubmit: [{ path: [m], message: o.message }]
             }
           });
         }), {}) : {} : {};
       }
-    ), ae(d, u), (l, p) => (c(), E("form", {
-      onSubmit: p[0] || (p[0] = Oe((m) => f(r).handleSubmit(), ["prevent", "stop"]))
+    ), de(d, u), (o, p) => (g(), k("form", {
+      onSubmit: p[0] || (p[0] = Ie((m) => f(s).handleSubmit(), ["prevent", "stop"]))
     }, [
-      T("fieldset", { disabled: f(o) }, [
-        re(l.$slots, "default", {
-          form: f(r),
+      _("fieldset", { disabled: f(l) }, [
+        me(o.$slots, "default", {
+          form: f(s),
           subscribedValues: f(a)
         }, void 0, !0)
-      ], 8, Be)
+      ], 8, We)
     ], 32));
   }
-}), de = (e, n) => {
+}), be = (e, n) => {
   const t = e.__vccOpts || e;
-  for (const [r, o] of n)
-    t[r] = o;
+  for (const [s, l] of n)
+    t[s] = l;
   return t;
-}, fe = /* @__PURE__ */ de(je, [["__scopeId", "data-v-0de09910"]]), Ke = { class: "omega-input" }, Pe = /* @__PURE__ */ q({
+}, ye = /* @__PURE__ */ be(Ge, [["__scopeId", "data-v-0de09910"]]), He = { class: "omega-input" }, Qe = /* @__PURE__ */ U({
+  inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
     field: {},
@@ -343,107 +344,120 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     validators: {}
   },
   setup(e) {
-    const n = e, t = Ee(), r = n.field, o = M(r.store, (s) => s), a = S(() => {
-      var s, g;
-      return n.type ? n.type : ((s = n.meta) == null ? void 0 : s.type) === "string" ? n.meta.format === "email" ? "email" : "text" : ((g = n.meta) == null ? void 0 : g.type) || "unknown";
-    }), d = S(() => o.value.value), u = S(
-      () => o.value.meta.errors.map((s) => s.message).filter(Boolean)
+    const n = e, t = Me(), s = n.field, l = $(s.store, (r) => r), a = O(() => {
+      var r, c;
+      return n.type ? n.type : ((r = n.meta) == null ? void 0 : r.type) === "string" ? n.meta.format === "email" ? "email" : "string" : ((c = n.meta) == null ? void 0 : c.type) || "unknown";
+    }), d = O(() => l.value.value), u = O(
+      () => l.value.meta.errors.map((r) => r.message).filter(Boolean)
     );
-    U(
+    L(
       () => [!!d.value],
       () => {
-        var s, g;
-        u.value.length && !d.value && !((s = n.meta) != null && s.required) && r.setValue(
-          ((g = n.meta) == null ? void 0 : g.nullableOrUndefined) === "undefined" ? void 0 : null
+        var r, c;
+        u.value.length && !d.value && !((r = n.meta) != null && r.required) && s.setValue(
+          ((c = n.meta) == null ? void 0 : c.nullableOrUndefined) === "undefined" ? void 0 : null
         );
       }
-    ), _e(() => {
-      var s, g;
-      !d.value && !((s = n.meta) != null && s.required) && ((g = n.meta) == null ? void 0 : g.nullableOrUndefined) === "null" && r.setValue(null);
+    ), $e(() => {
+      var r, c;
+      !d.value && !((r = n.meta) != null && r.required) && ((c = n.meta) == null ? void 0 : c.nullableOrUndefined) === "null" && s.setValue(null);
     });
-    const l = ee(!1), p = () => {
-      l.value = !0;
-    }, { addError: m, formSubmissionAttempts: b, removeError: ye } = V();
-    ke(() => {
-      b.value > 0 && (l.value = !0);
+    const o = le(!1), p = () => {
+      o.value = !0;
+    }, { addError: m, formSubmissionAttempts: h, removeError: we } = C();
+    Ue(() => {
+      h.value > 0 && (o.value = !0);
     });
-    const _ = S(() => !l.value && a.value !== "select" ? [] : u.value);
-    return U(
-      () => o.value.meta.errors,
+    const b = O(() => !o.value && a.value !== "select" ? [] : u.value);
+    return L(
+      () => l.value.meta.errors,
       () => {
-        o.value.meta.errors.length ? m({
+        l.value.meta.errors.length ? m({
           inputId: t,
-          errors: o.value.meta.errors.map((s) => s.message).filter(Boolean),
+          errors: l.value.meta.errors.map((r) => r.message).filter(Boolean),
           label: n.label
-        }) : ye(t);
+        }) : we(t);
       }
-    ), (s, g) => {
-      var C, F, x, B, j, K, P, R, D, z, J, W;
-      const he = L("v-btn");
-      return c(), E("div", Ke, [
-        a.value === "email" || a.value === "text" ? (c(), v(f(Y), {
-          key: 0,
+    ), (r, c) => {
+      var F, B, j, P, K, R, D, x, z, J, W, G, H, Q, X, Y, Z, ee;
+      const _e = I("v-textarea"), qe = I("v-btn");
+      return g(), k("div", He, [
+        a.value === "email" || a.value === "string" ? (g(), v(f(se), q({ key: 0 }, r.$attrs, {
           id: f(t),
-          required: (C = s.meta) == null ? void 0 : C.required,
-          "min-length": ((F = s.meta) == null ? void 0 : F.type) === "string" && ((x = s.meta) == null ? void 0 : x.minLength),
-          "max-length": ((B = s.meta) == null ? void 0 : B.type) === "string" && ((j = s.meta) == null ? void 0 : j.maxLength),
+          required: (F = r.meta) == null ? void 0 : F.required,
+          "min-length": ((B = r.meta) == null ? void 0 : B.type) === "string" && ((j = r.meta) == null ? void 0 : j.minLength),
+          "max-length": ((P = r.meta) == null ? void 0 : P.type) === "string" && ((K = r.meta) == null ? void 0 : K.maxLength),
           type: a.value,
-          name: s.field.name,
-          label: `${s.label}${(K = s.meta) != null && K.required ? " *" : ""}`,
-          "model-value": s.field.state.value,
-          "error-messages": _.value,
-          error: !!_.value.length,
-          "onUpdate:modelValue": s.field.handleChange,
+          name: r.field.name,
+          label: `${r.label}${(R = r.meta) != null && R.required ? " *" : ""}`,
+          "model-value": r.field.state.value,
+          "error-messages": b.value,
+          error: !!b.value.length,
+          "onUpdate:modelValue": r.field.handleChange,
           onBlur: p
-        }, null, 8, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : w("", !0),
-        a.value === "number" ? (c(), v(f(Y), {
-          key: 1,
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : T("", !0),
+        a.value === "text" ? (g(), v(_e, q({ key: 1 }, r.$attrs, {
           id: f(t),
-          required: (P = s.meta) == null ? void 0 : P.required,
-          min: ((R = s.meta) == null ? void 0 : R.type) === "number" && s.meta.minimum,
-          max: ((D = s.meta) == null ? void 0 : D.type) === "number" && s.meta.maximum,
+          required: (D = r.meta) == null ? void 0 : D.required,
+          "min-length": ((x = r.meta) == null ? void 0 : x.type) === "string" && ((z = r.meta) == null ? void 0 : z.minLength),
+          "max-length": ((J = r.meta) == null ? void 0 : J.type) === "string" && ((W = r.meta) == null ? void 0 : W.maxLength),
           type: a.value,
-          name: s.field.name,
-          label: `${s.label}${(z = s.meta) != null && z.required ? " *" : ""}`,
-          "model-value": s.field.state.value,
-          "error-messages": _.value,
-          error: !!_.value.length,
-          "onUpdate:modelValue": g[0] || (g[0] = (G) => {
-            s.field.handleChange(Number(G));
+          name: r.field.name,
+          label: `${r.label}${(G = r.meta) != null && G.required ? " *" : ""}`,
+          "model-value": r.field.state.value,
+          "error-messages": b.value,
+          error: !!b.value.length,
+          "onUpdate:modelValue": r.field.handleChange,
+          onBlur: p
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "model-value", "error-messages", "error", "onUpdate:modelValue"])) : T("", !0),
+        a.value === "number" ? (g(), v(f(se), q({ key: 2 }, r.$attrs, {
+          id: f(t),
+          required: (H = r.meta) == null ? void 0 : H.required,
+          min: ((Q = r.meta) == null ? void 0 : Q.type) === "number" && r.meta.minimum,
+          max: ((X = r.meta) == null ? void 0 : X.type) === "number" && r.meta.maximum,
+          type: a.value,
+          name: r.field.name,
+          label: `${r.label}${(Y = r.meta) != null && Y.required ? " *" : ""}`,
+          "model-value": r.field.state.value,
+          "error-messages": b.value,
+          error: !!b.value.length,
+          "onUpdate:modelValue": c[0] || (c[0] = (te) => {
+            r.field.handleChange(Number(te));
           }),
           onBlur: p
-        }, null, 8, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error"])) : w("", !0),
-        a.value === "select" || a.value === "multiple" ? (c(), E("div", {
-          key: 2,
-          class: Te(a.value !== "multiple" && "d-flex align-center")
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "model-value", "error-messages", "error"])) : T("", !0),
+        a.value === "select" || a.value === "multiple" ? (g(), k("div", {
+          key: 3,
+          class: Le(a.value !== "multiple" && "d-flex align-center")
         }, [
-          A(f(Me), {
+          M(f(Fe), q(r.$attrs, {
             id: f(t),
-            required: (J = s.meta) == null ? void 0 : J.required,
+            required: (Z = r.meta) == null ? void 0 : Z.required,
             multiple: a.value === "multiple",
             chips: a.value === "multiple",
-            name: s.field.name,
-            "model-value": s.field.state.value,
-            label: `${s.label}${(W = s.meta) != null && W.required ? " *" : ""}`,
-            items: s.options,
-            "error-messages": _.value,
-            error: !!_.value.length,
-            "onUpdate:modelValue": s.field.handleChange,
+            name: r.field.name,
+            "model-value": r.field.state.value,
+            label: `${r.label}${(ee = r.meta) != null && ee.required ? " *" : ""}`,
+            items: r.options,
+            "error-messages": b.value,
+            error: !!b.value.length,
+            "onUpdate:modelValue": r.field.handleChange,
             onBlur: p
-          }, null, 8, ["id", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue"]),
-          a.value !== "multiple" ? (c(), v(he, {
+          }), null, 16, ["id", "required", "multiple", "chips", "name", "model-value", "label", "items", "error-messages", "error", "onUpdate:modelValue"]),
+          a.value !== "multiple" ? (g(), v(qe, {
             key: 0,
             "variant-btn": "secondary",
-            "variant-icon": f(qe),
+            "variant-icon": f(Be),
             class: "mr-2",
             title: "Reset",
-            onClick: g[1] || (g[1] = (G) => s.field.handleChange(void 0))
-          }, null, 8, ["variant-icon"])) : w("", !0)
-        ], 2)) : w("", !0)
+            onClick: c[1] || (c[1] = (te) => r.field.handleChange(void 0))
+          }, null, 8, ["variant-icon"])) : T("", !0)
+        ], 2)) : T("", !0)
       ]);
     };
   }
-}), ce = /* @__PURE__ */ q({
+}), Se = /* @__PURE__ */ U({
+  inheritAttrs: !1,
   __name: "OmegaInput",
   props: {
     form: {},
@@ -454,86 +468,86 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
     type: {}
   },
   setup(e) {
-    const n = e, t = S(() => n.form.meta[n.name]), r = S(() => {
+    const n = e, t = O(() => n.form.meta[n.name]), s = O(() => {
       if (!t.value)
         throw new Error("Meta is undefined");
-      return ue(t.value);
+      return ve(t.value);
     });
-    return (o, a) => (c(), v(I(o.form.Field), {
-      name: o.name,
+    return (l, a) => (g(), v(A(l.form.Field), {
+      name: l.name,
       validators: {
-        onChange: r.value,
-        ...o.validators
+        onChange: s.value,
+        ...l.validators
       }
     }, {
-      default: O(({
+      default: E(({
         field: d
       }) => [
-        re(o.$slots, "default", {
+        me(l.$slots, "default", {
           field: d,
-          label: o.label,
-          options: o.options,
+          label: l.label,
+          options: l.options,
           meta: t.value,
-          type: o.type
+          type: l.type
         }, () => [
-          A(Pe, {
+          M(Qe, q(l.$attrs, {
             field: d,
-            label: o.label,
-            options: o.options,
+            label: l.label,
+            options: l.options,
             meta: t.value,
-            type: o.type
-          }, null, 8, ["field", "label", "options", "meta", "type"])
+            type: l.type
+          }), null, 16, ["field", "label", "options", "meta", "type"])
         ])
       ]),
       _: 3
     }, 8, ["name", "validators"]));
   }
-}), Re = {
+}), Xe = {
   key: 0,
   class: "error-alert"
-}, De = { class: "text-h6 mb-3" }, ze = { class: "font-weight-medium" }, Je = { class: "error-message" }, We = ["href"], Ge = { key: 1 }, He = /* @__PURE__ */ q({
+}, Ye = { class: "text-h6 mb-3" }, Ze = { class: "font-weight-medium" }, et = { class: "error-message" }, tt = ["href"], nt = { key: 1 }, rt = /* @__PURE__ */ U({
   __name: "OmegaErrors",
   setup(e) {
-    const { errors: n, formSubmissionAttempts: t, generalErrors: r } = V(), { trans: o } = se(), a = S(() => r.value ? r.value.filter(
+    const { errors: n, formSubmissionAttempts: t, generalErrors: s } = C(), { trans: l } = ge(), a = O(() => s.value ? s.value.filter(
       (d) => !!d
     ).flatMap(
       (d) => Object.values(d).filter((u) => !!u).flatMap(
         (u) => u.filter(
-          (l) => !!(l != null && l.message)
-        ).map((l) => l.message)
+          (o) => !!(o != null && o.message)
+        ).map((o) => o.message)
       )
     ) : []);
     return (d, u) => {
-      const l = L("v-icon"), p = L("v-alert");
-      return c(), v(we, null, {
-        default: O(() => [
-          f(t) > 0 && (f(n).length || a.value.length) ? (c(), E("div", Re, [
-            A(p, {
+      const o = I("v-icon"), p = I("v-alert");
+      return g(), v(Ve, null, {
+        default: E(() => [
+          f(t) > 0 && (f(n).length || a.value.length) ? (g(), k("div", Xe, [
+            M(p, {
               type: "error",
               variant: "tonal",
               role: "alert",
               "aria-live": "polite",
               class: "mb-4"
             }, {
-              default: O(() => [
-                T("div", De, k(f(o)("form.includes_error")) + ":", 1),
-                f(n).length ? (c(), v(I(f(n).length > 1 ? "ul" : "div"), {
+              default: E(() => [
+                _("div", Ye, w(f(l)("form.includes_error")) + ":", 1),
+                f(n).length ? (g(), v(A(f(n).length > 1 ? "ul" : "div"), {
                   key: 0,
                   class: "error-list"
                 }, {
-                  default: O(() => [
-                    (c(!0), E(H, null, Q(f(n), (m) => (c(), v(I(f(n).length > 1 ? "li" : "div"), {
+                  default: E(() => [
+                    (g(!0), k(ne, null, re(f(n), (m) => (g(), v(A(f(n).length > 1 ? "li" : "div"), {
                       key: m.inputId,
                       class: "error-item"
                     }, {
-                      default: O(() => [
-                        T("div", ze, k(m.label), 1),
-                        T("div", Je, [
-                          (c(), v(I(m.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
-                            default: O(() => [
-                              (c(!0), E(H, null, Q(m.errors, (b) => (c(), v(I(m.errors.length > 1 ? "li" : "span"), { key: b }, {
-                                default: O(() => [
-                                  X(k(b), 1)
+                      default: E(() => [
+                        _("div", Ze, w(m.label), 1),
+                        _("div", et, [
+                          (g(), v(A(m.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
+                            default: E(() => [
+                              (g(!0), k(ne, null, re(m.errors, (h) => (g(), v(A(m.errors.length > 1 ? "li" : "span"), { key: h }, {
+                                default: E(() => [
+                                  ae(w(h), 1)
                                 ]),
                                 _: 2
                               }, 1024))), 128))
@@ -541,68 +555,68 @@ const $e = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
                             _: 2
                           }, 1024))
                         ]),
-                        T("a", {
+                        _("a", {
                           href: `#${m.inputId}`,
                           class: "error-link"
                         }, [
-                          A(l, { icon: f(Ue) }, null, 8, ["icon"]),
-                          X(" " + k(f(o)("form.fix_input")), 1)
-                        ], 8, We)
+                          M(o, { icon: f(je) }, null, 8, ["icon"]),
+                          ae(" " + w(f(l)("form.fix_input")), 1)
+                        ], 8, tt)
                       ]),
                       _: 2
                     }, 1024))), 128))
                   ]),
                   _: 1
-                })) : (c(), E("span", Ge, k(a.value[0]), 1))
+                })) : (g(), k("span", nt, w(a.value[0]), 1))
               ]),
               _: 1
             })
-          ])) : w("", !0)
+          ])) : T("", !0)
         ]),
         _: 1
       });
     };
   }
-}), pe = /* @__PURE__ */ de(He, [["__scopeId", "data-v-55fda615"]]), ge = $(fe), ve = $(ce), be = $(pe);
-function Qe() {
-  customElements.get("omega-form") || customElements.define("omega-form", ge), customElements.get("omega-input") || customElements.define("omega-input", ve), customElements.get("omega-errors") || customElements.define("omega-errors", be);
+}), Oe = /* @__PURE__ */ be(rt, [["__scopeId", "data-v-55fda615"]]), Ee = V(ye), ke = V(Se), Te = V(Oe);
+function at() {
+  customElements.get("omega-form") || customElements.define("omega-form", Ee), customElements.get("omega-input") || customElements.define("omega-input", ke), customElements.get("omega-errors") || customElements.define("omega-errors", Te);
 }
-const Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ie = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  OmegaErrors: pe,
-  OmegaErrorsCE: be,
-  OmegaErrorsContext: $e,
-  OmegaForm: fe,
-  OmegaFormCE: ge,
-  OmegaInput: ce,
-  OmegaInputCE: ve,
-  duplicateSchema: Fe,
-  generateInputStandardSchemaFromFieldMeta: ue,
-  generateMetaFromSchema: le,
-  nullableInput: xe,
-  registerOmegaForm: Qe,
-  useOmegaForm: me
+  OmegaErrors: Oe,
+  OmegaErrorsCE: Te,
+  OmegaErrorsContext: Ke,
+  OmegaForm: ye,
+  OmegaFormCE: Ee,
+  OmegaInput: Se,
+  OmegaInputCE: ke,
+  duplicateSchema: ze,
+  generateInputStandardSchemaFromFieldMeta: ve,
+  generateMetaFromSchema: ce,
+  nullableInput: Je,
+  registerOmegaForm: at,
+  useOmegaForm: he
 }, Symbol.toStringTag, { value: "Module" }));
-function Xe(e) {
-  for (const n in Z)
-    e.component(n, Z[n]);
+function st(e) {
+  for (const n in ie)
+    e.component(n, ie[n]);
 }
-const at = { install: Xe };
+const ft = { install: st };
 export {
-  pe as OmegaErrors,
-  be as OmegaErrorsCE,
-  $e as OmegaErrorsContext,
-  fe as OmegaForm,
-  ge as OmegaFormCE,
-  ce as OmegaInput,
-  ve as OmegaInputCE,
-  at as default,
-  Fe as duplicateSchema,
-  ue as generateInputStandardSchemaFromFieldMeta,
-  le as generateMetaFromSchema,
-  xe as nullableInput,
-  rt as provideIntl,
-  Qe as registerOmegaForm,
-  se as useIntl,
-  me as useOmegaForm
+  Oe as OmegaErrors,
+  Te as OmegaErrorsCE,
+  Ke as OmegaErrorsContext,
+  ye as OmegaForm,
+  Ee as OmegaFormCE,
+  Se as OmegaInput,
+  ke as OmegaInputCE,
+  ft as default,
+  ze as duplicateSchema,
+  ve as generateInputStandardSchemaFromFieldMeta,
+  ce as generateMetaFromSchema,
+  Je as nullableInput,
+  dt as provideIntl,
+  at as registerOmegaForm,
+  ge as useIntl,
+  he as useOmegaForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.1.3",
@@ -36,8 +36,8 @@
     "./dist/vue-components.css": "./dist/vue-components.css"
   },
   "dependencies": {
-    "@effect-app/vue": "2.39.3",
-    "effect-app": "2.37.1"
+    "@effect-app/vue": "2.39.4",
+    "effect-app": "2.38.0"
   },
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -18,6 +18,7 @@ import { useIntl } from "../../utils"
 
 export type TypeOverride =
   | "string"
+  | "text"
   | "number"
   | "select"
   | "multiple"

package/src/components/OmegaForm/OmegaInput.vue

@@ -1,54 +1,37 @@
 <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
-        >
-      }"
-    >
-      <slot
-        :field="field"
-        :label="label"
-        :options="options"
-        :meta="meta"
-        :type="type"
+  <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
       >
-        <OmegaInternalInput
-          :field="field"
-          :label="label"
-          :options="options"
-          :meta="meta"
-          :type="type"
-        />
+    }">
+      <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>
   </component>
@@ -67,6 +50,10 @@ import {
 import OmegaInternalInput from "./OmegaInternalInput.vue"
 import type { FieldApi } from "@tanstack/vue-form"
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const props = defineProps<{
   form: FormType<From, To> & {
     meta: MetaRecord<To>

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,65 +1,31 @@
 <template>
   <div class="omega-input">
-    <v-text-field
-      v-if="fieldType === 'email' || fieldType === 'text'"
-      :id="id"
-      :required="meta?.required"
-      :min-length="meta?.type === 'string' && meta?.minLength"
-      :max-length="meta?.type === 'string' && meta?.maxLength"
-      :type="fieldType"
-      :name="field.name"
-      :label="`${label}${meta?.required ? ' *' : ''}`"
-      :model-value="field.state.value"
-      :error-messages="showedErrors"
-      :error="!!showedErrors.length"
-      @update:model-value="field.handleChange"
-      @blur="setRealDirty"
-    />
-    <v-text-field
-      v-if="fieldType === 'number'"
-      :id="id"
-      :required="meta?.required"
-      :min="meta?.type === 'number' && meta.minimum"
-      :max="meta?.type === 'number' && meta.maximum"
-      :type="fieldType"
-      :name="field.name"
-      :label="`${label}${meta?.required ? ' *' : ''}`"
-      :model-value="field.state.value"
-      :error-messages="showedErrors"
-      :error="!!showedErrors.length"
-      @update:model-value="
+    <v-text-field v-bind="$attrs" v-if="fieldType === 'email' || fieldType === 'string'" :id="id"
+      :required="meta?.required" :min-length="meta?.type === 'string' && meta?.minLength"
+      :max-length="meta?.type === 'string' && meta?.maxLength" :type="fieldType" :name="field.name"
+      :label="`${label}${meta?.required ? ' *' : ''}`" :model-value="field.state.value" :error-messages="showedErrors"
+      :error="!!showedErrors.length" @update:model-value="field.handleChange" @blur="setRealDirty" />
+    <v-textarea v-bind="$attrs" v-if="fieldType === 'text'" :id="id" :required="meta?.required"
+      :min-length="meta?.type === 'string' && meta?.minLength" :max-length="meta?.type === 'string' && meta?.maxLength"
+      :type="fieldType" :name="field.name" :label="`${label}${meta?.required ? ' *' : ''}`"
+      :model-value="field.state.value" :error-messages="showedErrors" :error="!!showedErrors.length"
+      @update:model-value="field.handleChange" @blur="setRealDirty" />
+    <v-text-field v-bind="$attrs" v-if="fieldType === 'number'" :id="id" :required="meta?.required"
+      :min="meta?.type === 'number' && meta.minimum" :max="meta?.type === 'number' && meta.maximum" :type="fieldType"
+      :name="field.name" :label="`${label}${meta?.required ? ' *' : ''}`" :model-value="field.state.value"
+      :error-messages="showedErrors" :error="!!showedErrors.length" @update:model-value="
         (e: any) => {
           field.handleChange(Number(e))
         }
-      "
-      @blur="setRealDirty"
-    />
-    <div
-      v-if="fieldType === 'select' || fieldType === 'multiple'"
-      :class="fieldType !== 'multiple' && 'd-flex align-center'"
-    >
-      <v-select
-        :id="id"
-        :required="meta?.required"
-        :multiple="fieldType === 'multiple'"
-        :chips="fieldType === 'multiple'"
-        :name="field.name"
-        :model-value="field.state.value"
-        :label="`${label}${meta?.required ? ' *' : ''}`"
-        :items="options"
-        :error-messages="showedErrors"
-        :error="!!showedErrors.length"
-        @update:model-value="field.handleChange"
-        @blur="setRealDirty"
-      />
-      <v-btn
-        v-if="fieldType !== 'multiple'"
-        variant-btn="secondary"
-        :variant-icon="mdiRefresh"
-        class="mr-2"
-        title="Reset"
-        @click="field.handleChange(undefined)"
-      ></v-btn>
+      " @blur="setRealDirty" />
+    <div v-if="fieldType === 'select' || fieldType === 'multiple'"
+      :class="fieldType !== 'multiple' && 'd-flex align-center'">
+      <v-select v-bind="$attrs" :id="id" :required="meta?.required" :multiple="fieldType === 'multiple'"
+        :chips="fieldType === 'multiple'" :name="field.name" :model-value="field.state.value"
+        :label="`${label}${meta?.required ? ' *' : ''}`" :items="options" :error-messages="showedErrors"
+        :error="!!showedErrors.length" @update:model-value="field.handleChange" @blur="setRealDirty" />
+      <v-btn v-if="fieldType !== 'multiple'" variant-btn="secondary" :variant-icon="mdiRefresh" class="mr-2"
+        title="Reset" @click="field.handleChange(undefined)"></v-btn>
     </div>
   </div>
 </template>
@@ -107,6 +73,10 @@ const props = defineProps<{
   validators?: FieldValidators<To>
 }>()
 
+defineOptions({
+  inheritAttrs: false
+})
+
 const id = useId()
 
 const fieldApi = props.field
@@ -117,7 +87,7 @@ const fieldType = computed(() => {
   if (props.type) return props.type
   if (props.meta?.type === "string") {
     if (props.meta.format === "email") return "email"
-    return "text"
+    return "string"
   }
   return props.meta?.type || "unknown"
 })
@@ -208,7 +178,8 @@ watch(
 
   & .v-messages {
     transition: all 0.2s;
-    > * {
+
+    >* {
       transition-duration: 0s !important;
     }
   }