@effect-app/vue-components 0.4.3 → 0.4.5

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

@@ -0,0 +1,26 @@
+import type { FieldValidators, NestedKeyOf, TypeOverride } from "./OmegaFormStuff";
+import type { InputProps } from "./InputProps";
+declare const _default: <From, To extends Record<PropertyKey, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & {
+        name: NestedKeyOf<To>;
+        label: string;
+        validators?: FieldValidators<From>;
+        options?: {
+            title: string;
+            value: string;
+        }[];
+        type?: TypeOverride;
+    } & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default: (props: InputProps<To>) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,6 +1,7 @@
 import { type Record, S } from "effect-app";
-import { type NestedKeyOf, type FilterItems, type FormProps, type MetaRecord, type OmegaFormApi, type OmegaInputProps } from "./OmegaFormStuff";
-import { type DefineComponent } from "vue";
+import { type NestedKeyOf, type FilterItems, type FormProps, type MetaRecord, type OmegaFormApi } from "./OmegaFormStuff";
+import { type InjectionKey } from "vue";
+import OmegaFormInput from "./OmegaFormInput.vue";
 type keysRule<T> = {
     keys?: NestedKeyOf<T>[];
     banKeys?: "You should only use one of banKeys or keys, not both, moron";
@@ -24,8 +25,9 @@ interface OF<To, From> extends OmegaFormApi<To, From> {
     filterItems?: FilterItems;
     clear: () => void;
 }
-export interface OmegaFormReturn<To, From> extends OF<To, From> {
-    Input: DefineComponent<Omit<OmegaInputProps<From, To>, "form">, {}, {}>;
+export declare const OmegaFormKey: InjectionKey<OF<any, any>>;
+export interface OmegaFormReturn<To extends Record<PropertyKey, any>, From> extends OF<To, From> {
+    Input: typeof OmegaFormInput<From, To>;
 }
 export declare const useOmegaForm: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>>(schema: S.Schema<From, To, never>, tanstackFormOptions?: NoInfer<FormProps<To, From>>, omegaConfig?: OmegaConfig<From>) => OmegaFormReturn<To, From>;
 export {};

package/dist/vue-components.es11.js

@@ -1,6 +1,6 @@
 import { defineComponent as h, computed as u, watch as F, createElementBlock as c, openBlock as d, withModifiers as y, createElementVNode as O, unref as i, renderSlot as l, createCommentVNode as E, Fragment as M } from "vue";
 import { useStore as v } from "@tanstack/vue-form";
-import { getOmegaStore as V } from "./vue-components.es19.js";
+import { getOmegaStore as V } from "./vue-components.es21.js";
 import { provideOmegaErrors as w } from "./vue-components.es5.js";
 import { useOmegaForm as I } from "./vue-components.es6.js";
 const k = ["disabled"], j = /* @__PURE__ */ h({

package/dist/vue-components.es17.js

@@ -1,4 +1,4 @@
-import { isFunction as c } from "./vue-components.es18.js";
+import { isFunction as c } from "./vue-components.es19.js";
 const s = c, t = (o) => typeof o == "object" && o !== null, i = (o) => t(o) || s(o);
 export {
   s as isFunction,

package/dist/vue-components.es18.js

@@ -1,4 +1,34 @@
-const o = (n) => typeof n == "function";
+import { defineComponent as a, inject as t, createBlock as n, openBlock as m, mergeProps as p, unref as s, withCtx as i, renderSlot as l, normalizeProps as f, guardReactiveProps as u } from "vue";
+import d from "./vue-components.es4.js";
+import { OmegaFormKey as c } from "./vue-components.es6.js";
+const w = /* @__PURE__ */ a({
+  __name: "OmegaFormInput",
+  props: {
+    name: {},
+    label: {},
+    validators: {},
+    options: {},
+    type: {}
+  },
+  setup(g) {
+    const o = t(c);
+    if (!o)
+      throw new Error("OmegaFormInput must be used within an OmegaForm context");
+    return (e, b) => (m(), n(d, p(e.$props, {
+      form: s(o),
+      name: e.name,
+      label: e.label,
+      validators: e.validators,
+      options: e.options,
+      type: e.type
+    }), {
+      default: i((r) => [
+        l(e.$slots, "default", f(u(r)))
+      ]),
+      _: 3
+    }, 16, ["form", "name", "label", "validators", "options", "type"]));
+  }
+});
 export {
-  o as isFunction
+  w as default
 };

package/dist/vue-components.es19.js

@@ -1,13 +1,4 @@
-import { useStore as u } from "@tanstack/vue-form";
-import { computed as f } from "vue";
-function c(o, t) {
-  return f(() => t ? u(o.store, (n) => {
-    const r = {};
-    for (const e of t)
-      r[e] = n[e];
-    return r;
-  }).value : {});
-}
+const o = (n) => typeof n == "function";
 export {
-  c as getOmegaStore
+  o as isFunction
 };

package/dist/vue-components.es20.js

@@ -1,98 +1,4 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as B, getCurrentInstance as L, useId as P, computed as l, watch as C, onMounted as $, ref as S, watchEffect as z, renderSlot as A, normalizeProps as D, guardReactiveProps as F, createElementVNode as M, normalizeClass as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as j, mergeProps as G } from "vue";
-import { useStore as H } from "@tanstack/vue-form";
-import { useOmegaErrors as J } from "./vue-components.es5.js";
-import K from "./vue-components.es22.js";
-
-const ee = /* @__PURE__ */ B({
-  inheritAttrs: !1,
-  __name: "OmegaInternalInput",
-  props: {
-    field: {},
-    meta: {},
-    label: {},
-    options: {},
-    type: {},
-    validators: {}
-  },
-  setup(q) {
-    const e = q, o = L(), x = o == null ? void 0 : o.appContext.components.VTextField, s = P(), u = e.field, a = H(u.store, (t) => t), f = l(() => {
-      var t, r;
-      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
-    }), n = l(() => a.value.value), d = l(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
-      )
-    );
-    C(
-      () => [!!n.value],
-      () => {
-        var t, r;
-        d.value.length && !n.value && !((t = e.meta) != null && t.required) && u.setValue(
-          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
-        );
-      }
-    ), $(() => {
-      var t, r;
-      !n.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
-    });
-    const { addError: I, removeError: O, showErrors: _, showErrorsOn: k } = J(), i = S(!1);
-    z(() => {
-      (_.value || k === "onChange") && (i.value = !0);
-    });
-    const m = () => {
-      i.value = !0;
-    };
-    $(() => {
-      n.value && m();
-    });
-    const v = l(() => !i.value && f.value !== "select" ? [] : d.value);
-    C(
-      () => a.value.meta.errors,
-      () => {
-        a.value.meta.errors.length ? I({
-          inputId: s,
-          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
-          label: e.label
-        }) : O(s);
-      }
-    );
-    const p = l(() => {
-      var t, r, c, g, y, h, b, E, V, w;
-      return {
-        id: s,
-        required: (t = e.meta) == null ? void 0 : t.required,
-        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
-        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
-        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
-        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
-        name: e.field.name,
-        modelValue: e.field.state.value,
-        errorMessages: v.value,
-        error: !!v.value.length,
-        field: e.field,
-        setRealDirty: m,
-        type: f.value,
-        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
-        options: e.options
-      };
-    });
-    return (t, r) => A(t.$slots, "default", D(F(p.value)), () => [
-      M("div", {
-        class: N(t.$attrs.class),
-        onFocusout: m
-      }, [
-        U(x) ? (j(), R(K, G({
-          key: 0,
-          "input-props": p.value
-        }, t.$attrs, {
-          "vuetify-value": p.value.field.state.value
-        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
-      ], 34)
-    ]);
-  }
-});
+import f from "./vue-components.es18.js";
 export {
-  ee as default
+  f as default
 };

package/dist/vue-components.es21.js

@@ -1,4 +1,13 @@
-import f from "./vue-components.es20.js";
+import { useStore as u } from "@tanstack/vue-form";
+import { computed as f } from "vue";
+function c(o, t) {
+  return f(() => t ? u(o.store, (n) => {
+    const r = {};
+    for (const e of t)
+      r[e] = n[e];
+    return r;
+  }).value : {});
+}
 export {
-  f as default
+  c as getOmegaStore
 };

package/dist/vue-components.es22.js

@@ -1,117 +1,98 @@
-import { defineComponent as P, resolveComponent as i, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
-const b = /* @__PURE__ */ P({
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import { defineComponent as B, getCurrentInstance as L, useId as P, computed as l, watch as C, onMounted as $, ref as S, watchEffect as z, renderSlot as A, normalizeProps as D, guardReactiveProps as F, createElementVNode as M, normalizeClass as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as j, mergeProps as G } from "vue";
+import { useStore as H } from "@tanstack/vue-form";
+import { useOmegaErrors as J } from "./vue-components.es5.js";
+import K from "./vue-components.es24.js";
+
+const ee = /* @__PURE__ */ B({
   inheritAttrs: !1,
-  __name: "OmegaInputVuetify",
+  __name: "OmegaInternalInput",
   props: {
-    inputProps: {},
-    vuetifyValue: {}
+    field: {},
+    meta: {},
+    label: {},
+    options: {},
+    type: {},
+    validators: {}
   },
-  emits: ["focus", "blur"],
-  setup(y) {
-    return (e, r) => {
-      const a = i("v-checkbox"), u = i("v-text-field"), t = i("v-textarea"), m = i("v-select"), d = i("v-autocomplete");
-      return o(), g("div", {
-        class: "omega-input",
-        onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
-        onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
+  setup(q) {
+    const e = q, o = L(), x = o == null ? void 0 : o.appContext.components.VTextField, s = P(), u = e.field, a = H(u.store, (t) => t), f = l(() => {
+      var t, r;
+      return e.type ? e.type : ((t = e.meta) == null ? void 0 : t.type) === "string" ? e.meta.format === "email" ? "email" : "string" : ((r = e.meta) == null ? void 0 : r.type) || "unknown";
+    }), n = l(() => a.value.value), d = l(
+      () => (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
+      )
+    );
+    C(
+      () => [!!n.value],
+      () => {
+        var t, r;
+        d.value.length && !n.value && !((t = e.meta) != null && t.required) && u.setValue(
+          ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
+        );
+      }
+    ), $(() => {
+      var t, r;
+      !n.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
+    });
+    const { addError: I, removeError: O, showErrors: _, showErrorsOn: k } = J(), i = S(!1);
+    z(() => {
+      (_.value || k === "onChange") && (i.value = !0);
+    });
+    const m = () => {
+      i.value = !0;
+    };
+    $(() => {
+      n.value && m();
+    });
+    const v = l(() => !i.value && f.value !== "select" ? [] : d.value);
+    C(
+      () => a.value.meta.errors,
+      () => {
+        a.value.meta.errors.length ? I({
+          inputId: s,
+          errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
+          label: e.label
+        }) : O(s);
+      }
+    );
+    const p = l(() => {
+      var t, r, c, g, y, h, b, E, V, w;
+      return {
+        id: s,
+        required: (t = e.meta) == null ? void 0 : t.required,
+        minLength: ((r = e.meta) == null ? void 0 : r.type) === "string" && ((c = e.meta) == null ? void 0 : c.minLength),
+        maxLength: ((g = e.meta) == null ? void 0 : g.type) === "string" && ((y = e.meta) == null ? void 0 : y.maxLength),
+        max: ((h = e.meta) == null ? void 0 : h.type) === "number" && ((b = e.meta) == null ? void 0 : b.maximum),
+        min: ((E = e.meta) == null ? void 0 : E.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
+        name: e.field.name,
+        modelValue: e.field.state.value,
+        errorMessages: v.value,
+        error: !!v.value.length,
+        field: e.field,
+        setRealDirty: m,
+        type: f.value,
+        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
+        options: e.options
+      };
+    });
+    return (t, r) => A(t.$slots, "default", D(F(p.value)), () => [
+      M("div", {
+        class: N(t.$attrs.class),
+        onFocusout: m
       }, [
-        e.inputProps.type === "boolean" ? (o(), n(a, s({
+        U(x) ? (j(), R(K, G({
           key: 0,
-          id: e.inputProps.id,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          ripple: ""
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
-        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
-        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(u, s({
-          key: 1,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "text" ? (o(), n(t, s({
-          key: 2,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          "min-length": e.inputProps.minLength,
-          "max-length": e.inputProps.maxLength,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "number" ? (o(), n(u, s({
-          key: 3,
-          id: e.inputProps.id,
-          required: e.inputProps.required,
-          min: e.inputProps.min,
-          max: e.inputProps.max,
-          type: e.inputProps.type,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          "onUpdate:modelValue": r[1] || (r[1] = (p) => {
-            e.inputProps.field.handleChange(Number(p));
-          })
-        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
-        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, s({
-          key: 4,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "select",
-          required: e.inputProps.required,
-          multiple: e.inputProps.type === "multiple",
-          chips: e.inputProps.type === "multiple",
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
-        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, s({
-          key: 5,
-          id: e.inputProps.id,
-          clearable: e.inputProps.type === "autocomplete",
-          multiple: e.inputProps.type === "autocompletemultiple",
-          required: e.inputProps.required,
-          name: e.inputProps.name,
-          label: e.inputProps.label,
-          items: e.inputProps.options,
-          "error-messages": e.inputProps.errorMessages,
-          error: e.inputProps.error,
-          chips: e.inputProps.type === "autocompletemultiple"
-        }, e.$attrs, {
-          "model-value": e.vuetifyValue,
-          onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
-          "onUpdate:modelValue": e.inputProps.field.handleChange
-        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
-      ], 32);
-    };
+          "input-props": p.value
+        }, t.$attrs, {
+          "vuetify-value": p.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
+      ], 34)
+    ]);
   }
 });
 export {
-  b as default
+  ee as default
 };

package/dist/vue-components.es23.js

@@ -0,0 +1,4 @@
+import f from "./vue-components.es22.js";
+export {
+  f as default
+};

package/dist/vue-components.es24.js

@@ -1,6 +1,117 @@
-(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import o from "./vue-components.es22.js";
-
+import { defineComponent as P, resolveComponent as i, createElementBlock as g, openBlock as o, createBlock as n, createCommentVNode as l, mergeProps as s } from "vue";
+const b = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "OmegaInputVuetify",
+  props: {
+    inputProps: {},
+    vuetifyValue: {}
+  },
+  emits: ["focus", "blur"],
+  setup(y) {
+    return (e, r) => {
+      const a = i("v-checkbox"), u = i("v-text-field"), t = i("v-textarea"), m = i("v-select"), d = i("v-autocomplete");
+      return o(), g("div", {
+        class: "omega-input",
+        onFocusout: r[4] || (r[4] = (p) => e.$emit("blur", p)),
+        onFocusin: r[5] || (r[5] = (p) => e.$emit("focus", p))
+      }, [
+        e.inputProps.type === "boolean" ? (o(), n(a, s({
+          key: 0,
+          id: e.inputProps.id,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          ripple: ""
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onChange: r[0] || (r[0] = (p) => e.inputProps.field.handleChange(p.target.checked))
+        }), null, 16, ["id", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
+        e.inputProps.type === "email" || e.inputProps.type === "string" ? (o(), n(u, s({
+          key: 1,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "text" ? (o(), n(t, s({
+          key: 2,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          "min-length": e.inputProps.minLength,
+          "max-length": e.inputProps.maxLength,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "required", "min-length", "max-length", "type", "name", "label", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "number" ? (o(), n(u, s({
+          key: 3,
+          id: e.inputProps.id,
+          required: e.inputProps.required,
+          min: e.inputProps.min,
+          max: e.inputProps.max,
+          type: e.inputProps.type,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          "onUpdate:modelValue": r[1] || (r[1] = (p) => {
+            e.inputProps.field.handleChange(Number(p));
+          })
+        }), null, 16, ["id", "required", "min", "max", "type", "name", "label", "error-messages", "error", "model-value"])) : l("", !0),
+        e.inputProps.type === "select" || e.inputProps.type === "multiple" ? (o(), n(m, s({
+          key: 4,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "select",
+          required: e.inputProps.required,
+          multiple: e.inputProps.type === "multiple",
+          chips: e.inputProps.type === "multiple",
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onClear: r[2] || (r[2] = (p) => e.inputProps.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "clearable", "required", "multiple", "chips", "name", "label", "items", "error-messages", "error", "model-value", "onUpdate:modelValue"])) : l("", !0),
+        e.inputProps.type === "autocomplete" || e.inputProps.type === "autocompletemultiple" ? (o(), n(d, s({
+          key: 5,
+          id: e.inputProps.id,
+          clearable: e.inputProps.type === "autocomplete",
+          multiple: e.inputProps.type === "autocompletemultiple",
+          required: e.inputProps.required,
+          name: e.inputProps.name,
+          label: e.inputProps.label,
+          items: e.inputProps.options,
+          "error-messages": e.inputProps.errorMessages,
+          error: e.inputProps.error,
+          chips: e.inputProps.type === "autocompletemultiple"
+        }, e.$attrs, {
+          "model-value": e.vuetifyValue,
+          onClear: r[3] || (r[3] = (p) => e.inputProps.field.handleChange(void 0)),
+          "onUpdate:modelValue": e.inputProps.field.handleChange
+        }), null, 16, ["id", "clearable", "multiple", "required", "name", "label", "items", "error-messages", "error", "chips", "model-value", "onUpdate:modelValue"])) : l("", !0)
+      ], 32);
+    };
+  }
+});
 export {
-  o as default
+  b as default
 };

package/dist/vue-components.es26.js

@@ -0,0 +1,6 @@
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(o,t){const a=t.prototype.connectedCallback;return t.prototype.connectedCallback=function(){if(a&&a.call(this),this.shadowRoot){const i=document.createElement("style");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;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:none;display:block;min-width:auto;height:auto;padding:.5em .5em .5em 1em}")),this.shadowRoot.appendChild(i)}},e.call(window.customElements,o,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+import o from "./vue-components.es24.js";
+
+export {
+  o as default
+};

package/dist/vue-components.es4.js

@@ -1,6 +1,6 @@
 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.es7.js";
-import b from "./vue-components.es20.js";
+import b from "./vue-components.es22.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

package/dist/vue-components.es6.js

@@ -1,72 +1,72 @@
-import { useForm as P } from "@tanstack/vue-form";
-import { S as A } from "effect-app";
-import { generateMetaFromSchema as N } from "./vue-components.es7.js";
-import { computed as b, onUnmounted as R, onMounted as p, onBeforeUnmount as q, defineComponent as D, h as J } from "vue";
-import { isObject as K } from "./vue-components.es17.js";
-import M from "./vue-components.es4.js";
-const G = (w, u, i) => {
+import { useForm as I } from "@tanstack/vue-form";
+import { S as N } from "effect-app";
+import { generateMetaFromSchema as R } from "./vue-components.es7.js";
+import { computed as b, onUnmounted as A, onMounted as D, onBeforeUnmount as J, provide as K } from "vue";
+import { isObject as q } from "./vue-components.es17.js";
+import M from "./vue-components.es18.js";
+const x = Symbol("OmegaForm"), H = (w, s, i) => {
   if (!w) throw new Error("Schema is required");
-  const V = A.standardSchemaV1(w), { filterItems: L, meta: n } = N(w), c = b(() => {
+  const V = N.standardSchemaV1(w), { filterItems: L, meta: t } = R(w), d = b(() => {
     var l;
     if ((l = i == null ? void 0 : i.persistency) != null && l.id)
       return i.persistency.id;
-    const e = window.location.pathname, r = Object.keys(n);
+    const e = window.location.pathname, r = Object.keys(t);
     return `${e}-${r.join("-")}`;
   }), U = () => {
     const e = new URLSearchParams(window.location.search);
-    e.delete(c.value);
+    e.delete(d.value);
     const r = new URL(window.location.href);
     r.search = e.toString(), window.history.replaceState({}, "", r.toString());
   };
-  function a(e, r) {
+  function v(e, r) {
     for (const l in r)
-      r[l] && K(r[l]) ? (e[l] || (e[l] = {}), a(e[l], r[l])) : e[l] = r[l];
+      r[l] && q(r[l]) ? (e[l] || (e[l] = {}), v(e[l], r[l])) : e[l] = r[l];
     return e;
   }
   const j = b(() => {
     var l;
-    if (u != null && u.defaultValues && !((l = i == null ? void 0 : i.persistency) != null && l.overrideDefaultValues))
-      return u == null ? void 0 : u.defaultValues;
+    if (s != null && s.defaultValues && !((l = i == null ? void 0 : i.persistency) != null && l.overrideDefaultValues))
+      return s == null ? void 0 : s.defaultValues;
     let e;
     const r = i == null ? void 0 : i.persistency;
     if (!(r != null && r.policies) || r.policies.length === 0) return {};
     if (r.policies.includes("querystring"))
       try {
-        const t = new URLSearchParams(window.location.search).get(c.value);
-        U(), t && (e = JSON.parse(t));
-      } catch (s) {
-        console.error(s);
+        const c = new URLSearchParams(window.location.search).get(d.value);
+        U(), c && (e = JSON.parse(c));
+      } catch (u) {
+        console.error(u);
       }
     if (
       // query string has higher priority than local/session storage
       !e && (r.policies.includes("local") || r.policies.includes("session"))
     ) {
-      const s = r.policies.includes("local") ? localStorage : sessionStorage;
-      if (s)
+      const u = r.policies.includes("local") ? localStorage : sessionStorage;
+      if (u)
         try {
-          const t = JSON.parse(
-            s.getItem(c.value) || "{}"
+          const c = JSON.parse(
+            u.getItem(d.value) || "{}"
           );
-          s.removeItem(c.value), e = t;
-        } catch (t) {
-          console.error(t);
+          u.removeItem(d.value), e = c;
+        } catch (c) {
+          console.error(c);
         }
     }
-    if (e ?? (e = {}), (u == null ? void 0 : u.defaultValues) == null)
+    if (e ?? (e = {}), (s == null ? void 0 : s.defaultValues) == null)
       return e;
     {
-      const s = u == null ? void 0 : u.defaultValues;
-      return a(s, e);
+      const u = s == null ? void 0 : s.defaultValues;
+      return v(u, e);
     }
-  }), d = P({
-    ...u,
+  }), n = I({
+    ...s,
     validators: {
       onSubmit: V,
-      ...(u == null ? void 0 : u.validators) || {}
+      ...(s == null ? void 0 : s.validators) || {}
     },
-    onSubmit: u != null && u.onSubmit ? ({ formApi: e, meta: r, value: l }) => {
-      var s;
-      return (s = u.onSubmit) == null ? void 0 : s.call(u, {
+    onSubmit: s != null && s.onSubmit ? ({ formApi: e, meta: r, value: l }) => {
+      var u;
+      return (u = s.onSubmit) == null ? void 0 : u.call(s, {
         formApi: e,
         meta: r,
         value: l
@@ -74,79 +74,62 @@ const G = (w, u, i) => {
     } : void 0,
     defaultValues: j.value
   }), E = () => {
-    Object.keys(n).forEach((e) => {
-      d.setFieldValue(e, void 0);
+    Object.keys(t).forEach((e) => {
+      n.setFieldValue(e, void 0);
     });
-  }, f = (e) => e.reduce(
+  }, S = (e) => e.reduce(
     (r, l) => {
-      const s = l.split(".");
-      return s.reduce((t, o, I) => (I === s.length - 1 ? t[o] = d.getFieldValue(l) : t[o] = t[o] ?? {}, t[o]), r), r;
+      const u = l.split(".");
+      return u.reduce((c, o, P) => (P === u.length - 1 ? c[o] = n.getFieldValue(l) : c[o] = c[o] ?? {}, c[o]), r), r;
     },
     {}
-  ), v = (e) => {
+  ), f = (e) => {
     if (e) {
       if (Array.isArray(e.keys))
-        return f(e.keys);
+        return S(e.keys);
       if (Array.isArray(e.banKeys)) {
-        const r = Object.keys(n).filter(
+        const r = Object.keys(t).filter(
           (l) => {
-            var s;
-            return (s = e.banKeys) == null ? void 0 : s.includes(l);
+            var u;
+            return (u = e.banKeys) == null ? void 0 : u.includes(l);
           }
         );
-        return f(r);
+        return S(r);
       }
-      return d.store.state.values;
+      return n.store.state.values;
     }
   }, h = () => {
     const e = i == null ? void 0 : i.persistency;
     if (!(!(e != null && e.policies) || e.policies.length === 0) && (e.policies.includes("local") || e.policies.includes("session"))) {
       const r = e.policies.includes("local") ? localStorage : sessionStorage;
       if (!r) return;
-      const l = v(e);
-      return r.setItem(c.value, JSON.stringify(l));
+      const l = f(e);
+      return r.setItem(d.value, JSON.stringify(l));
     }
-  }, S = () => {
+  }, a = () => {
     const e = i == null ? void 0 : i.persistency;
     if (!(!(e != null && e.policies) || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = v(e), l = new URLSearchParams(window.location.search);
-      l.set(c.value, JSON.stringify(r));
-      const s = new URL(window.location.href);
-      s.search = l.toString(), window.history.replaceState({}, "", s.toString());
+      const r = f(e), l = new URLSearchParams(window.location.search);
+      l.set(d.value, JSON.stringify(r));
+      const u = new URL(window.location.href);
+      u.search = l.toString(), window.history.replaceState({}, "", u.toString());
     }
   };
-  R(h), p(() => {
-    window.addEventListener("beforeunload", h), window.addEventListener("blur", S);
-  }), q(() => {
-    window.removeEventListener("beforeunload", h), window.removeEventListener("blur", S);
+  A(h), D(() => {
+    window.addEventListener("beforeunload", h), window.addEventListener("blur", a);
+  }), J(() => {
+    window.removeEventListener("beforeunload", h), window.removeEventListener("blur", a);
   });
-  const y = Object.assign(d, {
-    meta: n,
+  const y = Object.assign(n, {
+    meta: t,
     filterItems: L,
     clear: E
   });
-  return Object.assign(y, {
-    Input: D({
-      name: "FormInput",
-      inheritAttrs: !0,
-      setup(e, { attrs: r, slots: l }) {
-        const s = r.name, t = r.label;
-        if (!s || !t)
-          throw new Error("OmegaForm.Input requires name and label props");
-        return () => J(
-          M,
-          {
-            ...r,
-            name: s,
-            label: t,
-            form: y
-          },
-          l
-        );
-      }
-    })
+  return K(x, y), Object.assign(y, {
+    Input: M
   });
 };
 export {
-  G as useOmegaForm
+  x as OmegaFormKey,
+  H as useOmegaForm
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -52,8 +52,8 @@
   "dependencies": {
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.41.0",
-    "effect-app": "2.40.0"
+    "@effect-app/vue": "2.41.1",
+    "effect-app": "2.40.1"
   },
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",

package/src/components/OmegaForm/OmegaFormInput.vue

@@ -0,0 +1,45 @@
+<template>
+  <OmegaInput
+    v-bind="$props"
+    :form="form"
+    :name="name"
+    :label="label"
+    :validators="validators"
+    :options="options"
+    :type="type"
+  >
+    <template #default="slotProps">
+      <slot v-bind="slotProps"></slot>
+    </template>
+  </OmegaInput>
+</template>
+
+<script setup lang="ts" generic="From, To extends Record<PropertyKey, any>">
+import { inject } from "vue"
+import type {
+  FieldValidators,
+  NestedKeyOf,
+  TypeOverride,
+} from "./OmegaFormStuff"
+import type { InputProps } from "./InputProps"
+import OmegaInput from "./OmegaInput.vue"
+import { OmegaFormKey } from "./useOmegaForm" // Import the injection key
+
+const form = inject(OmegaFormKey)
+if (!form) {
+  throw new Error("OmegaFormInput must be used within an OmegaForm context")
+}
+
+defineProps<{
+  name: NestedKeyOf<To>
+  label: string
+  validators?: FieldValidators<From>
+  options?: { title: string; value: string }[]
+  type?: TypeOverride
+}>()
+
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: InputProps<To>) => any
+}>()
+</script>

package/src/components/OmegaForm/useOmegaForm.ts

@@ -13,20 +13,17 @@ import {
   type FormProps,
   type MetaRecord,
   type OmegaFormApi,
-  type OmegaInputProps,
 } from "./OmegaFormStuff"
 import {
   computed,
   onBeforeUnmount,
   onMounted,
   onUnmounted,
-  defineComponent,
-  h,
-  type DefineComponent,
-  type Component,
+  provide,
+  type InjectionKey,
 } from "vue"
 import { isObject } from "effect/Predicate"
-import OmegaInput from "./OmegaInput.vue"
+import OmegaFormInput from "./OmegaFormInput.vue"
 
 type keysRule<T> =
   | {
@@ -55,8 +52,12 @@ interface OF<To, From> extends OmegaFormApi<To, From> {
   filterItems?: FilterItems
   clear: () => void
 }
-export interface OmegaFormReturn<To, From> extends OF<To, From> {
-  Input: DefineComponent<Omit<OmegaInputProps<From, To>, "form">, {}, {}>
+
+export const OmegaFormKey = Symbol("OmegaForm") as InjectionKey<OF<any, any>>
+
+export interface OmegaFormReturn<To extends Record<PropertyKey, any>, From>
+  extends OF<To, From> {
+  Input: typeof OmegaFormInput<From, To>
 }
 
 export const useOmegaForm = <
@@ -285,33 +286,9 @@ export const useOmegaForm = <
     clear,
   })
 
-  return Object.assign(formWithExtras, {
-    Input: defineComponent({
-      name: "FormInput",
-      inheritAttrs: true,
-      setup(_, { attrs, slots }) {
-        const name = attrs.name as NestedKeyOf<To>
-        const label = attrs.label as string
-        if (!name || !label) {
-          throw new Error("OmegaForm.Input requires name and label props")
-        }
+  provide(OmegaFormKey, formWithExtras)
 
-        return () =>
-          h(
-            OmegaInput as Component,
-            {
-              ...attrs,
-              name,
-              label,
-              form: formWithExtras,
-            },
-            slots,
-          )
-      },
-    }) as any as DefineComponent<
-      Omit<OmegaInputProps<From, To>, "form">,
-      {},
-      {}
-    >,
+  return Object.assign(formWithExtras, {
+    Input: OmegaFormInput,
   })
 }

package/src/stories/OmegaForm/form.Input.vue

@@ -4,11 +4,23 @@
     :on-submit="console.log"
   >
     <template #internalForm="{ form }">
-      <component :is="form.Input" label="myString" name="myString" />
+      <component :is="form.Input" label="myString" name="myString">
+        <template #default="{ field }">
+          <div>
+            <input v-model="field.state.value" />
+          </div>
+        </template>
+      </component>
     </template>
   </OmegaForm>
   <OmegaForm :form="exampleForm">
-    <exampleForm.Input label="aString" name="aString" />
+    <exampleForm.Input label="aString" name="aString">
+      <template #default="{ field }">
+        <div>
+          <input v-model="field.state.value" />
+        </div>
+      </template>
+    </exampleForm.Input>
     <exampleForm.Input label="aStringMin2" name="aStringMin2" />
     <exampleForm.Input label="aStringMin2Max4" name="aStringMin2Max4" />
     <exampleForm.Input