@signal24/vue-foundation 4.30.1 → 4.30.3

package/dist/vue-foundation.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as q, ref as N, computed as O, watch as H, onMounted as z, createElementBlock as I, withDirectives as fe, openBlock as T, createElementVNode as U, toDisplayString as J, createCommentVNode as W, Fragment as he, renderList as pe, vModelSelect as Ht, getCurrentInstance as Oe, withModifiers as Ne, normalizeStyle as Vt, normalizeClass as P, renderSlot as K, reactive as Bt, h as ve, Teleport as _t, markRaw as Wt, onBeforeUnmount as me, resolveDirective as Pt, createBlock as at, createSlots as jt, withCtx as be, createTextVNode as te, onUpdated as Ut, vModelText as zt, onActivated as st, onDeactivated as lt } from "vue";
-import { compact as ut, cloneDeep as qt, uniq as Jt, groupBy as Kt, isEqual as Me, debounce as Yt, startCase as Xt, upperFirst as Zt, remove as Gt, last as Qt } from "lodash";
+import { defineComponent as q, ref as N, computed as O, watch as H, onMounted as z, createElementBlock as I, withDirectives as fe, openBlock as T, createElementVNode as U, toDisplayString as J, createCommentVNode as W, Fragment as he, renderList as pe, vModelSelect as Ht, getCurrentInstance as Ne, withModifiers as Le, normalizeStyle as Vt, normalizeClass as P, renderSlot as K, reactive as Bt, h as ve, Teleport as _t, markRaw as Wt, onBeforeUnmount as me, resolveDirective as Pt, createBlock as at, createSlots as jt, withCtx as Se, createTextVNode as te, onUpdated as Ut, vModelText as zt, onActivated as st, onDeactivated as lt } from "vue";
+import { compact as ut, cloneDeep as qt, uniq as Jt, groupBy as Kt, isEqual as Ce, debounce as Yt, startCase as Xt, upperFirst as Zt, remove as Gt, last as Qt } from "lodash";
 import { configureOpenApiClient as en, OpenApiError as tn } from "@signal24/openapi-client-codegen";
 import { escapeHtml as br } from "@vue/shared";
 import { format as X, addDays as nn, parse as on } from "date-fns";
@@ -64,7 +64,7 @@ const ln = /* @__PURE__ */ q({
     anchor: {}
   },
   setup(e) {
-    const t = e, o = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, a = N({ visibility: "hidden", top: "0", left: "0" }), p = N([]), l = Oe();
+    const t = e, o = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, a = N({ visibility: "hidden", top: "0", left: "0" }), p = N([]), l = Ne();
     z(y);
     function y() {
       if (!l) return;
@@ -108,7 +108,7 @@ const ln = /* @__PURE__ */ q({
     }), (v, c) => (T(), I("div", {
       class: P(["vf-overlay-anchor", p.value]),
       style: Vt(a.value),
-      onClick: Ne(E, ["stop"])
+      onClick: Le(E, ["stop"])
     }, [
       K(v.$slots, "default")
     ], 6));
@@ -159,7 +159,7 @@ function ie(e) {
   const t = j.indexOf(e);
   t >= 0 && j.splice(t, 1);
 }
-async function Le(e, t, o) {
+async function Re(e, t, o) {
   return new Promise((a) => {
     let p = null;
     const y = { ...t, callback: async (g) => {
@@ -185,18 +185,18 @@ function se(e, t) {
   } : { title: t ? e : void 0, message: t ?? e, classes: [] };
 }
 async function hn(e, t) {
-  await Le(le, se(e, t));
+  await Re(le, se(e, t));
 }
 async function Go(e, t) {
   const o = se(e, t);
-  return await Le(le, {
+  return await Re(le, {
     ...o,
     shouldConfirm: !0
   }) === !0;
 }
 async function Qo(e, t) {
   const o = se(e, t);
-  return await Le(le, {
+  return await Re(le, {
     ...o,
     shouldConfirm: !0,
     classes: ["destructive", ...o.classes]
@@ -235,27 +235,28 @@ class ye extends Error {
 function pn(e) {
   return e instanceof ye ? e.message : `An application error has occurred:
 
-${Re(e).message}
+${Ee(e).message}
 
 Please refresh the page and try again. If this error persists, ${$.unhandledErrorSupportText}.`;
 }
-function Re(e) {
-  return vn(e) ? e : new Error(String(e));
+function Ee(e, t) {
+  const o = vn(e) ? e : new Error(String(e));
+  return t && (o.cause = Ee(t)), o;
 }
 function vn(e) {
   return e instanceof Error || typeof e == "object" && e !== null && "message" in e && "name" in e;
 }
 async function nr(e, t) {
-  const o = Re(e);
+  const o = Ee(e, t?.cause);
   return o instanceof ye || $.errorHandler(o), hn({
     title: t?.title,
     message: o,
     classes: t?.classes
   });
 }
-async function or(e) {
-  const t = Re(e);
-  t instanceof ye || $.errorHandler(t);
+async function or(e, t) {
+  const o = Ee(e, t);
+  o instanceof ye || $.errorHandler(o);
 }
 const ne = Symbol("MaskState");
 function rr(e, t) {
@@ -276,7 +277,7 @@ function mn(e, t) {
 function dt(e) {
   e[ne] && e.removeChild(e[ne].maskEl);
 }
-const Ce = Symbol("FormMaskState");
+const Oe = Symbol("FormMaskState");
 function gn(e, t, o) {
   const a = e instanceof Element ? e : ht(e);
   if (!a) return () => {
@@ -286,7 +287,7 @@ function gn(e, t, o) {
   let l;
   p && (l = p.tagName === "INPUT" ? p.value : p.innerHTML, p.setAttribute("disabled", "disabled"), p.innerText = o ?? "Please wait...");
   const g = [...a.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
-  return g.forEach((E) => E.setAttribute("disabled", "disabled")), a[Ce] = {
+  return g.forEach((E) => E.setAttribute("disabled", "disabled")), a[Oe] = {
     disabledElements: g,
     waitButton: p,
     buttonHtml: l
@@ -295,8 +296,8 @@ function gn(e, t, o) {
 function ft(e) {
   const t = e instanceof Element ? e : ht(e);
   if (!t) return;
-  const o = t[Ce];
-  o && (t.classList.remove("vf-masked"), o.disabledElements.forEach((a) => a.removeAttribute("disabled")), o.waitButton && (o.waitButton.innerHTML = o.buttonHtml, o.waitButton.removeAttribute("disabled")), delete t[Ce]);
+  const o = t[Oe];
+  o && (t.classList.remove("vf-masked"), o.disabledElements.forEach((a) => a.removeAttribute("disabled")), o.waitButton && (o.waitButton.innerHTML = o.buttonHtml, o.waitButton.removeAttribute("disabled")), delete t[Oe]);
 }
 function ht(e) {
   const t = e?.$?.vnode.el;
@@ -315,11 +316,12 @@ const yn = ["id"], En = {
     closeOnMaskClick: { type: Boolean },
     scrolls: { type: Boolean },
     closeX: { type: Boolean },
-    class: {}
+    class: {},
+    onClose: { type: Function }
   },
   emits: ["formSubmit"],
   setup(e, { expose: t }) {
-    const o = Oe(), a = e;
+    const o = Ne(), a = e;
     t({ mask: n, unmask: i, hide: r, unhide: s });
     const p = N(), l = N(), y = N(!1), g = O(() => ut([...Array.isArray(a.class) ? a.class : [a.class], y.value && "hidden"]));
     z(() => {
@@ -337,7 +339,7 @@ const yn = ["id"], En = {
       }
     }
     function c() {
-      ct(o);
+      a.onClose ? a.onClose() : ct(o);
     }
     function n() {
       return gn(l.value), () => i();
@@ -362,7 +364,7 @@ const yn = ["id"], En = {
         ref: l,
         action: ".",
         class: P(["vf-modal", { scrolls: e.scrolls }]),
-        onSubmit: h[0] || (h[0] = Ne((f) => u.$emit("formSubmit"), ["prevent"]))
+        onSubmit: h[0] || (h[0] = Le((f) => u.$emit("formSubmit"), ["prevent"]))
       }, [
         u.$slots.header ? (T(), I("div", En, [
           K(u.$slots, "header"),
@@ -401,7 +403,7 @@ const yn = ["id"], En = {
         class: P(["vf-alert", ...e.classes ?? []]),
         scrolls: ""
       }, jt({
-        default: be(() => [
+        default: Se(() => [
           e.iconClass ? (T(), I("i", {
             key: 0,
             class: P(["vf-alert-icon", e.iconClass])
@@ -419,14 +421,14 @@ const yn = ["id"], En = {
       }, [
         e.title ? {
           name: "header",
-          fn: be(() => [
+          fn: Se(() => [
             te(J(e.title), 1)
           ]),
           key: "0"
         } : void 0,
         e.isBare ? void 0 : {
           name: "footer",
-          fn: be(() => [
+          fn: Se(() => [
             e.shouldConfirm ? (T(), I(he, { key: 0 }, [
               fe((T(), I("button", {
                 class: "primary",
@@ -981,8 +983,8 @@ function Mn() {
             this.opt = i;
             var s = 0, u = "wrapMatches", h = this.getSeparatedKeywords(typeof n == "string" ? [n] : n), f = h.keywords, m = h.length, w = this.opt.caseSensitive ? "" : "i", S = function C(L) {
               var R = new RegExp(r.createRegExp(L), "gm" + w), F = 0;
-              r.log('Searching with expression "' + R + '"'), r[u](R, 1, function(V, Ee) {
-                return r.opt.filter(Ee, L, s, F);
+              r.log('Searching with expression "' + R + '"'), r[u](R, 1, function(V, ke) {
+                return r.opt.filter(ke, L, s, F);
               }, function(V) {
                 F++, s++, r.opt.each(V);
               }, function() {
@@ -1281,15 +1283,15 @@ for (let e = 0; e < 256; ++e)
 function Hn(e, t = 0) {
   return (A[e[t + 0]] + A[e[t + 1]] + A[e[t + 2]] + A[e[t + 3]] + "-" + A[e[t + 4]] + A[e[t + 5]] + "-" + A[e[t + 6]] + A[e[t + 7]] + "-" + A[e[t + 8]] + A[e[t + 9]] + "-" + A[e[t + 10]] + A[e[t + 11]] + A[e[t + 12]] + A[e[t + 13]] + A[e[t + 14]] + A[e[t + 15]]).toLowerCase();
 }
-let Se;
+let Te;
 const Vn = new Uint8Array(16);
 function Bn() {
-  if (!Se) {
+  if (!Te) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    Se = crypto.getRandomValues.bind(crypto);
+    Te = crypto.getRandomValues.bind(crypto);
   }
-  return Se(Vn);
+  return Te(Vn);
 }
 const _n = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Xe = { randomUUID: _n };
 function Wn(e, t, o) {
@@ -1368,14 +1370,14 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
     t({
       addRemoteOption: $t
     });
-    const g = N(), E = N(), v = N(), c = N(!1), n = N(), i = N(!1), r = N(""), s = N(null), u = N(null), h = N(!1), f = N(null), m = N(!1), w = O(() => l.showCreateTextOnNewItem ?? !0), S = O(() => !!(l.options || n.value)), C = O(() => l.options ?? n.value ?? []), L = O(() => l.prependOptions ?? []), R = O(() => l.appendOptions ?? []), F = O(() => !!l.disabled || !S.value && !l.loadOptions), V = O(() => l.loadingText || "..."), Ee = O(() => !S.value && (!l.loadOptions || l.preload || l.modelValue && (l.valueField || l.valueExtractor)) ? V.value : l.nullTitle ? l.nullTitle : l.placeholder || ""), bt = O(() => l.noResultsText || "No options match your search."), Z = O(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (d) => d[l.valueField] : null), ke = O(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (d) => String(d[l.keyField]) : Z.value ? (d) => String(Z.value(d)) : null), St = O(() => l.groupFormatter ? l.groupFormatter : l.groupField ? (d) => String(d[l.groupField]) : null), $e = O(() => l.formatter ? l.formatter : l.labelField ? (d) => String(d[l.labelField]) : (d) => String(d)), He = O(() => l.selectionFormatter ? l.selectionFormatter : $e.value), Ve = O(() => [...L.value, ...C.value, ...R.value]), Be = O(() => !!(l.groupField || l.groupFormatter)), xe = O(() => Ve.value.map((d, b) => {
+    const g = N(), E = N(), v = N(), c = N(!1), n = N(), i = N(!1), r = N(""), s = N(null), u = N(null), h = N(!1), f = N(null), m = N(!1), w = O(() => l.showCreateTextOnNewItem ?? !0), S = O(() => !!(l.options || n.value)), C = O(() => l.options ?? n.value ?? []), L = O(() => l.prependOptions ?? []), R = O(() => l.appendOptions ?? []), F = O(() => !!l.disabled || !S.value && !l.loadOptions), V = O(() => l.loadingText || "..."), ke = O(() => !S.value && (!l.loadOptions || l.preload || l.modelValue && (l.valueField || l.valueExtractor)) ? V.value : l.nullTitle ? l.nullTitle : l.placeholder || ""), bt = O(() => l.noResultsText || "No options match your search."), Z = O(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (d) => d[l.valueField] : null), xe = O(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (d) => String(d[l.keyField]) : Z.value ? (d) => String(Z.value(d)) : null), St = O(() => l.groupFormatter ? l.groupFormatter : l.groupField ? (d) => String(d[l.groupField]) : null), $e = O(() => l.formatter ? l.formatter : l.labelField ? (d) => String(d[l.labelField]) : (d) => String(d)), He = O(() => l.selectionFormatter ? l.selectionFormatter : $e.value), Ve = O(() => [...L.value, ...C.value, ...R.value]), Be = O(() => !!(l.groupField || l.groupFormatter)), we = O(() => Ve.value.map((d, b) => {
       const k = St.value?.(d), x = $e.value(d), M = l.subtitleFormatter?.(d), B = x ? x.trim().toLowerCase() : "", qe = M ? M.trim().toLowerCase() : "", ue = [];
       return l.searchFields ? l.searchFields.forEach((Je) => {
         d[Je] && ue.push(
           String(d[Je]).toLowerCase().replace(/^[a-z0-9 ]+$/i, "")
         );
       }) : (ue.push(B), qe && ue.push(qe)), {
-        key: ke.value?.(d) ?? String(b),
+        key: xe.value?.(d) ?? String(b),
         group: k,
         title: x,
         subtitle: M,
@@ -1383,7 +1385,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
         ref: d
       };
     })), D = O(() => {
-      let d = [...xe.value];
+      let d = [...we.value];
       if (i.value) {
         const b = r.value.trim().toLowerCase().replace(/[^a-z0-9 ]+$/i, "");
         b.length && (d = d.filter((k) => k.searchContent.includes(b)), m.value && (d.find((x) => x.searchContent === b) !== void 0 || d.push({
@@ -1409,7 +1411,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
         options: b[k]
       }));
     });
-    H(() => l.modelValue, G), H(xe, () => {
+    H(() => l.modelValue, G), H(we, () => {
       h.value && setTimeout(je, 0);
     }), H(r, () => {
       i.value && !l.remoteSearch && !r.value.trim().length && (i.value = !1);
@@ -1420,7 +1422,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
     }), z(async () => {
       m.value = l.onCreateItem !== void 0, l.loadOptions && l.preload ? await _e() : !l.options && !l.loadOptions && (l.valueField || l.valueExtractor) || G(), H(s, () => {
         const d = Ye(s.value) && Z.value !== null ? Z.value(s.value) : s.value;
-        Me(l.modelValue, d) || y("update:modelValue", d);
+        Ce(l.modelValue, d) || y("update:modelValue", d);
       }), l.remoteSearch && H(r, Yt(It, 250));
     }), me(() => {
       v.value?.remove();
@@ -1446,11 +1448,11 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
           return;
         }
         if (d.key == "ArrowUp" || d.key == "ArrowDown")
-          return d.preventDefault(), we(d.key == "ArrowUp" ? -1 : 1);
+          return d.preventDefault(), be(d.key == "ArrowUp" ? -1 : 1);
         if (d.key == "PageUp" || d.key == "PageDown")
-          return d.preventDefault(), we(d.key == "PageUp" ? -10 : 10);
+          return d.preventDefault(), be(d.key == "PageUp" ? -10 : 10);
         if (d.key == "Home" || d.key == "End")
-          return d.preventDefault(), we(d.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
+          return d.preventDefault(), be(d.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
         if (d.key == "Enter") {
           d.preventDefault();
           const b = D.value.find((k) => k.key == f.value);
@@ -1473,13 +1475,13 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
       s.value ? f.value = Nt(s.value) : l.nullTitle && (f.value = a);
     }
     function Nt(d) {
-      return ke.value ? ke.value(s.value) : Lt(d)?.key ?? "";
+      return xe.value ? xe.value(s.value) : Lt(d)?.key ?? "";
     }
     function Lt(d) {
       const b = D.value.find((M) => M.ref === d);
       if (b)
         return b;
-      const k = l.keyExtractor ? (M, B) => l.keyExtractor(M) === l.keyExtractor(B) : Me, x = D.value.find((M) => k(M.ref, d));
+      const k = l.keyExtractor ? (M, B) => l.keyExtractor(M) === l.keyExtractor(B) : Ce, x = D.value.find((M) => k(M.ref, d));
       return x || null;
     }
     function Rt() {
@@ -1506,7 +1508,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
     function Dt(d) {
       f.value = d ? d.key : null;
     }
-    function we(d) {
+    function be(d) {
       const b = D.value.findIndex((B) => B.key == f.value);
       let k = b + d;
       if (k < 0 ? k = 0 : k >= D.value.length && (k = D.value.length - 1), b == k) return;
@@ -1521,7 +1523,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
         const b = r.value.trim();
         r.value = "", s.value = null, u.value = null, l.onCreateItem?.(b);
       } else {
-        const k = xe.value.find((x) => x.key == d.key).ref;
+        const k = we.value.find((x) => x.key == d.key).ref;
         s.value = k, u.value = He.value(k), r.value = u.value ?? "";
       }
       E.value?.blur(), ze();
@@ -1566,7 +1568,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
         type: "text",
         disabled: F.value,
         class: P({ nullable: !!e.nullTitle }),
-        placeholder: Ee.value,
+        placeholder: ke.value,
         required: e.required,
         name: e.name,
         "data-1p-ignore": "",
@@ -1643,7 +1645,7 @@ const qn = ["disabled", "placeholder", "required", "name"], Jn = {
         y.value = a.value.find((E) => E.value === g) ?? null;
       }
     ), H(y, (g) => {
-      const E = g ? a.value.find((v) => Me(v, g))?.value : null;
+      const E = g ? a.value.find((v) => Ce(v, g))?.value : null;
       l("update:modelValue", E ?? null);
     }), (g, E) => (T(), at(eo, {
       modelValue: y.value,
@@ -1690,7 +1692,7 @@ const to = { class: "content" }, no = { class: "message" }, oo = {
       }), setTimeout(() => t.callback(), p * 1e3);
     }), (p, l) => (T(), I("div", {
       class: P(["vf-toast", [e.className, { top: e.position === "top", bottom: e.position !== "top" }]]),
-      onClick: Ne(o, ["stop"])
+      onClick: Le(o, ["stop"])
     }, [
       U("div", to, [
         U("div", no, J(e.message), 1),
@@ -1784,7 +1786,7 @@ const Ze = {
   ...e(Ze)
 }), Ae = Symbol("HookState");
 function yr(e, t) {
-  const o = t ?? Oe();
+  const o = t ?? Ne();
   z(() => wo(o, e), o), st(() => bo(o), o), lt(() => Ge(o), o), me(() => Ge(o), o);
 }
 function wo(e, t) {
@@ -1803,12 +1805,12 @@ function Ge(e) {
   const t = e[Ae];
   t?.el?.uninstall(), t?.ancestor?.uninstall(), t?.window?.uninstall();
 }
-const Te = ["auto", "scroll"];
+const Ie = ["auto", "scroll"];
 function mt(e) {
   const t = e.parentElement;
   if (!t) return null;
   const o = window.getComputedStyle(t);
-  return Te.includes(o.overflow) || Te.includes(o.overflowX) || Te.includes(o.overflowY) ? t : mt(t);
+  return Ie.includes(o.overflow) || Ie.includes(o.overflowX) || Ie.includes(o.overflowY) ? t : mt(t);
 }
 class oe {
   constructor(t, o) {
@@ -1988,17 +1990,17 @@ const ee = Symbol("InfiniteScrollHandler"), Vo = {
 function rt(e, t) {
   e.tagName == "LABEL" && (e = e.querySelector("input")), t.value ? e.setAttribute("readonly", "readonly") : e.removeAttribute("readonly");
 }
-const Ie = /* @__PURE__ */ new WeakMap(), _o = {
+const Me = /* @__PURE__ */ new WeakMap(), _o = {
   beforeMount(e) {
     const t = new ResizeObserver(() => {
       const o = window.getComputedStyle(e).minWidth.match(/^(\d+)px$/)?.[1], a = o ? parseInt(o, 10) : 0;
       e.clientWidth <= a || (e.style.minWidth = `${e.clientWidth}px`);
     });
-    Ie.set(e, t), t.observe(e);
+    Me.set(e, t), t.observe(e);
   },
   beforeUnmount(e) {
-    const t = Ie.get(e);
-    t && (t.unobserve(e), Ie.delete(e));
+    const t = Me.get(e);
+    t && (t.unobserve(e), Me.delete(e));
   }
 }, Wo = {
   mounted: it,
@@ -2105,7 +2107,7 @@ export {
   gn as maskForm,
   fr as nl2br,
   cr as nullifyEmptyInputs,
-  Le as presentOverlay,
+  Re as presentOverlay,
   ie as removeOverlayInjection,
   ar as replaceElement,
   hn as showAlert,
@@ -2117,7 +2119,7 @@ export {
   er as showWait,
   Nn as sleep,
   lr as sleepSecs,
-  Re as toError,
+  Ee as toError,
   ir as unmaskComponent,
   dt as unmaskEl,
   ft as unmaskForm,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.30.1",
+    "version": "4.30.3",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {

package/src/components/vf-modal.vue

@@ -30,6 +30,7 @@ const props = defineProps<{
     scrolls?: boolean;
     closeX?: boolean;
     class?: string | string[];
+    onClose?: () => void;
 }>();
 
 defineEmits(['formSubmit']);
@@ -77,7 +78,11 @@ function handleEscapeKey(e: KeyboardEvent) {
 }
 
 function closeParent() {
-    dismissOverlayInjectionByInternalInstance(instance!);
+    if (props.onClose) {
+        props.onClose();
+    } else {
+        dismissOverlayInjectionByInternalInstance(instance!);
+    }
 }
 
 function mask() {

package/src/helpers/error.ts

@@ -8,6 +8,10 @@ export class UserError extends Error {
     }
 }
 
+interface ErrorWithCause extends Error {
+    cause?: Error;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function formatError(err: any): string {
     if (err instanceof UserError) {
@@ -19,9 +23,12 @@ export function formatError(err: any): string {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function toError(err: any) {
-    if (isError(err)) return err;
-    return new Error(String(err));
+export function toError(err: any, cause?: any): ErrorWithCause {
+    const error = (isError(err) ? err : new Error(String(err))) as ErrorWithCause;
+    if (cause) {
+        error.cause = toError(cause);
+    }
+    return error;
 }
 
 export function isError(err: unknown): err is Error {
@@ -31,12 +38,14 @@ export function isError(err: unknown): err is Error {
 }
 
 interface IErrorAlertOptions {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cause?: any;
     title?: string;
     classes?: string[];
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function handleErrorAndAlert(errIn: any, options?: IErrorAlertOptions) {
-    const err = toError(errIn);
+    const err = toError(errIn, options?.cause);
 
     if (!(err instanceof UserError)) {
         VfOptions.errorHandler(err);
@@ -50,8 +59,8 @@ export async function handleErrorAndAlert(errIn: any, options?: IErrorAlertOptio
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export async function handleError(errIn: any) {
-    const err = toError(errIn);
+export async function handleError(errIn: any, cause?: any) {
+    const err = toError(errIn, cause);
 
     if (!(err instanceof UserError)) {
         VfOptions.errorHandler(err);