@effect-app/vue-components 0.2.7 → 0.3.0

package/dist/vue-components.es18.js

@@ -1,117 +1,4 @@
-import { defineComponent as P, resolveComponent as u, 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 = u("v-checkbox"), i = u("v-text-field"), t = u("v-textarea"), m = u("v-select"), d = u("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(i, 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(i, 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);
-    };
-  }
-});
+import f from "./vue-components.es16.js";
 export {
-  b as default
+  f as default
 };

package/dist/vue-components.es19.js

@@ -0,0 +1,117 @@
+import { defineComponent as P, resolveComponent as u, 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 = u("v-checkbox"), i = u("v-text-field"), t = u("v-textarea"), m = u("v-select"), d = u("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(i, 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(i, 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 {
+  b as default
+};

package/dist/{vue-components.es20.js → vue-components.es21.js}

@@ -1,5 +1,5 @@
 (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.es18.js";
+import o from "./vue-components.es19.js";
 
 export {
   o 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.es5.js

@@ -1,25 +1,91 @@
-import { useForm as b } from "@tanstack/vue-form";
-import { S as g } from "effect-app";
-import { generateMetaFromSchema as h } from "./vue-components.es6.js";
-const v = (r, e) => {
-  if (!r) throw new Error("Schema is required");
-  const a = g.standardSchemaV1(r), { filterItems: t, meta: d } = h(r), u = b({
+import { useForm as E } from "@tanstack/vue-form";
+import { S as j, Match as n } from "effect-app";
+import { generateMetaFromSchema as A } from "./vue-components.es6.js";
+import { computed as b, onUnmounted as I, onMounted as K, onBeforeUnmount as M } from "vue";
+import { constVoid as x } from "./vue-components.es15.js";
+const m = (i, e, u) => {
+  if (!i) throw new Error("Schema is required");
+  const a = j.standardSchemaV1(i), { filterItems: f, meta: y } = A(i), o = b(() => {
+    var d;
+    if ((d = u == null ? void 0 : u.persistency) != null && d.id)
+      return u.persistency.id;
+    const l = window.location.pathname, r = Object.keys(y);
+    return `${l}-${r.join("-")}`;
+  }), w = b(() => {
+    var r;
+    if (e != null && e.defaultValues && !((r = u == null ? void 0 : u.persistency) != null && r.overrideDefaultValues))
+      return e.defaultValues;
+    const l = u == null ? void 0 : u.persistency;
+    return n.value(l).pipe(
+      n.when(
+        { method: (d) => ["local", "session"].includes(d) },
+        (d) => {
+          const c = d.method === "local" ? localStorage : sessionStorage;
+          if (c)
+            try {
+              const s = JSON.parse(
+                c.getItem(o.value) || "{}"
+              );
+              return c.removeItem(o.value), s;
+            } catch (s) {
+              return console.error(s), {};
+            }
+          return {};
+        }
+      ),
+      n.orElse(() => ({}))
+    );
+  }), h = E({
     ...e,
     validators: {
       onSubmit: a,
       ...(e == null ? void 0 : e.validators) || {}
     },
-    onSubmit: e != null && e.onSubmit ? ({ formApi: S, meta: c, value: f }) => {
-      var m;
-      return (m = e.onSubmit) == null ? void 0 : m.call(e, {
-        formApi: S,
-        meta: c,
-        value: f
+    onSubmit: e != null && e.onSubmit ? ({ formApi: l, meta: r, value: d }) => {
+      var t;
+      return (t = e.onSubmit) == null ? void 0 : t.call(e, {
+        formApi: l,
+        meta: r,
+        value: d
       });
-    } : void 0
-  });
-  return Object.assign(u, { meta: d, filterItems: t });
+    } : void 0,
+    defaultValues: w.value
+  }), V = Object.assign(h, { meta: y, filterItems: f, clear: () => {
+    Object.keys(y).forEach((l) => {
+      h.setFieldValue(l, void 0);
+    });
+  } }), v = () => {
+    const l = u == null ? void 0 : u.persistency;
+    n.value(l).pipe(
+      n.when(
+        { method: (r) => ["local", "session"].includes(r) },
+        (r) => {
+          const t = r.method === "local" ? localStorage : sessionStorage;
+          if (t)
+            return Array.isArray(r.keys) && Object.keys(y).filter(
+              (s) => {
+                var S;
+                return !((S = r.keys) != null && S.includes(s));
+              }
+            ).forEach((s) => {
+              h.setFieldValue(s, void 0);
+            }), Array.isArray(r.banKeys) && r.banKeys.forEach((c) => {
+              h.setFieldValue(c, void 0);
+            }), t.setItem(
+              o.value,
+              JSON.stringify(h.store.state.values)
+            );
+        }
+      ),
+      n.orElse(x)
+    );
+  };
+  return I(v), K(() => {
+    window.addEventListener("beforeunload", v);
+  }), M(() => {
+    window.removeEventListener("beforeunload", v);
+  }), V;
 };
 export {
-  v as useOmegaForm
+  m as useOmegaForm
 };

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-fd152523]{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-fd152523]{display:contents}")),this.shadowRoot.appendChild(o)}},e.call(window.customElements,i,t)}}}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import o from "./vue-components.es11.js";
 import m from "./vue-components.es12.js";
-const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-0de09910"]]);
+const a = /* @__PURE__ */ m(o, [["__scopeId", "data-v-fd152523"]]);
 export {
   a as default
 };

package/dist/vue-components.es8.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.es6.js";
-import b from "./vue-components.es15.js";
+import b from "./vue-components.es16.js";
 const S = /* @__PURE__ */ i({
   inheritAttrs: !1,
   __name: "OmegaInput",

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.3.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "@tanstack/vue-form": "^1.2.4",
@@ -14,6 +14,12 @@
     "vuetify": "^3.7.19"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/vue3": "^8.6.12",
+    "@storybook/vue3-vite": "^8.6.12",
     "@types/node": "^22.13.14",
     "@typescript-eslint/eslint-plugin": "8.29.0",
     "@typescript-eslint/parser": "8.29.0",
@@ -24,6 +30,7 @@
     "eslint-plugin-vue": "^10.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.86.0",
+    "storybook": "^8.6.12",
     "typescript": "^5.8.2",
     "vite": "^6.2.3",
     "vite-plugin-css-injected-by-js": "^3.5.2",
@@ -52,6 +59,8 @@
     "docs:build": "vitepress build docs",
     "docs:serve": "vitepress serve docs",
     "lint": "NODE_OPTIONS=--max-old-space-size=8192 eslint src",
-    "autofix": "pnpm lint --fix"
+    "autofix": "pnpm lint --fix",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

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,17 +92,23 @@ onMounted(() => {
     fieldApi.setValue(null)
   }
 })
+const { addError, removeError, showErrors, showErrorsOn } = useOmegaErrors()
 
 const realDirty = ref(false)
+
+watchEffect(() => {
+  if (showErrors.value || showErrorsOn === "onChange") {
+    realDirty.value = true
+  }
+})
+
 const setRealDirty = () => {
   realDirty.value = true
 }
 
-const { addError, formSubmissionAttempts, removeError } = useOmegaErrors()
-
-watchEffect(() => {
-  if (formSubmissionAttempts.value > 0) {
-    realDirty.value = true
+onMounted(() => {
+  if (fieldValue.value) {
+    setRealDirty()
   }
 })