@effect-app/vue-components 1.4.2 → 1.5.0

package/dist/vue-components.es9.js

@@ -1,32 +1,358 @@
-import { h as e } from "vue";
-import s from "./vue-components.es4.js";
-import { useOmegaForm as p } from "./vue-components.es7.js";
-const W = (r) => (...a) => {
-  const [m, n, o] = a;
-  return p(
-    m,
-    n,
-    {
-      ...o,
-      input: {
-        name: "WrappedInput",
-        inheritAttrs: !1,
-        setup(f, { attrs: u, slots: i }) {
-          return () => e(s, {
-            ...f,
-            ...u
-          }, {
-            // Override the default slot that OmegaInternalInput provides
-            default: (t) => t && "field" in t ? e(r, {
-              inputProps: t,
-              vuetifyValue: t.field.state.value
-            }) : i.default?.(t)
-          });
+import { S as n, Option as c, pipe as q } from "effect-app";
+import { getMetadataFromSchema as U } from "@effect-app/vue/form";
+import { useIntl as _, getTransformationFrom as N } from "./vue-components.es3.js";
+const w = n.NonEmptyArray(n.String), E = (e) => n.AST.isUnion(e) && e.types.find((i) => i._tag === "UndefinedKeyword" || i === n.Null.ast), g = (e) => !e || !n.AST.isUnion(e) ? !1 : e.types.find((i) => i._tag === "UndefinedKeyword") ? "undefined" : e.types.find((i) => i === n.Null.ast) ? "null" : !1, m = ({ meta: e = {}, parent: i = "", property: t, propertySignatures: p }, o = {}) => {
+  if (t && t._tag === "Transformation")
+    return m({
+      parent: i,
+      meta: e,
+      property: t.from
+    });
+  if (t?._tag === "TypeLiteral" && "propertySignatures" in t)
+    return m({
+      meta: e,
+      propertySignatures: t.propertySignatures
+    });
+  if (p) {
+    for (const r of p) {
+      const l = i ? `${i}.${r.name.toString()}` : r.name.toString(), a = g(r.type), u = !a, A = r.type;
+      if (n.AST.isUnion(r.type)) {
+        const T = r.type.types.filter(
+          (s) => s._tag !== "UndefinedKeyword" && s !== n.Null.ast
+        ).map(N);
+        if (T.some(
+          (s) => "propertySignatures" in s
+        )) {
+          if (!a) {
+            const s = m({
+              parent: l,
+              property: r.type,
+              meta: { required: u, nullableOrUndefined: a }
+            });
+            o[l] = s;
+          }
+          for (const s of T)
+            "propertySignatures" in s && Object.assign(
+              o,
+              m({
+                parent: l,
+                propertySignatures: s.propertySignatures,
+                meta: { required: u, nullableOrUndefined: a }
+              })
+            );
+        } else {
+          const s = T.filter(n.AST.isTupleType);
+          if (s.length > 0) {
+            const f = s[0];
+            if (o[l] = {
+              type: "multiple",
+              members: f.elements,
+              rest: f.rest,
+              required: u,
+              nullableOrUndefined: a
+            }, f.rest && f.rest.length > 0) {
+              const d = f.rest[0];
+              if (d.type._tag === "TypeLiteral" && "propertySignatures" in d.type)
+                for (const y of d.type.propertySignatures) {
+                  const b = `${l}.${y.name.toString()}`, S = m({
+                    parent: b,
+                    property: y.type,
+                    meta: {
+                      required: !g(y.type),
+                      nullableOrUndefined: g(y.type)
+                    }
+                  });
+                  if (S && typeof S == "object" && "type" in S && (o[b] = S, S.type === "multiple" && n.AST.isTupleType(y.type) && y.type.rest && y.type.rest.length > 0)) {
+                    const O = y.type.rest[0];
+                    if (O.type._tag === "TypeLiteral" && "propertySignatures" in O.type)
+                      for (const x of O.type.propertySignatures) {
+                        const M = `${b}.${x.name.toString()}`, v = m({
+                          parent: M,
+                          property: x.type,
+                          meta: {
+                            required: !g(x.type),
+                            nullableOrUndefined: g(x.type)
+                          }
+                        });
+                        v && typeof v == "object" && "type" in v && (o[M] = v);
+                      }
+                  }
+                }
+            }
+          } else {
+            const f = m({
+              parent: l,
+              property: r.type,
+              meta: { required: u, nullableOrUndefined: a }
+            });
+            o[l] = f;
+          }
         }
+      } else if ("propertySignatures" in A)
+        Object.assign(
+          o,
+          m({
+            parent: l,
+            propertySignatures: A.propertySignatures,
+            meta: { required: u, nullableOrUndefined: a }
+          })
+        );
+      else if (n.AST.isTupleType(r.type))
+        if (r.type.rest.length > 0 && r.type.rest[0].type._tag === "TypeLiteral" && "propertySignatures" in r.type.rest[0].type) {
+          const h = r.type.rest[0].type;
+          if (h._tag === "TypeLiteral" && "propertySignatures" in h)
+            for (const s of h.propertySignatures) {
+              const f = `${l}.${s.name.toString()}`;
+              if (n.AST.isTupleType(s.type) && s.type.rest.length > 0) {
+                const d = s.type.rest[0].type;
+                if (d._tag === "TypeLiteral" && "propertySignatures" in d)
+                  for (const y of d.propertySignatures) {
+                    const b = `${f}.${y.name.toString()}`, S = m({
+                      parent: b,
+                      property: y.type,
+                      meta: {
+                        required: !g(y.type),
+                        nullableOrUndefined: g(y.type)
+                      }
+                    });
+                    o[b] = S;
+                  }
+                else
+                  o[f] = {
+                    type: "multiple",
+                    members: s.type.elements,
+                    rest: s.type.rest,
+                    required: !g(s.type),
+                    nullableOrUndefined: g(s.type)
+                  };
+              } else {
+                const d = m({
+                  parent: f,
+                  property: s.type,
+                  meta: {
+                    required: !g(s.type),
+                    nullableOrUndefined: g(s.type)
+                  }
+                });
+                o[f] = d;
+              }
+            }
+        } else
+          o[l] = {
+            type: "multiple",
+            members: r.type.elements,
+            rest: r.type.rest,
+            required: u,
+            nullableOrUndefined: a
+          };
+      else {
+        const T = m({
+          parent: l,
+          property: r.type,
+          meta: {
+            // an empty string is valid for a S.String field, so we should not mark it as required
+            // TODO: handle this better via the createMeta minLength parsing
+            required: u && (r.type._tag !== "StringKeyword" || U(r.type).minLength),
+            nullableOrUndefined: a
+          }
+        });
+        o[l] = T;
       }
     }
+    return o;
+  }
+  if (t) {
+    const r = E(t);
+    if (Object.hasOwnProperty.call(e, "required") || (e.required = !r), n.AST.isUnion(t)) {
+      const a = t.types.find(
+        (u) => u._tag !== "UndefinedKeyword" && u !== n.Null.ast
+      );
+      return "propertySignatures" in a ? m({
+        propertySignatures: a.propertySignatures,
+        parent: i,
+        meta: e
+      }) : t.types.every(n.AST.isLiteral) ? {
+        ...e,
+        type: "select",
+        members: t.types.map((u) => u.literal)
+      } : {
+        ...e,
+        ...m({
+          parent: i,
+          meta: e,
+          property: a
+        })
+      };
+    }
+    if (n.AST.isTupleType(t))
+      return {
+        ...e,
+        type: "multiple",
+        members: t.elements,
+        rest: t.rest
+      };
+    const l = n.AST.getAnnotation(
+      t,
+      n.AST.JSONSchemaAnnotationId
+    ).pipe(c.getOrElse(() => ({})));
+    return e = { ...e, ...l }, "from" in t ? m({
+      parent: i,
+      meta: e,
+      property: t.from
+    }) : (e.type = n.AST.getAnnotation(
+      t,
+      n.AST.TitleAnnotationId
+    ).pipe(
+      c.getOrElse(() => "unknown")
+    ), e);
+  }
+  return o;
+}, L = (e) => {
+  const i = e.ast, t = {};
+  if (i._tag === "Transformation" || i._tag === "Refinement")
+    return L(n.make(i.from));
+  if ("propertySignatures" in i) {
+    const p = m({
+      propertySignatures: i.propertySignatures
+    });
+    if (Object.values(p).every((r) => r && "type" in r))
+      return p;
+    const o = (r, l = "") => {
+      for (const a in r) {
+        const u = l ? `${l}.${a}` : a;
+        r[a] && typeof r[a] == "object" && "type" in r[a] ? t[u] = r[a] : r[a] && typeof r[a] == "object" && o(r[a], u);
+      }
+    };
+    o(p);
+  }
+  return t;
+}, P = (e) => n.extend(e, n.Struct({})), F = (e) => {
+  const i = L(e), t = q(
+    e.ast,
+    c.liftPredicate((p) => p._tag === "Refinement" && "filter" in p),
+    c.flatMap((p) => n.AST.getJSONSchemaAnnotation(p)),
+    c.filter((p) => "items" in p),
+    c.filterMap(({ items: p }) => n.decodeUnknownOption(w)(p)),
+    c.zipWith(
+      n.AST.getMessageAnnotation(e.ast),
+      (p, o) => ({
+        items: p,
+        message: o("")
+      })
+    ),
+    c.getOrUndefined
   );
-};
+  return { schema: e, meta: i, filterItems: t };
+}, j = (e) => {
+  const { trans: i } = _();
+  let t;
+  switch (e.type) {
+    case "string":
+      t = n.String.annotations({
+        message: () => i("validation.empty")
+      }), e.format === "email" && (t = n.compose(
+        t,
+        n.Email.annotations({
+          message: () => i("validation.email.invalid")
+        })
+      )), e.required && t.annotations({
+        message: () => i("validation.empty")
+      }), e.maxLength && (t = t.pipe(n.maxLength(e.maxLength)).annotations({
+        message: () => i("validation.string.maxLength", {
+          maxLength: e.maxLength
+        })
+      })), e.minLength && (t = t.pipe(n.minLength(e.minLength)).annotations({
+        message: () => i("validation.string.minLength", {
+          minLength: e.minLength
+        })
+      }));
+      break;
+    case "number":
+      t = n.Number.annotations({
+        message: () => i("validation.empty")
+      }), e.required && t.annotations({
+        message: () => i("validation.empty")
+      }), e.minimum && (t = t.pipe(n.greaterThanOrEqualTo(e.minimum)).annotations({
+        message: () => i("validation.number.min", {
+          minimum: e.minimum,
+          isExclusive: !0
+        })
+      })), e.maximum && (t = t.pipe(n.lessThanOrEqualTo(e.maximum)).annotations({
+        message: () => i("validation.number.max", {
+          maximum: e.maximum,
+          isExclusive: !0
+        })
+      })), e.exclusiveMinimum && (t = t.pipe(n.greaterThan(e.exclusiveMinimum)).annotations({
+        message: () => i("validation.number.min", {
+          minimum: e.exclusiveMinimum,
+          isExclusive: !1
+        })
+      })), e.exclusiveMaximum && (t = t.pipe(n.lessThan(e.exclusiveMaximum)).annotations({
+        message: () => i("validation.number.max", {
+          maximum: e.exclusiveMaximum,
+          isExclusive: !1
+        })
+      }));
+      break;
+    case "select":
+      t = n.Literal(...e.members).annotations({
+        message: () => ({
+          message: i("validation.not_a_valid", {
+            type: "select",
+            message: e.members.join(", ")
+          }),
+          override: !0
+        })
+      });
+      break;
+    case "multiple":
+      t = n.Array(n.String).annotations({
+        message: () => i("validation.not_a_valid", {
+          type: "multiple",
+          message: e.members.join(", ")
+        })
+      });
+      break;
+    case "boolean":
+      t = n.Boolean;
+      break;
+    // todo: switch must be exhaustive or have default case, otherwise falls through with schema undefined.
+    case "unknown":
+      t = n.Unknown;
+      break;
+  }
+  return e.required ? t.pipe(
+    n.annotations({
+      message: () => i("validation.empty")
+    })
+  ) : t = n.NullishOr(t), n.standardSchemaV1(t);
+}, R = (e, i) => n.NullOr(e).pipe(
+  n.transform(n.typeSchema(e), {
+    decode: (t) => t ?? i(),
+    encode: (t) => t
+  })
+), k = [
+  "button",
+  "checkbox",
+  "color",
+  "date",
+  "email",
+  "number",
+  "password",
+  "radio",
+  "range",
+  "search",
+  "submit",
+  "tel",
+  "text",
+  "time",
+  "url"
+], J = (e) => k.includes(e) ? e : "text";
 export {
-  W as createUseFormWithCustomInput
+  m as createMeta,
+  P as duplicateSchema,
+  j as generateInputStandardSchemaFromFieldMeta,
+  F as generateMetaFromSchema,
+  J as getInputType,
+  R as nullableInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue-components",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "peerDependencies": {
     "@mdi/js": "^7.4.47",
     "effect": "^3.18.0",
@@ -17,8 +17,8 @@
     "@storybook/vue3-vite": "^9.1.9",
     "@types/node": "^24.6.0",
     "@vitejs/plugin-vue": "^6.0.1",
-    "@vueuse/core": "^13.9.0",
     "@vue/test-utils": "^2.4.6",
+    "@vueuse/core": "^13.9.0",
     "dprint": "^0.50.2",
     "jsdom": "^27.0.0",
     "rimraf": "^6.0.1",
@@ -49,9 +49,10 @@
     "@opentelemetry/api": "^1.9.0",
     "@tanstack/vue-form": "^1.23.5",
     "highlight.js": "^11.11.1",
+    "mitt": "^3.0.1",
     "vue3-highlightjs": "^1.0.5",
-    "@effect-app/vue": "2.82.0",
-    "effect-app": "3.9.0"
+    "effect-app": "3.9.0",
+    "@effect-app/vue": "2.82.0"
   },
   "scripts": {
     "build": "pnpm build:run",

package/src/components/OmegaForm/OmegaInternalInput.vue

@@ -57,9 +57,11 @@ const fieldType = computed(() => {
 })
 
 const fieldValue = computed(() => fieldState.value.value)
+// workaround strange tanstack form issue where the errors key becomes undefined ???
+const _errors = computed(() => fieldState.value.meta.errors ?? [])
 const errors = computed(() =>
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fieldState.value.meta.errors.map((e: any) => e?.message).filter(Boolean)
+  _errors.value.map((e: any) => e?.message).filter(Boolean)
 )
 
 const isFalsyButNotZero = (value: unknown): boolean => {
@@ -123,9 +125,9 @@ const showedErrors = computed(() => {
 })
 
 watch(
-  () => fieldState.value.meta.errors,
-  () => {
-    if (fieldState.value.meta.errors.length) {
+  _errors,
+  (errors) => {
+    if (errors.length) {
       mapError({
         inputId: id,
         errors: fieldState

package/src/components/OmegaForm/blockDialog.ts

@@ -0,0 +1,56 @@
+import mitt from "mitt"
+import { inject, type InjectionKey, provide, type Ref } from "vue"
+import { onMountedWithCleanup } from "./onMountedWithCleanup"
+
+export type DialogClosing = { prevent?: boolean | Promise<boolean> }
+const makeBus = () => mitt<{ "dialog-closing": DialogClosing }>()
+
+const Bus = Symbol("dialog") as InjectionKey<ReturnType<typeof makeBus>>
+
+export const injectBus = () => inject(Bus)
+export const provideBus = () => {
+  const bus = makeBus()
+  provide(Bus, bus)
+  return bus
+}
+
+export const usePreventClose = (mkIsDirty: () => Ref<boolean>) => {
+  const bus = injectBus()
+  if (!bus) {
+    return
+  }
+  const isDirty = mkIsDirty()
+  onMountedWithCleanup(() => {
+    const onDialogClosing = (evt: DialogClosing) => {
+      if (isDirty.value) {
+        if (!confirm("Es sind ungespeicherte Änderungen vorhanden. Wirklich schließen?")) {
+          evt.prevent = true
+        }
+      }
+    }
+    bus.on("dialog-closing", onDialogClosing)
+
+    return () => bus.off("dialog-closing", onDialogClosing)
+  })
+}
+
+export const useOnClose = (close: () => void) => {
+  const bus = provideBus()
+  const onClose = () => {
+    const evt: DialogClosing = {}
+    bus.emit("dialog-closing", evt)
+    if (evt.prevent) {
+      if (typeof evt.prevent === "object" && "then" in evt.prevent) {
+        evt.prevent.then((r) => {
+          if (r !== false) {
+            close()
+          }
+        })
+      }
+    } else {
+      close()
+    }
+  }
+
+  return onClose
+}

package/src/components/OmegaForm/index.ts

@@ -5,6 +5,8 @@ export { type OmegaFormReturn, useOmegaForm } from "./useOmegaForm"
 export { default as OmegaInput } from "./OmegaInput.vue"
 export { default as OmegaVuetifyInput } from "./OmegaInternalInput.vue"
 
+export { useOnClose, usePreventClose } from "./blockDialog"
+
 export { getInputType } from "./OmegaFormStuff"
 
 export { createUseFormWithCustomInput } from "./createUseFormWithCustomInput"

package/src/components/OmegaForm/onMountedWithCleanup.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
+
+import { onMounted, onUnmounted } from "vue"
+
+/**
+ * A convenience wrapper for onMounted and onUnmounted, the returned Function of the callback,
+ * will be ran on unmount.
+ * @param cb Function to run on unmount
+ */
+export function onMountedWithCleanup(cb: () => Function | void) {
+  let cleanup: Function | undefined = undefined
+  onMounted(() => {
+    const cleanup_ = cb()
+    if (cleanup_) {
+      cleanup = cleanup_
+    }
+  })
+
+  onUnmounted(() => {
+    if (cleanup) cleanup()
+  })
+}

package/src/components/OmegaForm/useOmegaForm.ts

@@ -7,6 +7,7 @@ import { Data, Effect, Fiber, Option, Order, S } from "effect-app"
 import { runtimeFiberAsPromise } from "effect-app/utils"
 import { isObject } from "effect/Predicate"
 import { Component, computed, ConcreteComponent, h, type InjectionKey, onBeforeUnmount, onMounted, onUnmounted, watch } from "vue"
+import { usePreventClose } from "./blockDialog"
 import { type InputProps } from "./InputProps"
 import OmegaArray from "./OmegaArray.vue"
 import OmegaAutoGen from "./OmegaAutoGen.vue"
@@ -100,6 +101,8 @@ export type OmegaConfig<T> = {
     id?: string
   } & keysRule<T>
 
+  ignorePreventCloseEvents?: boolean
+
   input?: any
 }
 
@@ -909,6 +912,10 @@ export const useOmegaForm = <
   //  provide(OmegaFormKey, formWithExtras)
   const errorContext = buildOmegaErrors(formSubmissionAttempts, errors, omegaConfig?.showErrorsOn)
 
+  if (!omegaConfig?.ignorePreventCloseEvents) {
+    usePreventClose(() => formWithExtras.useStore((state) => state.isDirty))
+  }
+
   return Object.assign(formWithExtras, {
     errorContext,
     Form: fHoc(formWithExtras)(OmegaForm as any) as any,

package/dist/vue-components.es32.js

@@ -1,7 +0,0 @@
-var R;
-(function(E) {
-  E[E.NONE = 0] = "NONE", E[E.ERROR = 30] = "ERROR", E[E.WARN = 50] = "WARN", E[E.INFO = 60] = "INFO", E[E.DEBUG = 70] = "DEBUG", E[E.VERBOSE = 80] = "VERBOSE", E[E.ALL = 9999] = "ALL";
-})(R || (R = {}));
-export {
-  R as DiagLogLevel
-};