@effect-app/vue-components 1.1.0 → 1.1.1

package/dist/vue-components.es4.js

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

package/dist/vue-components.es7.js

@@ -1,6 +1,6 @@
 import { useForm as J, useStore as q } from "@tanstack/vue-form";
-import { Data as K, S as A, Effect as c, Fiber as y, Option as B } from "effect-app";
-import { runtimeFiberAsPromise as k } from "./vue-components.es10.js";
+import { Data as K, S as A, Effect as c, Fiber as y, Option as k } from "effect-app";
+import { runtimeFiberAsPromise as B } from "./vue-components.es10.js";
 import { isObject as G } from "./vue-components.es11.js";
 import { computed as I, onUnmounted as T, onMounted as W, onBeforeUnmount as z, watch as Q, h as P } from "vue";
 import X from "./vue-components.es12.js";
@@ -105,7 +105,7 @@ const p = (l) => function(o) {
         meta: r,
         value: s
       });
-      return y.isFiber(n) && y.isRuntimeFiber(n) ? await k(n) : c.isEffect(n) ? await c.runPromise(
+      return y.isFiber(n) && y.isRuntimeFiber(n) ? await B(n) : c.isEffect(n) ? await c.runPromise(
         n.pipe(
           // meta?.currentSpan
           //   ? Effect.withParentSpan(meta.currentSpan)
@@ -122,7 +122,7 @@ const p = (l) => function(o) {
   }, F = (e) => e.reduce((r, t) => {
     const s = t.split(".");
     return s.reduce((n, f, H) => (H === s.length - 1 ? n[f] = u.getFieldValue(t) : n[f] = n[f] ?? {}, n[f]), r), r;
-  }, {}), V = (e) => {
+  }, {}), O = (e) => {
     if (e) {
       if (Array.isArray(e.keys))
         return F(e.keys);
@@ -137,31 +137,31 @@ const p = (l) => function(o) {
     if (!(!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 t = V(e);
+      const t = O(e);
       return r.setItem(m.value, JSON.stringify(t));
     }
-  }, O = () => {
+  }, V = () => {
     const e = o?.persistency;
     if (!(!e?.policies || e.policies.length === 0) && e.policies.includes("querystring")) {
-      const r = V(e), t = new URLSearchParams(window.location.search);
+      const r = O(e), t = new URLSearchParams(window.location.search);
       t.set(m.value, JSON.stringify(r));
       const s = new URL(window.location.href);
       s.search = t.toString(), window.history.replaceState({}, "", s.toString());
     }
   };
   T(b), W(() => {
-    window.addEventListener("beforeunload", b), window.addEventListener("blur", O);
+    window.addEventListener("beforeunload", b), window.addEventListener("blur", V);
   }), z(() => {
-    window.removeEventListener("beforeunload", b), window.removeEventListener("blur", O);
+    window.removeEventListener("beforeunload", b), window.removeEventListener("blur", V);
   });
   const j = (e) => c.currentSpan.pipe(
     c.option,
     c.flatMap(
-      (r) => c.promise(() => u.handleSubmit(B.isSome(r) ? { currentSpan: r.value, ...e } : e))
+      (r) => c.promise(() => u.handleSubmit(k.isSome(r) ? { currentSpan: r.value, ...e } : e))
     )
   ), R = (e) => e?.checkErrors ? j(e?.meta).pipe(c.flatMap(c.fnUntraced(function* () {
     const r = u.getAllErrors();
-    if (r.form.errors.length)
+    if (Object.keys(r.fields).length || r.form.errors.length)
       return yield* new se({ form: r.form, fields: r.fields });
   }))) : j(e?.meta), x = u.handleSubmit, i = Object.assign(u, {
     i18nNamespace: o?.i18nNamespace,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.17.13",
@@ -49,8 +49,8 @@
     "@tanstack/vue-form": "^1.23.4",
     "highlight.js": "^11.11.1",
     "vue3-highlightjs": "^1.0.5",
-    "effect-app": "3.8.1",
-    "@effect-app/vue": "2.81.0"
+    "@effect-app/vue": "2.81.0",
+    "effect-app": "3.8.1"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -20,7 +20,7 @@
   generic="From extends Record<PropertyKey, any>, Name extends DeepKeys<From>"
 >
 import { type DeepKeys, useStore } from "@tanstack/vue-form"
-import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, ref, useId, watch, watchEffect } from "vue"
+import { computed, type ComputedRef, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, useId, watch, watchEffect } from "vue"
 import type { InputProps, OmegaFieldInternalApi } from "./InputProps"
 import type { FieldValidators, MetaRecord, NestedKeyOf, TypeOverride } from "./OmegaFormStuff"
 import OmegaInputVuetify from "./OmegaInputVuetify.vue"
@@ -139,6 +139,8 @@ watch(
   }
 )
 
+onUnmounted(() => removeError(id))
+
 const inputProps: ComputedRef<InputProps<From, Name>> = computed(() => ({
   id,
   required: props.meta?.required,

package/src/components/OmegaForm/useOmegaForm.ts

@@ -842,7 +842,7 @@ export const useOmegaForm = <
     options?.checkErrors
       ? handleSubmitEffect_(options?.meta).pipe(Effect.flatMap(Effect.fnUntraced(function*() {
         const errors = form.getAllErrors()
-        if (errors.form.errors.length) {
+        if (Object.keys(errors.fields).length || errors.form.errors.length) {
           return yield* new FormErrors({ form: errors.form, fields: errors.fields })
         }
       })))