@effect-app/vue-components 0.2.7 → 0.2.8

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

@@ -1,6 +1,6 @@
 import { mdiLink } from "@mdi/js";
 declare const vuetified: import("vue").Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions, {}, any> | undefined;
-declare const errors: import("vue").Ref<readonly import("./OmegaFormStuff").OmegaError[], readonly import("./OmegaFormStuff").OmegaError[]>, formSubmissionAttempts: import("vue").Ref<number, number>;
+declare const errors: import("vue").Ref<readonly import("./OmegaFormStuff").OmegaError[], readonly import("./OmegaFormStuff").OmegaError[]>, showErrors: import("vue").Ref<boolean, boolean>;
 declare const trans: (id: string, values?: Record<string, import("intl-messageformat").PrimitiveType | import("intl-messageformat").FormatXMLElementFn<string, string>>) => string;
 declare const showedGeneralErrors: import("vue").ComputedRef<string[]>;
 declare const __VLS_ctx: InstanceType<__VLS_PickNotAny<typeof __VLS_self, new () => {}>>;
@@ -15,7 +15,7 @@ declare const __VLS_self: import("vue").DefineComponent<{}, {
     mdiLink: typeof mdiLink;
     vuetified: typeof vuetified;
     errors: typeof errors;
-    formSubmissionAttempts: typeof formSubmissionAttempts;
+    showErrors: typeof showErrors;
     trans: typeof trans;
     showedGeneralErrors: typeof showedGeneralErrors;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,15 +1,16 @@
 import { type InjectionKey, type Ref } from "vue";
-import type { OmegaError } from "./OmegaFormStuff";
+import { type OmegaError, type ShowErrorsOn } from "./OmegaFormStuff";
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form";
 export declare const OmegaErrorsKey: InjectionKey<{
     errors: Ref<readonly OmegaError[]>;
     addError: (error: OmegaError) => void;
     removeError: (inputId: string) => void;
     clearErrors: () => void;
-    formSubmissionAttempts: Ref<number>;
+    showErrors: Ref<boolean>;
+    showErrorsOn: ShowErrorsOn;
     generalErrors: Ref<(Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined>;
 }>;
-export declare function provideOmegaErrors(formSubmissionAttempts: Ref<number>, generalErrors: Ref<(Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined>): {
+export declare function provideOmegaErrors(formSubmissionAttempts: Ref<number>, generalErrors: Ref<(Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined>, showErrorsOn?: ShowErrorsOn): {
     errors: Readonly<Ref<readonly {
         readonly label: string;
         readonly inputId: string;
@@ -22,14 +23,16 @@ export declare function provideOmegaErrors(formSubmissionAttempts: Ref<number>,
     addError: (error: OmegaError) => void;
     removeError: (inputId: string) => void;
     clearErrors: () => void;
-    formSubmissionAttempts: Ref<number, number>;
+    showErrors: import("vue").ComputedRef<boolean>;
     generalErrors: Ref<(Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined, (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined>;
+    showErrorsOn: ShowErrorsOn;
 };
 export declare function useOmegaErrors(): {
     errors: Ref<readonly OmegaError[]>;
     addError: (error: OmegaError) => void;
     removeError: (inputId: string) => void;
     clearErrors: () => void;
-    formSubmissionAttempts: Ref<number>;
+    showErrors: Ref<boolean>;
+    showErrorsOn: ShowErrorsOn;
     generalErrors: Ref<(Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined>;
 };

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

@@ -1,6 +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 ShowErrorsOn = "onChange" | "onBlur" | "onSubmit";
 export type TypeOverride = "string" | "text" | "number" | "select" | "multiple" | "boolean" | "autocomplete" | "autocompletemultiple";
 export interface OmegaError {
     label: string;

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

@@ -36,7 +36,6 @@ declare const _default: <From, To>(__VLS_props: NonNullable<Awaited<typeof __VLS
                 title: string;
                 value: string;
             }[];
-            onFocusout: () => void;
         }) => any) | undefined;
     };
     emit: {};

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

@@ -34,7 +34,6 @@ declare const _default: <To>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup
                 title: string;
                 value: string;
             }[];
-            onFocusout: () => void;
         }) => any) | undefined;
     };
     emit: {};

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

@@ -1,8 +1,9 @@
 import { type S } from "effect-app";
-import { type FilterItems, type MetaRecord, type OmegaFormApi, type OmegaFormState } from "./OmegaFormStuff";
+import { type FilterItems, type MetaRecord, type OmegaFormApi, type OmegaFormState, type ShowErrorsOn } from "./OmegaFormStuff";
 declare const _default: <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, K extends keyof OmegaFormState<To, From> = keyof OmegaFormState<To, From>>(__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> & ({
         subscribe?: K[];
+        showErrorsOn?: ShowErrorsOn;
     } & ({
         form: OmegaFormApi<To, From> & {
             meta: MetaRecord<To>;

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

@@ -8,6 +8,7 @@ export { default } from "./OmegaWrapper.vue";
 export { OmegaForm, OmegaInput, OmegaErrors };
 declare const OmegaFormCE: new <From extends Record<PropertyKey, any>, To extends Record<PropertyKey, any>, K extends keyof import("./OmegaFormStuff").OmegaFormState<To, From> = keyof import("./OmegaFormStuff").OmegaFormState<To, From>>(initialProps?: Record<string, any>) => import("vue").VueElement & ((({
     subscribe?: K[] | undefined;
+    showErrorsOn?: import("./OmegaFormStuff").ShowErrorsOn | undefined;
     form: import("./OmegaFormStuff").OmegaFormApi<To, From> & {
         meta: import("./OmegaFormStuff").MetaRecord<To>;
         filterItems?: import("./OmegaFormStuff").FilterItems;
@@ -15,6 +16,7 @@ declare const OmegaFormCE: new <From extends Record<PropertyKey, any>, To extend
     schema?: undefined | undefined;
 } | {
     subscribe?: K[] | undefined;
+    showErrorsOn?: import("./OmegaFormStuff").ShowErrorsOn | undefined;
     defaultValues?: To | undefined;
     defaultState?: Partial<import("@tanstack/vue-form").FormState<To, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").StandardSchemaV1<To, From>, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined, import("@tanstack/vue-form").FormAsyncValidateOrFn<To> | undefined>> | undefined;
     asyncAlways?: boolean | undefined;

package/dist/vue-components.es11.js

@@ -1,12 +1,13 @@
-import { defineComponent as d, watch as b, createElementBlock as S, openBlock as g, withModifiers as v, unref as a, createElementVNode as h, renderSlot as M } from "vue";
+import { defineComponent as d, watch as b, createElementBlock as S, openBlock as g, withModifiers as v, unref as n, createElementVNode as h, renderSlot as O } from "vue";
 import { useStore as i } from "@tanstack/vue-form";
-import { getOmegaStore as y } from "./vue-components.es16.js";
-import { provideOmegaErrors as O } from "./vue-components.es4.js";
-import { useOmegaForm as F } from "./vue-components.es5.js";
-const I = ["disabled"], A = /* @__PURE__ */ d({
+import { getOmegaStore as M } from "./vue-components.es16.js";
+import { provideOmegaErrors as y } from "./vue-components.es4.js";
+import { useOmegaForm as E } from "./vue-components.es5.js";
+const w = ["disabled"], A = /* @__PURE__ */ d({
   __name: "OmegaWrapper",
   props: {
     subscribe: {},
+    showErrorsOn: {},
     form: {},
     schema: {},
     defaultValues: {},
@@ -20,11 +21,11 @@ const I = ["disabled"], A = /* @__PURE__ */ d({
     onSubmit: { type: Function }
   },
   setup(u, { expose: l }) {
-    const r = u, t = r.form ?? F(r.schema, r), f = i(t.store, (e) => e.isSubmitting);
+    const s = u, t = s.form ?? E(s.schema, s), f = i(t.store, (e) => e.isSubmitting);
     l(t);
-    const c = y(
+    const c = M(
       t,
-      r.subscribe
+      s.subscribe
     ), p = i(
       t.store,
       (e) => e.submissionAttempts
@@ -34,28 +35,28 @@ const I = ["disabled"], A = /* @__PURE__ */ d({
       () => {
         const e = t.filterItems;
         return e ? o.value ? (Object.values(o.value).filter(
-          (s) => !!s
+          (r) => !!r
         ).flatMap(
-          (s) => Object.values(s).flat().map((n) => n.message)
-        ).some((s) => s === e.message) && e.items.forEach((s) => {
-          const n = t.getFieldMeta(s);
-          t.setFieldMeta(s, {
-            ...n,
+          (r) => Object.values(r).flat().map((m) => m.message)
+        ).some((r) => r === e.message) && e.items.forEach((r) => {
+          const m = t.getFieldMeta(r);
+          t.setFieldMeta(r, {
+            ...m,
             errorMap: {
-              onSubmit: [{ path: [s], message: e.message }]
+              onSubmit: [{ path: [r], message: e.message }]
             }
           });
         }), {}) : {} : {};
       }
-    ), O(p, o), (e, m) => (g(), S("form", {
-      onSubmit: m[0] || (m[0] = v((s) => a(t).handleSubmit(), ["prevent", "stop"]))
+    ), y(p, o, s.showErrorsOn), (e, a) => (g(), S("form", {
+      onSubmit: a[0] || (a[0] = v((r) => n(t).handleSubmit(), ["prevent", "stop"]))
     }, [
-      h("fieldset", { disabled: a(f) }, [
-        M(e.$slots, "default", {
-          form: a(t),
-          subscribedValues: a(c)
+      h("fieldset", { disabled: n(f) }, [
+        O(e.$slots, "default", {
+          form: n(t),
+          subscribedValues: n(c)
         }, void 0, !0)
-      ], 8, I)
+      ], 8, w)
     ], 32));
   }
 });

package/dist/vue-components.es14.js

@@ -1,27 +1,27 @@
-import { defineComponent as E, getCurrentInstance as b, computed as x, createBlock as o, openBlock as t, Transition as B, withCtx as l, createElementBlock as m, createCommentVNode as w, unref as e, renderSlot as I, normalizeProps as V, guardReactiveProps as N, resolveDynamicComponent as a, normalizeClass as O, createElementVNode as u, toDisplayString as d, Fragment as g, renderList as k, createTextVNode as y } from "vue";
-import { useOmegaErrors as S } from "./vue-components.es4.js";
-import { mdiLink as z } from "@mdi/js";
-import { useIntl as A } from "./vue-components.es3.js";
-const D = {
+import { defineComponent as C, getCurrentInstance as x, computed as B, createBlock as o, openBlock as t, Transition as b, withCtx as l, createElementBlock as c, createCommentVNode as w, unref as e, renderSlot as I, normalizeProps as V, guardReactiveProps as N, resolveDynamicComponent as s, normalizeClass as O, createElementVNode as d, toDisplayString as u, Fragment as g, renderList as k, createTextVNode as y } from "vue";
+import { useOmegaErrors as z } from "./vue-components.es4.js";
+import { mdiLink as D } from "@mdi/js";
+import { useIntl as G } from "./vue-components.es3.js";
+const L = {
   key: 0,
   class: "error-alert"
-}, G = { class: "text-h6 mb-3" }, L = { class: "font-weight-medium" }, M = { class: "error-message" }, P = ["href"], T = { key: 1 }, H = /* @__PURE__ */ E({
+}, M = { class: "text-h6 mb-3" }, P = { class: "font-weight-medium" }, S = { class: "error-message" }, T = ["href"], $ = { key: 1 }, H = /* @__PURE__ */ C({
   __name: "OmegaErrors",
-  setup($) {
-    const c = b(), f = c == null ? void 0 : c.appContext.components.VAlert, { errors: n, formSubmissionAttempts: C, generalErrors: _ } = S(), { trans: v } = A(), p = x(() => _.value ? _.value.filter(
+  setup(j) {
+    const m = x(), f = m == null ? void 0 : m.appContext.components.VAlert, { errors: n, generalErrors: _, showErrors: E } = z(), { trans: h } = G(), p = B(() => _.value ? _.value.filter(
       (i) => !!i
     ).flatMap(
-      (i) => Object.values(i).filter((s) => !!s).flatMap(
-        (s) => s.filter(
+      (i) => Object.values(i).filter((a) => !!a).flatMap(
+        (a) => a.filter(
           (r) => !!(r != null && r.message)
         ).map((r) => r.message)
       )
     ) : []);
-    return (i, s) => (t(), o(B, null, {
+    return (i, a) => (t(), o(b, null, {
       default: l(() => [
-        e(C) > 0 && (e(n).length || p.value.length) ? (t(), m("div", D, [
+        e(E) && (e(n).length || p.value.length) ? (t(), c("div", L, [
           I(i.$slots, "default", V(N({ errors: e(n), showedGeneralErrors: p.value })), () => [
-            (t(), o(a(e(f) ? "v-alert" : "div"), {
+            (t(), o(s(e(f) ? "v-alert" : "div"), {
               class: O([e(f) ? "mb-4" : "error-alert-content", "mb-4"]),
               type: "error",
               variant: "tonal",
@@ -29,24 +29,24 @@ const D = {
               "aria-live": "polite"
             }, {
               default: l(() => [
-                u("div", G, d(e(v)("form.includes_error")) + ":", 1),
-                e(n).length ? (t(), o(a(e(n).length > 1 ? "ul" : "div"), {
+                d("div", M, u(e(h)("form.includes_error")) + ":", 1),
+                e(n).length ? (t(), o(s(e(n).length > 1 ? "ul" : "div"), {
                   key: 0,
                   class: "error-list"
                 }, {
                   default: l(() => [
-                    (t(!0), m(g, null, k(e(n), (r) => (t(), o(a(e(n).length > 1 ? "li" : "div"), {
+                    (t(!0), c(g, null, k(e(n), (r) => (t(), o(s(e(n).length > 1 ? "li" : "div"), {
                       key: r.inputId,
                       class: "error-item"
                     }, {
                       default: l(() => [
-                        u("div", L, d(r.label), 1),
-                        u("div", M, [
-                          (t(), o(a(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
+                        d("div", P, u(r.label), 1),
+                        d("div", S, [
+                          (t(), o(s(r.errors.length > 1 ? "ul" : "div"), { class: "error-list" }, {
                             default: l(() => [
-                              (t(!0), m(g, null, k(r.errors, (h) => (t(), o(a(r.errors.length > 1 ? "li" : "span"), { key: h }, {
+                              (t(!0), c(g, null, k(r.errors, (v) => (t(), o(s(r.errors.length > 1 ? "li" : "span"), { key: v }, {
                                 default: l(() => [
-                                  y(d(h), 1)
+                                  y(u(v), 1)
                                 ]),
                                 _: 2
                               }, 1024))), 128))
@@ -54,27 +54,27 @@ const D = {
                             _: 2
                           }, 1024))
                         ]),
-                        u("a", {
+                        d("a", {
                           href: `#${r.inputId}`,
                           class: "error-link"
                         }, [
-                          (t(), o(a(e(f) ? "v-icon" : "i"), {
-                            icon: e(z),
+                          (t(), o(s(e(f) ? "v-icon" : "i"), {
+                            icon: e(D),
                             "aria-hidden": "true"
                           }, {
-                            default: l(() => s[0] || (s[0] = [
-                              u("i", null, "🔗", -1)
+                            default: l(() => a[0] || (a[0] = [
+                              d("i", null, "🔗", -1)
                             ])),
                             _: 1
                           }, 8, ["icon"])),
-                          y(" " + d(e(v)("form.fix_input")), 1)
-                        ], 8, P)
+                          y(" " + u(e(h)("form.fix_input")), 1)
+                        ], 8, T)
                       ]),
                       _: 2
                     }, 1024))), 128))
                   ]),
                   _: 1
-                })) : (t(), m("span", T, d(p.value[0]), 1))
+                })) : (t(), c("span", $, u(p.value[0]), 1))
               ]),
               _: 1
             }, 8, ["class"]))

package/dist/vue-components.es15.js

@@ -1,10 +1,10 @@
 (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 C, getCurrentInstance as L, useId as O, computed as l, watch as q, onMounted as S, ref as A, watchEffect as D, renderSlot as F, mergeProps as E, createBlock as M, createCommentVNode as P, unref as T, openBlock as U } from "vue";
-import { useStore as N } from "@tanstack/vue-form";
-import { useOmegaErrors as R } from "./vue-components.es4.js";
-import j from "./vue-components.es18.js";
+import { defineComponent as k, getCurrentInstance as B, useId as L, computed as n, watch as x, onMounted as P, ref as S, watchEffect as A, renderSlot as D, normalizeProps as F, guardReactiveProps as M, createElementVNode as N, createBlock as R, createCommentVNode as T, unref as U, openBlock as z, mergeProps as j } from "vue";
+import { useStore as G } from "@tanstack/vue-form";
+import { useOmegaErrors as H } from "./vue-components.es4.js";
+import J from "./vue-components.es18.js";
 
-const Q = /* @__PURE__ */ C({
+const Z = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "OmegaInternalInput",
   props: {
@@ -15,75 +15,77 @@ const Q = /* @__PURE__ */ C({
     type: {},
     validators: {}
   },
-  setup(I) {
-    const e = I, n = L(), $ = n == null ? void 0 : n.appContext.components.VTextField, o = O(), u = e.field, a = N(u.store, (t) => t), p = l(() => {
+  setup(_) {
+    const e = _, l = B(), q = l == null ? void 0 : l.appContext.components.VTextField, o = L(), u = e.field, a = G(u.store, (t) => t), p = n(() => {
       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";
-    }), s = l(() => a.value.value), f = l(
+    }), s = n(() => a.value.value), d = n(
       () => (
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         a.value.meta.errors.map((t) => t == null ? void 0 : t.message).filter(Boolean)
       )
     );
-    q(
+    x(
       () => [!!s.value],
       () => {
         var t, r;
-        f.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
+        d.value.length && !s.value && !((t = e.meta) != null && t.required) && u.setValue(
           ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "undefined" ? void 0 : null
         );
       }
-    ), S(() => {
+    ), P(() => {
       var t, r;
       !s.value && !((t = e.meta) != null && t.required) && ((r = e.meta) == null ? void 0 : r.nullableOrUndefined) === "null" && u.setValue(null);
     });
-    const i = A(!1), d = () => {
-      i.value = !0;
-    }, { addError: k, formSubmissionAttempts: w, removeError: B } = R();
-    D(() => {
-      w.value > 0 && (i.value = !0);
+    const { addError: C, removeError: I, showErrors: O, showErrorsOn: $ } = H(), i = S(!1);
+    A(() => {
+      (O.value || $ === "onChange") && (i.value = !0);
     });
-    const v = l(() => !i.value && p.value !== "select" ? [] : f.value);
-    q(
+    const f = () => {
+      i.value = !0;
+    }, v = n(() => !i.value && p.value !== "select" ? [] : d.value);
+    x(
       () => a.value.meta.errors,
       () => {
-        a.value.meta.errors.length ? k({
+        a.value.meta.errors.length ? C({
           inputId: o,
           errors: a.value.meta.errors.map((t) => t.message).filter(Boolean),
           label: e.label
-        }) : B(o);
+        }) : I(o);
       }
     );
-    const m = l(() => {
-      var t, r, c, g, y, h, b, x, V, _;
+    const m = n(() => {
+      var t, r, c, g, y, h, b, E, V, w;
       return {
         id: o,
         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: ((x = e.meta) == null ? void 0 : x.type) === "number" && ((V = e.meta) == null ? void 0 : V.minimum),
+        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: d,
+        setRealDirty: f,
         type: p.value,
-        label: `${e.label}${(_ = e.meta) != null && _.required ? " *" : ""}`,
+        label: `${e.label}${(w = e.meta) != null && w.required ? " *" : ""}`,
         options: e.options
       };
     });
-    return (t, r) => F(t.$slots, "default", E(m.value, { onFocusout: d }), () => [
-      T($) ? (U(), M(j, E({
-        key: 0,
-        "input-props": m.value
-      }, t.$attrs, {
-        "vuetify-value": m.value.field.state.value
-      }), null, 16, ["input-props", "vuetify-value"])) : P("", !0)
+    return (t, r) => D(t.$slots, "default", F(M(m.value)), () => [
+      N("div", { onFocusout: f }, [
+        U(q) ? (z(), R(J, j({
+          key: 0,
+          "input-props": m.value
+        }, t.$attrs, {
+          "vuetify-value": m.value.field.state.value
+        }), null, 16, ["input-props", "vuetify-value"])) : T("", !0)
+      ], 32)
     ]);
   }
 });
 export {
-  Q as default
+  Z as default
 };

package/dist/vue-components.es4.js

@@ -1,30 +1,38 @@
-import { ref as m, readonly as d, provide as l, inject as p } from "vue";
-const s = Symbol();
-function E(e, u) {
-  const r = m([]), t = (o) => {
-    r.value = r.value.filter((i) => i.inputId !== o);
-  }, a = (o) => {
-    t(o.inputId), r.value.push(o);
-  }, c = () => {
+import { ref as l, computed as p, readonly as v, provide as E, inject as f } from "vue";
+const u = Symbol();
+function h(e, a, t = "onSubmit") {
+  const r = l([]), n = (o) => {
+    r.value = r.value.filter((d) => d.inputId !== o);
+  }, c = (o) => {
+    n(o.inputId), r.value.push(o);
+  }, i = () => {
     r.value = [];
-  }, n = {
-    errors: d(r),
-    addError: a,
-    removeError: t,
-    clearErrors: c,
-    formSubmissionAttempts: e,
-    generalErrors: u
+  }, m = p(() => {
+    switch (t) {
+      case "onChange":
+        return !0;
+      default:
+        return e.value > 0;
+    }
+  }), s = {
+    errors: v(r),
+    addError: c,
+    removeError: n,
+    clearErrors: i,
+    showErrors: m,
+    generalErrors: a,
+    showErrorsOn: t ?? "onSubmit"
   };
-  return l(s, n), n;
+  return E(u, s), s;
 }
-function f() {
-  const e = p(s);
+function w() {
+  const e = f(u);
   if (!e)
     throw new Error("useOmegaErrors must be used within an OmegaForm provider");
   return e;
 }
 export {
-  s as OmegaErrorsKey,
-  E as provideOmegaErrors,
-  f as useOmegaErrors
+  u as OmegaErrorsKey,
+  h as provideOmegaErrors,
+  w as useOmegaErrors
 };

package/dist/vue-components.es7.js

@@ -1,7 +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)}})();
+(function(){"use strict";try{if(typeof document<"u"){var n=document.createElement("style");if(n.appendChild(document.createTextNode("fieldset[data-v-59131cd0]{display:contents}")),document.head.appendChild(n),window.customElements){const e=window.customElements.define;window.customElements.define=function(c,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-59131cd0]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,c,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"]]);
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-59131cd0"]]);
 export {
   a as default
 };

package/dist/vue-components.es9.js

@@ -1,7 +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)}})();
+(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");if(t.appendChild(document.createTextNode(".v-enter-from[data-v-502ecb3a],.v-leave-to[data-v-502ecb3a]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-502ecb3a],.v-leave-active[data-v-502ecb3a]{display:grid;transition:all .15s}.v-enter-to[data-v-502ecb3a],.v-leave-from[data-v-502ecb3a]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-502ecb3a]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-502ecb3a]{min-height:0}.error-list[data-v-502ecb3a]{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-502ecb3a]{grid-template-columns:auto 1fr}.error-link[data-v-502ecb3a]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){.error-list[data-v-502ecb3a]{grid-template-columns:1fr}.error-message[data-v-502ecb3a]{grid-column:1 / -1}}.error-item[data-v-502ecb3a]{display:contents}a[data-v-502ecb3a]{min-width:min-content}.error-link[data-v-502ecb3a]{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(n,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-502ecb3a],.v-leave-to[data-v-502ecb3a]{max-height:0px;grid-template-rows:0fr;opacity:0}.v-enter-active[data-v-502ecb3a],.v-leave-active[data-v-502ecb3a]{display:grid;transition:all .15s}.v-enter-to[data-v-502ecb3a],.v-leave-from[data-v-502ecb3a]{grid-template-rows:1fr;max-height:50vh;opacity:1}.error-alert[data-v-502ecb3a]{transition-behavior:allow-discrete;display:grid;overflow:hidden;min-height:0}.error-alert>*[data-v-502ecb3a]{min-height:0}.error-list[data-v-502ecb3a]{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-502ecb3a]{grid-template-columns:auto 1fr}.error-link[data-v-502ecb3a]{grid-column:1 / -1;justify-self:end}}@container (max-width: 18.75rem){.error-list[data-v-502ecb3a]{grid-template-columns:1fr}.error-message[data-v-502ecb3a]{grid-column:1 / -1}}.error-item[data-v-502ecb3a]{display:contents}a[data-v-502ecb3a]{min-width:min-content}.error-link[data-v-502ecb3a]{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,n,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"]]);
+const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-502ecb3a"]]);
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",

package/src/components/OmegaForm/OmegaErrors.vue

@@ -1,10 +1,7 @@
 <template>
   <Transition>
     <div
-      v-if="
-        formSubmissionAttempts > 0 &&
-        (errors.length || showedGeneralErrors.length)
-      "
+      v-if="showErrors && (errors.length || showedGeneralErrors.length)"
       class="error-alert"
     >
       <slot v-bind="{ errors, showedGeneralErrors }">
@@ -75,7 +72,7 @@ import { computed, getCurrentInstance } from "vue"
 const instance = getCurrentInstance()
 const vuetified = instance?.appContext.components["VAlert"]
 
-const { errors, formSubmissionAttempts, generalErrors } = useOmegaErrors()
+const { errors, generalErrors, showErrors } = useOmegaErrors()
 
 const { trans } = useIntl()
 

package/src/components/OmegaForm/OmegaErrorsContext.ts

@@ -5,8 +5,9 @@ import {
   ref,
   readonly,
   type Ref,
+  computed,
 } from "vue"
-import type { OmegaError } from "./OmegaFormStuff"
+import { type OmegaError, type ShowErrorsOn } from "./OmegaFormStuff"
 import type { StandardSchemaV1Issue } from "@tanstack/vue-form"
 
 export const OmegaErrorsKey = Symbol() as InjectionKey<{
@@ -14,7 +15,8 @@ export const OmegaErrorsKey = Symbol() as InjectionKey<{
   addError: (error: OmegaError) => void
   removeError: (inputId: string) => void
   clearErrors: () => void
-  formSubmissionAttempts: Ref<number>
+  showErrors: Ref<boolean>
+  showErrorsOn: ShowErrorsOn
   generalErrors: Ref<
     (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined
   >
@@ -25,6 +27,7 @@ export function provideOmegaErrors(
   generalErrors: Ref<
     (Record<string, StandardSchemaV1Issue[]> | undefined)[] | undefined
   >,
+  showErrorsOn: ShowErrorsOn = "onSubmit",
 ) {
   const errors = ref<OmegaError[]>([])
 
@@ -41,13 +44,23 @@ export function provideOmegaErrors(
     errors.value = []
   }
 
+  const showErrors = computed(() => {
+    switch (showErrorsOn) {
+      case "onChange":
+        return true
+      default:
+        return formSubmissionAttempts.value > 0
+    }
+  })
+
   const context = {
     errors: readonly(errors),
     addError,
     removeError,
     clearErrors,
-    formSubmissionAttempts,
+    showErrors,
     generalErrors,
+    showErrorsOn: showErrorsOn ?? "onSubmit",
   }
 
   provide(OmegaErrorsKey, context)

package/src/components/OmegaForm/OmegaFormStuff.ts

@@ -16,6 +16,8 @@ import {
 import type { Component } from "vue"
 import { useIntl } from "../../utils"
 
+export type ShowErrorsOn = "onChange" | "onBlur" | "onSubmit"
+
 export type TypeOverride =
   | "string"
   | "text"

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -1,11 +1,13 @@
 <template>
-  <slot v-bind="inputProps" @focusout="setRealDirty">
-    <OmegaInputVuetify
-      v-if="vuetified"
-      :input-props="inputProps"
-      v-bind="$attrs"
-      :vuetify-value="inputProps.field.state.value"
-    />
+  <slot v-bind="inputProps">
+    <div @focusout="setRealDirty">
+      <OmegaInputVuetify
+        v-if="vuetified"
+        :input-props="inputProps"
+        v-bind="$attrs"
+        :vuetify-value="inputProps.field.state.value"
+      />
+    </div>
   </slot>
 </template>
 
@@ -90,20 +92,20 @@ onMounted(() => {
     fieldApi.setValue(null)
   }
 })
+const { addError, removeError, showErrors, showErrorsOn } = useOmegaErrors()
 
 const realDirty = ref(false)
-const setRealDirty = () => {
-  realDirty.value = true
-}
-
-const { addError, formSubmissionAttempts, removeError } = useOmegaErrors()
 
 watchEffect(() => {
-  if (formSubmissionAttempts.value > 0) {
+  if (showErrors.value || showErrorsOn === "onChange") {
     realDirty.value = true
   }
 })
 
+const setRealDirty = () => {
+  realDirty.value = true
+}
+
 const showedErrors = computed(() => {
   // single select field can be validated on change
   if (!realDirty.value && fieldType.value !== "select") return []

package/src/components/OmegaForm/OmegaWrapper.vue

@@ -54,6 +54,7 @@ import {
   type MetaRecord,
   type OmegaFormApi,
   type OmegaFormState,
+  type ShowErrorsOn,
 } from "./OmegaFormStuff"
 import { getOmegaStore } from "./getOmegaStore"
 import { provideOmegaErrors } from "./OmegaErrorsContext"
@@ -63,6 +64,7 @@ import { watch } from "vue"
 const props = defineProps<
   {
     subscribe?: K[]
+    showErrorsOn?: ShowErrorsOn
   } & (
     | {
         form: OmegaFormApi<To, From> & {
@@ -127,7 +129,7 @@ watch(
   },
 )
 
-provideOmegaErrors(formSubmissionAttempts, errors)
+provideOmegaErrors(formSubmissionAttempts, errors, props.showErrorsOn)
 </script>
 
 <style scoped>