@signal24/vue-foundation 4.13.9 → 4.14.1

package/dist/src/components/overlay-container.d.ts

@@ -1,14 +1,15 @@
 import type { Writable } from 'type-fest';
 import { type AllowedComponentProps, type ComponentInternalInstance, type ComponentPublicInstance, type ComputedOptions, type MethodOptions, type Raw, type VNode, type VNodeProps } from 'vue';
 import type { OverlayAnchorOptions } from './overlay-types';
-interface OverlayOptions {
+interface OverlayOptions<C extends OverlayComponent, R extends ComponentReturn<C>> {
     anchor?: OverlayAnchorOptions;
+    onCallback?: (result: R) => void | Promise<boolean>;
 }
-export interface OverlayInjection<C extends OverlayComponent> {
+export interface OverlayInjection<C extends OverlayComponent, R extends ComponentReturn<C>> {
     id: string;
     component: OverlayComponentUnwrapped<C>;
     props: OverlayComponentProps<C>;
-    options: OverlayOptions;
+    options: OverlayOptions<C, R>;
     vnode: VNode;
     wrapperVnode?: VNode;
 }
@@ -41,11 +42,11 @@ type ComponentReturn<M extends OverlayComponent> = OverlayComponentProps<M> exte
 export type AnyComponentPublicInstance = {
     $?: ComponentInternalInstance;
 };
-export declare function createOverlayInjection<C extends OverlayComponent>(component: C, props: OverlayComponentProps<C>, options?: OverlayOptions): OverlayInjection<C>;
+export declare function createOverlayInjection<C extends OverlayComponent, R extends ComponentReturn<C>>(component: C, props: OverlayComponentProps<C>, options?: OverlayOptions<C, R>): OverlayInjection<C, R>;
 export declare function dismissOverlayInjectionByInstance(instance: AnyComponentPublicInstance): void;
 export declare function dismissOverlayInjectionByInternalInstance(instance: ComponentInternalInstance): void;
 export declare function dismissOverlayInjectionByVnode(vnode: VNode): boolean;
 export declare function dismissOverlayInjectionById(id: string): boolean;
-export declare function removeOverlayInjection(injection: OverlayInjection<any>): void;
-export declare function presentOverlay<C extends OverlayComponent, R extends ComponentReturn<C>>(component: C, props: Omit<OverlayComponentProps<C>, 'callback'>, options?: OverlayOptions): Promise<R | undefined>;
+export declare function removeOverlayInjection(injection: OverlayInjection<any, any>): void;
+export declare function presentOverlay<C extends OverlayComponent, R extends ComponentReturn<C>>(component: C, props: Omit<OverlayComponentProps<C>, 'callback'>, options?: OverlayOptions<C, R>): Promise<R | undefined>;
 export {};

package/dist/vue-foundation.es.js

@@ -1,17 +1,17 @@
 var Ve = Object.defineProperty;
 var Fe = (e, t, n) => t in e ? Ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var E = (e, t, n) => (Fe(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { defineComponent as x, defineProps as _e, defineEmits as Ne, ref as O, computed as _, openBlock as d, createElementBlock as h, createElementVNode as w, toDisplayString as C, withDirectives as j, createCommentVNode as b, Fragment as U, renderList as J, vModelSelect as Re, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ke, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as Ue, markRaw as We, onBeforeUnmount as ne, resolveDirective as Oe, createBlock as be, createSlots as Pe, withCtx as Y, createTextVNode as ae, vModelText as qe, watch as ce, onActivated as ke, onDeactivated as Se } from "vue";
-import { compact as ze, debounce as Xe, isEqual as xe, upperFirst as Ye, startCase as Ze, cloneDeep as Ge, remove as Qe } from "lodash";
+var E = (e, t, n) => Fe(e, typeof t != "symbol" ? t + "" : t, n);
+import { defineComponent as C, defineProps as _e, defineEmits as Re, ref as b, computed as _, openBlock as d, createElementBlock as h, createElementVNode as w, toDisplayString as x, withDirectives as j, createCommentVNode as O, Fragment as U, renderList as J, vModelSelect as Ne, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ke, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as Ue, markRaw as We, onBeforeUnmount as ne, resolveDirective as be, createBlock as Oe, createSlots as Pe, withCtx as Y, createTextVNode as ae, vModelText as qe, watch as ce, onActivated as ke, onDeactivated as Se } from "vue";
+import { compact as ze, debounce as Xe, isEqual as Ce, upperFirst as Ye, startCase as Ze, cloneDeep as Ge, remove as Qe } from "lodash";
 import { escapeHtml as Je } from "@vue/shared";
 import { escapeHtml as ni } from "@vue/shared";
 import { installOpenApiClientInterceptors as et, isOpenApiError as tt } from "@signal24/openapi-client-codegen/browser";
 import { format as G } from "date-fns";
-const nt = x({
+const nt = C({
   setup() {
     const e = _e();
-    Ne(["update:modelValue"]);
-    const t = O(null), n = _(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = O(e.modelValue ?? null);
+    Re(["update:modelValue"]);
+    const t = b(null), n = _(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = b(e.modelValue ?? null);
     return { props: e, options: t, renderOptions: n, selectedItem: i };
   },
   watch: {
@@ -33,7 +33,7 @@ const nt = x({
       this.options = await this.props.loadFn();
     }
   }
-}), Ce = (e, t) => {
+}), xe = (e, t) => {
   const n = e.__vccOpts || e;
   for (const [i, s] of t)
     n[i] = s;
@@ -45,41 +45,40 @@ const nt = x({
   key: 0,
   value: null
 }, ot = ["value"];
-function rt(e, t, n, i, s, o) {
+function lt(e, t, n, i, s, o) {
   return e.renderOptions ? j((d(), h("select", {
     key: 1,
-    "onUpdate:modelValue": t[0] || (t[0] = (l) => e.selectedItem = l)
+    "onUpdate:modelValue": t[0] || (t[0] = (r) => e.selectedItem = r)
   }, [
-    e.props.nullText ? (d(), h("option", st, C(e.props.nullText), 1)) : b("", !0),
-    (d(!0), h(U, null, J(e.renderOptions, (l, r) => {
+    e.props.nullText ? (d(), h("option", st, x(e.props.nullText), 1)) : O("", !0),
+    (d(!0), h(U, null, J(e.renderOptions, (r, l) => {
       var a;
       return d(), h("option", {
-        key: r,
-        value: (a = e.options) == null ? void 0 : a[r]
-      }, C(l), 9, ot);
+        key: l,
+        value: (a = e.options) == null ? void 0 : a[l]
+      }, x(r), 9, ot);
     }), 128))
   ], 512)), [
-    [Re, e.selectedItem]
+    [Ne, e.selectedItem]
   ]) : (d(), h("select", it, [
-    w("option", null, C(e.props.loadingText || "Loading..."), 1)
+    w("option", null, x(e.props.loadingText || "Loading..."), 1)
   ]));
 }
-const Mn = /* @__PURE__ */ Ce(nt, [["render", rt]]), lt = /* @__PURE__ */ x({
+const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
   __name: "overlay-anchor",
   props: {
     overlayId: {},
     anchor: {}
   },
   setup(e) {
-    const t = e, n = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, i = O({ visibility: "hidden", top: "0", left: "0" }), s = O([]), o = ee();
-    L(l);
-    function l() {
-      if (!o)
-        return;
-      const p = o.vnode.el, { styles: g, classes: m } = r(p, n);
+    const t = e, n = t.anchor instanceof HTMLElement ? t.anchor : t.anchor.el, i = b({ visibility: "hidden", top: "0", left: "0" }), s = b([]), o = ee();
+    L(r);
+    function r() {
+      if (!o) return;
+      const p = o.vnode.el, { styles: g, classes: m } = l(p, n);
       i.value = g, s.value = m;
     }
-    function r(p, g) {
+    function l(p, g) {
       const m = t.anchor instanceof HTMLElement ? {} : t.anchor, v = g.getBoundingClientRect(), f = p.getBoundingClientRect();
       m.matchWidth && (f.width = v.width), m.matchHeight && (f.height = v.height);
       const u = m.class ? Array.isArray(m.class) ? m.class : [m.class] : [];
@@ -123,7 +122,7 @@ const Mn = /* @__PURE__ */ Ce(nt, [["render", rt]]), lt = /* @__PURE__ */ x({
   }
 });
 let at = 0;
-const S = je([]), In = x({
+const S = je([]), In = C({
   setup() {
     return () => W("div", [
       J(S, (e) => W(Ue, { key: e.id, to: "#vf-overlay-target" }, [e.wrapperVnode ?? e.vnode]))
@@ -133,13 +132,13 @@ const S = je([]), In = x({
 function ie(e, t, n) {
   const i = document.getElementById("vf-overlay-target") ?? document.createElement("div");
   i.id = "vf-overlay-target", i.removeAttribute("inert"), document.body.appendChild(i);
-  const s = String(++at), o = We(e), l = W(o, t), r = n != null && n.anchor ? W(lt, { overlayId: s, anchor: n.anchor }, () => [l]) : void 0, a = {
+  const s = String(++at), o = We(e), r = W(o, t), l = n != null && n.anchor ? W(rt, { overlayId: s, anchor: n.anchor }, () => [r]) : void 0, a = {
     id: s,
     component: o,
     props: t,
     options: n ?? {},
-    vnode: l,
-    wrapperVnode: r
+    vnode: r,
+    wrapperVnode: l
   };
   return S.push(a), a;
 }
@@ -166,10 +165,15 @@ function P(e) {
 async function se(e, t, n) {
   return new Promise((i) => {
     let s = null;
-    const l = { ...t, callback: (r) => {
-      P(s), i(r);
+    const r = { ...t, callback: async (l) => {
+      if (n != null && n.onCallback) {
+        const a = n.onCallback(l);
+        if (typeof a == "object" && "then" in a && typeof a.then == "function" && await a === !1)
+          return;
+      }
+      P(s), i(l);
     } };
-    s = ie(e, l, n);
+    s = ie(e, r, n);
   });
 }
 function q(e, t) {
@@ -239,7 +243,7 @@ function _n(e, t) {
   const n = (s = e.$) == null ? void 0 : s.vnode.el, i = n.closest(".vf-modal");
   return ht(i ?? n, t);
 }
-function Nn(e) {
+function Rn(e) {
   var i;
   const t = (i = e.$) == null ? void 0 : i.vnode.el, n = t.closest(".vf-modal");
   return Me(n ?? t);
@@ -257,24 +261,22 @@ function Me(e) {
 const Q = Symbol("FormMaskState");
 function ft(e, t, n) {
   const i = e instanceof Element ? e : He(e);
-  if (!i)
-    return () => {
-    };
+  if (!i) return () => {
+  };
   i.classList.add("vf-masked");
   const s = t instanceof Element ? t : i.querySelectorAll(t ?? 'button:not([disabled]):not([type="button"])')[0];
   let o;
   s && (o = s.tagName === "INPUT" ? s.value : s.innerHTML, s.setAttribute("disabled", "disabled"), s.innerText = n ?? "Please wait...");
-  const r = [...i.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
-  return r.forEach((a) => a.setAttribute("disabled", "disabled")), i[Q] = {
-    disabledElements: r,
+  const l = [...i.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
+  return l.forEach((a) => a.setAttribute("disabled", "disabled")), i[Q] = {
+    disabledElements: l,
     waitButton: s,
     buttonHtml: o
   }, () => Ie(i);
 }
 function Ie(e) {
   const t = e instanceof Element ? e : He(e);
-  if (!t)
-    return;
+  if (!t) return;
   const n = t[Q];
   n && (t.classList.remove("vf-masked"), n.disabledElements.forEach((i) => i.removeAttribute("disabled")), n.waitButton && (n.waitButton.innerHTML = n.buttonHtml, n.waitButton.removeAttribute("disabled")), delete t[Q]);
 }
@@ -289,7 +291,7 @@ const pt = ["id"], mt = {
 }, vt = { class: "vf-modal-content" }, yt = {
   key: 1,
   class: "vf-modal-footer"
-}, gt = /* @__PURE__ */ x({
+}, gt = /* @__PURE__ */ C({
   __name: "modal",
   props: {
     id: {},
@@ -302,7 +304,7 @@ const pt = ["id"], mt = {
   setup(e, { expose: t }) {
     const n = ee(), i = e;
     t({ mask: m, unmask: v, hide: f, unhide: u });
-    const s = O(), o = O(), l = O(!1), r = _(() => ze([i.class, l.value && "hidden"]));
+    const s = b(), o = b(), r = b(!1), l = _(() => ze([i.class, r.value && "hidden"]));
     L(() => {
       var c;
       document.body.classList.add("vf-modal-open"), i.closeOnMaskClick && (window.addEventListener("keydown", p), (c = s.value) == null || c.addEventListener("click", a));
@@ -328,14 +330,14 @@ const pt = ["id"], mt = {
       Ie(o.value);
     }
     function f() {
-      return l.value = !0, () => u();
+      return r.value = !0, () => u();
     }
     function u() {
-      l.value = !1;
+      r.value = !1;
     }
     return (c, T) => (d(), h("div", {
       id: c.id,
-      class: k(["vf-overlay vf-modal-wrap", r.value]),
+      class: k(["vf-overlay vf-modal-wrap", l.value]),
       ref_key: "overlay",
       ref: s
     }, [
@@ -352,18 +354,18 @@ const pt = ["id"], mt = {
             key: 0,
             class: "close",
             onClick: g
-          })) : b("", !0)
-        ])) : b("", !0),
+          })) : O("", !0)
+        ])) : O("", !0),
         w("div", vt, [
           K(c.$slots, "default")
         ]),
         c.$slots.footer ? (d(), h("div", yt, [
           K(c.$slots, "footer")
-        ])) : b("", !0)
+        ])) : O("", !0)
       ], 34)
     ], 10, pt));
   }
-}), Et = ["innerHtml"], Tt = ["innerText"], X = /* @__PURE__ */ x({
+}), Et = ["innerHtml"], Tt = ["innerText"], X = /* @__PURE__ */ C({
   __name: "alert-modal",
   props: {
     isBare: { type: Boolean },
@@ -377,8 +379,8 @@ const pt = ["id"], mt = {
   setup(e) {
     const t = e, n = _(() => t.message instanceof Error ? ut(t.message) : t.message);
     return (i, s) => {
-      const o = Oe("autofocus");
-      return d(), be(gt, {
+      const o = be("autofocus");
+      return d(), Oe(gt, {
         class: k(["vf-alert", i.classes])
       }, Pe({
         default: Y(() => [
@@ -396,7 +398,7 @@ const pt = ["id"], mt = {
         i.title ? {
           name: "header",
           fn: Y(() => [
-            w("h1", null, C(i.title), 1)
+            w("h1", null, x(i.title), 1)
           ]),
           key: "0"
         } : void 0,
@@ -432,17 +434,17 @@ const pt = ["id"], mt = {
     };
   }
 });
-let R;
+let N;
 const wt = new Uint8Array(16);
-function Ot() {
-  if (!R && (R = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !R))
+function bt() {
+  if (!N && (N = typeof crypto < "u" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto), !N))
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-  return R(wt);
+  return N(wt);
 }
 const y = [];
 for (let e = 0; e < 256; ++e)
   y.push((e + 256).toString(16).slice(1));
-function bt(e, t = 0) {
+function Ot(e, t = 0) {
   return y[e[t + 0]] + y[e[t + 1]] + y[e[t + 2]] + y[e[t + 3]] + "-" + y[e[t + 4]] + y[e[t + 5]] + "-" + y[e[t + 6]] + y[e[t + 7]] + "-" + y[e[t + 8]] + y[e[t + 9]] + "-" + y[e[t + 10]] + y[e[t + 11]] + y[e[t + 12]] + y[e[t + 13]] + y[e[t + 14]] + y[e[t + 15]];
 }
 const kt = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), ue = {
@@ -452,22 +454,16 @@ function St(e, t, n) {
   if (ue.randomUUID && !t && !e)
     return ue.randomUUID();
   e = e || {};
-  const i = e.random || (e.rng || Ot)();
-  if (i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, t) {
-    n = n || 0;
-    for (let s = 0; s < 16; ++s)
-      t[n + s] = i[s];
-    return t;
-  }
-  return bt(i);
+  const i = e.random || (e.rng || bt)();
+  return i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, Ot(i);
 }
-function Rn(e) {
+function Nn(e) {
   return e.replace(/\n/g, "<br>");
 }
-function xt(e) {
+function Ct(e) {
   return e.replace(/_/g, " ");
 }
-function Ct(e) {
+function xt(e) {
   const t = e.replace(/\D/g, "").replace(/^1/, "");
   return t.length != 10 ? e : "(" + t.substring(0, 3) + ") " + t.substring(3, 6) + "-" + t.substring(6);
 }
@@ -554,16 +550,16 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     },
     optionsDescriptors() {
       return this.allOptions.map((e, t) => {
-        var r, a;
-        const n = this.formatter(e), i = (r = this.subtitleFormatter) == null ? void 0 : r.call(this, e), s = n ? n.trim().toLowerCase() : "", o = i ? i.trim().toLowerCase() : "", l = [];
+        var l, a;
+        const n = this.formatter(e), i = (l = this.subtitleFormatter) == null ? void 0 : l.call(this, e), s = n ? n.trim().toLowerCase() : "", o = i ? i.trim().toLowerCase() : "", r = [];
         return this.searchFields ? this.searchFields.forEach((p) => {
-          e[p] && l.push(String(e[p]).toLowerCase());
-        }) : (l.push(s), o && l.push(o)), {
+          e[p] && r.push(String(e[p]).toLowerCase());
+        }) : (r.push(s), o && r.push(o)), {
           // eslint-disable-next-line vue/no-use-computed-property-like-method
           key: ((a = this.effectiveKeyExtractor) == null ? void 0 : a.call(this, e)) ?? String(t),
           title: n,
           subtitle: i,
-          searchContent: l.join(""),
+          searchContent: r.join(""),
           ref: e
         };
       });
@@ -587,11 +583,10 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
             title: "Create <strong>" + this.searchText.trim() + "</strong>..."
           }));
         }
-      } else
-        this.nullTitle && e.unshift({
-          key: D,
-          title: this.nullTitle
-        });
+      } else this.nullTitle && e.unshift({
+        key: D,
+        title: this.nullTitle
+      });
       return e;
     }
   },
@@ -657,8 +652,7 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
         if (e.key == "Enter") {
           e.preventDefault();
           const t = this.effectiveOptions.find((n) => n.key == this.highlightedOptionKey);
-          if (t)
-            return this.selectOption(t);
+          if (t) return this.selectOption(t);
         }
         if (e.key === "Delete" || e.key === "Backspace") {
           this.searchText.length > 1 && (this.isSearching = !0);
@@ -682,7 +676,7 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       const t = this.effectiveOptions.find((s) => s.ref === e);
       if (t)
         return t;
-      const n = this.keyExtractor ? (s, o) => this.keyExtractor(s) === this.keyExtractor(o) : xe, i = this.effectiveOptions.find((s) => n(s.ref, e));
+      const n = this.keyExtractor ? (s, o) => this.keyExtractor(s) === this.keyExtractor(o) : Ce, i = this.effectiveOptions.find((s) => n(s.ref, e));
       return i || null;
     },
     handleInputBlurred() {
@@ -702,8 +696,7 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       i.style.visibility = "visible", document.body.appendChild(i), setTimeout(this.highlightInitialOption, 0);
     },
     highlightInitialOption() {
-      if (!this.isLoaded || !this.highlightedOptionKey)
-        return;
+      if (!this.isLoaded || !this.highlightedOptionKey) return;
       const e = this.effectiveOptions.findIndex((i) => i.key == this.highlightedOptionKey), t = this.$refs.optionsContainer, n = t.querySelectorAll(".option")[e];
       t.scrollTop = n.offsetTop;
     },
@@ -713,8 +706,7 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     incrementHighlightedOption(e) {
       const t = this.effectiveOptions.findIndex((o) => o.key == this.highlightedOptionKey);
       let n = t + e;
-      if (n < 0 ? n = 0 : n >= this.effectiveOptions.length && (n = this.effectiveOptions.length - 1), t == n)
-        return;
+      if (n < 0 ? n = 0 : n >= this.effectiveOptions.length && (n = this.effectiveOptions.length - 1), t == n) return;
       this.highlightedOptionKey = this.effectiveOptions[n].key;
       const i = this.$refs.optionsContainer, s = i.querySelectorAll(".option")[n];
       s.offsetTop < i.scrollTop ? i.scrollTop = s.offsetTop : s.offsetTop + s.offsetHeight > i.scrollTop + i.clientHeight && (i.scrollTop = s.offsetTop + s.offsetHeight - i.clientHeight);
@@ -751,51 +743,51 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
   class: "no-results"
 };
 function _t(e, t, n, i, s, o) {
-  const l = Oe("disabled");
+  const r = be("disabled");
   return d(), h("div", {
     class: k(["vf-smart-select", { disabled: o.effectiveDisabled, open: e.shouldDisplayOptions }])
   }, [
     j(w("input", {
-      "onUpdate:modelValue": t[0] || (t[0] = (r) => e.searchText = r),
+      "onUpdate:modelValue": t[0] || (t[0] = (l) => e.searchText = l),
       ref: "searchField",
       type: "text",
       class: k({ nullable: !!n.nullTitle }),
-      onKeydown: t[1] || (t[1] = (...r) => o.handleKeyDown && o.handleKeyDown(...r)),
+      onKeydown: t[1] || (t[1] = (...l) => o.handleKeyDown && o.handleKeyDown(...l)),
       placeholder: o.effectivePlaceholder,
-      onFocus: t[2] || (t[2] = (...r) => o.handleInputFocused && o.handleInputFocused(...r)),
-      onBlur: t[3] || (t[3] = (...r) => o.handleInputBlurred && o.handleInputBlurred(...r)),
+      onFocus: t[2] || (t[2] = (...l) => o.handleInputFocused && o.handleInputFocused(...l)),
+      onBlur: t[3] || (t[3] = (...l) => o.handleInputBlurred && o.handleInputBlurred(...l)),
       required: n.required,
       "data-1p-ignore": ""
     }, null, 42, Ht), [
       [qe, e.searchText],
-      [l, o.effectiveDisabled]
+      [r, o.effectiveDisabled]
     ]),
     e.shouldDisplayOptions ? (d(), h("div", Dt, [
       e.isLoaded ? (d(), h(U, { key: 1 }, [
-        (d(!0), h(U, null, J(o.effectiveOptions, (r) => (d(), h("div", {
-          key: String(r.key),
+        (d(!0), h(U, null, J(o.effectiveOptions, (l) => (d(), h("div", {
+          key: String(l.key),
           class: k(["option", {
-            highlighted: e.highlightedOptionKey === r.key
+            highlighted: e.highlightedOptionKey === l.key
           }]),
-          onMousemove: (a) => o.handleOptionHover(r),
-          onMousedown: (a) => o.selectOption(r)
+          onMousemove: (a) => o.handleOptionHover(l),
+          onMousedown: (a) => o.selectOption(l)
         }, [
           w("div", {
             class: "title",
-            innerHTML: r.title
+            innerHTML: l.title
           }, null, 8, Bt),
-          r.subtitle ? (d(), h("div", {
+          l.subtitle ? (d(), h("div", {
             key: 0,
             class: "subtitle",
-            innerHTML: r.subtitle
-          }, null, 8, Vt)) : b("", !0)
+            innerHTML: l.subtitle
+          }, null, 8, Vt)) : O("", !0)
         ], 42, $t))), 128)),
-        !o.effectiveOptions.length && e.searchText ? (d(), h("div", Ft, C(o.effectiveNoResultsText), 1)) : b("", !0)
+        !o.effectiveOptions.length && e.searchText ? (d(), h("div", Ft, x(o.effectiveNoResultsText), 1)) : O("", !0)
       ], 64)) : (d(), h("div", At, "Loading..."))
-    ], 512)) : b("", !0)
+    ], 512)) : O("", !0)
   ], 2);
 }
-const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
+const Rt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
   __name: "ez-smart-select",
   props: {
     modelValue: {},
@@ -806,36 +798,36 @@ const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, i = _(() => Array.isArray(n.options) ? n.options.map((r) => ({ value: r, label: r })) : Object.entries(n.options).map(([r, a]) => ({
-      value: r,
+    const n = e, i = _(() => Array.isArray(n.options) ? n.options.map((l) => ({ value: l, label: l })) : Object.entries(n.options).map(([l, a]) => ({
+      value: l,
       label: a
-    }))), s = _(() => n.formatter ? (r) => {
+    }))), s = _(() => n.formatter ? (l) => {
       var a;
-      return (a = n.formatter) == null ? void 0 : a.call(n, r.label);
-    } : (r) => r.label), o = t, l = O(i.value.find((r) => r.value === n.modelValue) ?? null);
+      return (a = n.formatter) == null ? void 0 : a.call(n, l.label);
+    } : (l) => l.label), o = t, r = b(i.value.find((l) => l.value === n.modelValue) ?? null);
     return ce(
       () => n.modelValue,
-      (r) => {
-        l.value = i.value.find((a) => a.value === r) ?? null;
+      (l) => {
+        r.value = i.value.find((a) => a.value === l) ?? null;
       }
-    ), ce(l, (r) => {
+    ), ce(r, (l) => {
       var a;
-      o("update:modelValue", r ? ((a = i.value.find((p) => xe(p, r))) == null ? void 0 : a.value) ?? null : null);
-    }), (r, a) => (d(), be(Nt, {
-      modelValue: l.value,
-      "onUpdate:modelValue": a[0] || (a[0] = (p) => l.value = p),
+      o("update:modelValue", l ? ((a = i.value.find((p) => Ce(p, l))) == null ? void 0 : a.value) ?? null : null);
+    }), (l, a) => (d(), Oe(Rt, {
+      modelValue: r.value,
+      "onUpdate:modelValue": a[0] || (a[0] = (p) => r.value = p),
       options: i.value,
       formatter: s.value,
-      "null-title": r.nullTitle
+      "null-title": l.nullTitle
     }, null, 8, ["modelValue", "options", "formatter", "null-title"]));
   }
-}), Rt = { class: "content" }, Kt = { class: "message" }, jt = {
+}), Nt = { class: "content" }, Kt = { class: "message" }, jt = {
   key: 0,
   class: "close"
 }, Ut = {
   key: 0,
   class: "progress-bar"
-}, Wt = /* @__PURE__ */ x({
+}, Wt = /* @__PURE__ */ C({
   __name: "toast",
   props: {
     message: {},
@@ -850,7 +842,7 @@ const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
     function n() {
       t.onClick ? t.onClick() : t.disableClose || t.callback();
     }
-    const i = O();
+    const i = b();
     return t.durationSecs !== null && L(() => {
       var o;
       const s = t.durationSecs ?? 5;
@@ -862,9 +854,9 @@ const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
       class: k(["vf-toast", s.className]),
       onClick: te(n, ["stop"])
     }, [
-      w("div", Rt, [
-        w("div", Kt, C(s.message), 1),
-        s.disableClose ? b("", !0) : (d(), h("div", jt, "x"))
+      w("div", Nt, [
+        w("div", Kt, x(s.message), 1),
+        s.disableClose ? O("", !0) : (d(), h("div", jt, "x"))
       ]),
       s.durationSecs !== null ? (d(), h("div", Ut, [
         w("div", {
@@ -872,7 +864,7 @@ const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
           ref: i,
           class: "inner"
         }, null, 512)
-      ])) : b("", !0)
+      ])) : O("", !0)
     ], 2));
   }
 });
@@ -897,7 +889,7 @@ function Xt(e) {
   return e === null || typeof e == "string" && !/^\d+$/.test(e) ? e : nn(Number(e));
 }
 function Yt(e) {
-  return e && Ct(e);
+  return e && xt(e);
 }
 function Zt(e) {
   return e ? Ye(e) : null;
@@ -909,7 +901,7 @@ function Qt(e) {
   return e ? e.toUpperCase() : null;
 }
 function Jt(e) {
-  return e ? xt(e) : null;
+  return e ? Ct(e) : null;
 }
 function en(e, t = 1) {
   return Lt(e, t);
@@ -948,7 +940,7 @@ function qn(e, t) {
     const u = document.createElement("div");
     u.classList.add("item"), u.style.userSelect = "none", u.innerText = f.title, i.appendChild(u), f.class && u.classList.add(f.class), f.shouldConfirm ? u.addEventListener("click", (c) => v(c, u, f.handler)) : u.addEventListener("click", () => f.handler());
   });
-  const o = window.innerWidth - e.clientX, l = window.innerHeight - e.clientY, r = i.offsetHeight, a = i.offsetWidth, p = o < a ? e.clientX - a - 1 : e.clientX + 1, g = l < r ? e.clientY - r - 1 : e.clientY + 1;
+  const o = window.innerWidth - e.clientX, r = window.innerHeight - e.clientY, l = i.offsetHeight, a = i.offsetWidth, p = o < a ? e.clientX - a - 1 : e.clientX + 1, g = r < l ? e.clientY - l - 1 : e.clientY + 1;
   i.style.left = p + "px", i.style.top = g + "px", setTimeout(() => {
     i.style.width = i.offsetWidth + "px";
   }, 50);
@@ -990,7 +982,7 @@ function Zn(e) {
     }
   });
 }
-const re = Symbol("HookState");
+const le = Symbol("HookState");
 function Gn(e, t) {
   const n = t ?? ee();
   L(() => sn(n, e), n), ke(() => on(n), n), Se(() => pe(n), n), ne(() => pe(n), n);
@@ -1001,23 +993,22 @@ function sn(e, t) {
     const i = De(e.vnode.el);
     i ? n.ancestor = new V(i, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
   }
-  t.windowScrolledToBottom && (n.window = new V(window, t.windowScrolledToBottom)), e[re] = n;
+  t.windowScrolledToBottom && (n.window = new V(window, t.windowScrolledToBottom)), e[le] = n;
 }
 function on(e) {
   var n, i, s;
-  const t = e[re];
+  const t = e[le];
   (n = t == null ? void 0 : t.el) == null || n.install(), (i = t == null ? void 0 : t.ancestor) == null || i.install(), (s = t == null ? void 0 : t.window) == null || s.install();
 }
 function pe(e) {
   var n, i, s;
-  const t = e[re];
+  const t = e[le];
   (n = t == null ? void 0 : t.el) == null || n.uninstall(), (i = t == null ? void 0 : t.ancestor) == null || i.uninstall(), (s = t == null ? void 0 : t.window) == null || s.uninstall();
 }
 const Z = ["auto", "scroll"];
 function De(e) {
   const t = e.parentElement;
-  if (!t)
-    return null;
+  if (!t) return null;
   const n = window.getComputedStyle(t);
   return Z.includes(n.overflow) || Z.includes(n.overflowX) || Z.includes(n.overflowY) ? t : De(t);
 }
@@ -1040,24 +1031,23 @@ class V {
 function Qn(e) {
   L(() => window.addEventListener("resize", e)), ke(() => window.addEventListener("resize", e)), Se(() => window.removeEventListener("resize", e)), ne(() => window.removeEventListener("resize", e));
 }
-const rn = {
+const ln = {
   mounted: ve,
   updated: ve
 }, me = Symbol("HasAutoFocused");
 function ve(e, t) {
-  if (t.value === void 0 && e[me] || t.value !== void 0 && !t.value || t.oldValue !== void 0 && t.value == t.oldValue)
-    return;
+  if (t.value === void 0 && e[me] || t.value !== void 0 && !t.value || t.oldValue !== void 0 && t.value == t.oldValue) return;
   e[me] = !0;
   const n = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"].indexOf(e.tagName) > -1 ? e : e.querySelectorAll("input")[0];
   setTimeout(() => n.focus(), 10);
 }
-const ln = {
+const rn = {
   mounted: an
 }, A = Symbol("ConfirmState");
 function an(e, t) {
   e.addEventListener("click", (n) => {
-    var l, r;
-    const i = Date.now(), s = ((l = t.value) == null ? void 0 : l.text) !== void 0 ? t.value.text : "Confirm";
+    var r, l;
+    const i = Date.now(), s = ((r = t.value) == null ? void 0 : r.text) !== void 0 ? t.value.text : "Confirm";
     if (e[A]) {
       if (i - e[A].initTime < 300)
         return;
@@ -1073,7 +1063,7 @@ function an(e, t) {
         s && (e.innerHTML = o.preconfirmHtml), (a = t.value) != null && a.class && e.classList.remove(t.value.class), e.blur(), e.removeEventListener("mouseout", o.resetHandler), delete e[A];
       }
     };
-    e[A] = o, s && (e.innerHTML = s), (r = t.value) != null && r.class && e.classList.add(t.value.class), e.addEventListener("mouseout", o.resetHandler);
+    e[A] = o, s && (e.innerHTML = s), (l = t.value) != null && l.class && e.classList.add(t.value.class), e.addEventListener("mouseout", o.resetHandler);
   });
 }
 const cn = {
@@ -1101,14 +1091,14 @@ function hn(e, t) {
   let n = "";
   const i = t.value.replace(/ /g, "T").replace(/\.\d+Z$/, "Z"), s = e.attributes.getNamedItem("local") !== null ? i.replace(/Z$/, "") : i.replace(/(Z|\+00:00)?$/, "Z"), o = new Date(s);
   e.attributes.getNamedItem("display-utc") !== null && o.setMinutes(o.getMinutes() - o.getTimezoneOffset());
-  let l = (p = e.attributes.getNamedItem("format")) == null ? void 0 : p.value;
-  if (!l && e.attributes.getNamedItem("relative-date") !== null) {
+  let r = (p = e.attributes.getNamedItem("format")) == null ? void 0 : p.value;
+  if (!r && e.attributes.getNamedItem("relative-date") !== null) {
     const g = /* @__PURE__ */ new Date();
-    g.getFullYear() == o.getFullYear() && g.getMonth() == o.getMonth() && g.getDate() == o.getDate() && (n = "at", l = "HH:mm");
+    g.getFullYear() == o.getFullYear() && g.getMonth() == o.getMonth() && g.getDate() == o.getDate() && (n = "at", r = "HH:mm");
   }
-  l || (e.attributes.getNamedItem("date-only") !== null ? l = M.defaultDateFormat : l = M.defaultDateTimeFormat);
-  let r = G(o, l);
-  return n && (r = n + " " + r), r;
+  r || (e.attributes.getNamedItem("date-only") !== null ? r = M.defaultDateFormat : r = M.defaultDateTimeFormat);
+  let l = G(o, r);
+  return n && (l = n + " " + l), l;
 }
 const fn = {
   beforeMount: ge,
@@ -1125,29 +1115,27 @@ const mn = {
   beforeMount: Ee,
   updated: Ee,
   unmounted: $e
-}, N = Symbol("HasAutoFocused"), le = [];
+}, R = Symbol("HasAutoFocused"), re = [];
 function vn() {
-  le.forEach(Ae);
+  re.forEach(Ae);
 }
 setInterval(vn, 1e3);
 function Ee(e, t) {
-  var l;
-  if (t.value == t.oldValue)
-    return;
-  if (!t.value)
-    return $e(e);
-  const n = new Date(t.value), i = (l = e.attributes.getNamedItem("base-time")) == null ? void 0 : l.value, s = n.getTime() - (i ? new Date(i).getTime() - t.value * 1e3 : 0), o = e.getAttribute("no-seconds") === null;
-  e[N] || le.push(e), e[N] = {
+  var r;
+  if (t.value == t.oldValue) return;
+  if (!t.value) return $e(e);
+  const n = new Date(t.value), i = (r = e.attributes.getNamedItem("base-time")) == null ? void 0 : r.value, s = n.getTime() - (i ? new Date(i).getTime() - t.value * 1e3 : 0), o = e.getAttribute("no-seconds") === null;
+  e[R] || re.push(e), e[R] = {
     startTs: s,
     includeSeconds: o
   }, Ae(e);
 }
 function Ae(e) {
-  const t = e[N], n = Math.round((Date.now() - t.startTs) / 1e3);
+  const t = e[R], n = Math.round((Date.now() - t.startTs) / 1e3);
   e.innerText = yn(n, t.includeSeconds);
 }
 function $e(e) {
-  e[N] && (Qe(le, e), delete e[N]), e.innerText = "-";
+  e[R] && (Qe(re, e), delete e[R]), e.innerText = "-";
 }
 function yn(e, t) {
   const n = [], i = Math.floor(e / 86400);
@@ -1234,8 +1222,8 @@ class wn {
   }
   handleMouseMove(t) {
     const n = this.tipEl.offsetWidth, i = this.tipEl.offsetHeight, s = window.innerWidth, o = window.innerHeight;
-    let l = t.pageX + 10, r = t.pageY + 20;
-    l + n > s && (l = t.pageX - 5 - n), r + i > o && (r = t.pageY - 5 - i), this.tipEl.style.left = l + "px", this.tipEl.style.top = r + "px", this.lastMoveEvt = t;
+    let r = t.pageX + 10, l = t.pageY + 20;
+    r + n > s && (r = t.pageX - 5 - n), l + i > o && (l = t.pageY - 5 - i), this.tipEl.style.left = r + "px", this.tipEl.style.top = l + "px", this.lastMoveEvt = t;
   }
   checkMoveEvent() {
     var t;
@@ -1245,11 +1233,11 @@ class wn {
     this.shouldShow = !1, this.removeTooltip(), this.el.removeEventListener("mouseenter", this.handleTargetMouseEnterWithContext), this.el.removeEventListener("mouseleave", this.handleTargetMouseLeaveWithContext);
   }
 }
-function On(e) {
-  e.directive("autofocus", rn), e.directive("confirm-button", ln), e.directive("date-input", cn), e.directive("datetime", un), e.directive("disabled", fn), e.directive("duration", mn), e.directive("infinite-scroll", gn), e.directive("readonly", En), e.directive("tooltip", Tn);
+function bn(e) {
+  e.directive("autofocus", ln), e.directive("confirm-button", rn), e.directive("date-input", cn), e.directive("datetime", un), e.directive("disabled", fn), e.directive("duration", mn), e.directive("infinite-scroll", gn), e.directive("readonly", En), e.directive("tooltip", Tn);
 }
 function Jn(e) {
-  On(e);
+  bn(e);
 }
 export {
   In as OverlayContainer,
@@ -1258,12 +1246,12 @@ export {
   X as VfAlertModal,
   jn as VfEzSmartSelect,
   gt as VfModal,
-  Nt as VfSmartSelect,
+  Rt as VfSmartSelect,
   Xn as cloneProp,
   Bn as configureVf,
   Wn as createFilters,
   ie as createOverlayInjection,
-  xt as desnakeCase,
+  Ct as desnakeCase,
   dt as dismissOverlayInjectionById,
   Hn as dismissOverlayInjectionByInstance,
   Le as dismissOverlayInjectionByInternalInstance,
@@ -1271,7 +1259,7 @@ export {
   ni as escapeHtml,
   ut as formatError,
   nn as formatNumber,
-  Ct as formatPhone,
+  xt as formatPhone,
   Lt as formatUSCurrency,
   Fn as handleError,
   Vn as handleErrorAndAlert,
@@ -1280,7 +1268,7 @@ export {
   _n as maskComponent,
   ht as maskEl,
   ft as maskForm,
-  Rn as nl2br,
+  Nn as nl2br,
   Yn as nullifyEmptyInputs,
   se as presentOverlay,
   P as removeOverlayInjection,
@@ -1294,7 +1282,7 @@ export {
   tn as sleep,
   zn as sleepSecs,
   oe as toError,
-  Nn as unmaskComponent,
+  Rn as unmaskComponent,
   Me as unmaskEl,
   Ie as unmaskForm,
   Gn as useInfiniteScroll,

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.13.9",
+    "version": "4.14.1",
     "description": "Common components, directives, and helpers for Vue 3 apps",
     "module": "./dist/vue-foundation.es.js",
     "exports": {
@@ -52,16 +52,16 @@
         "@types/node": "^20.10.5",
         "@types/uuid": "^9.0.7",
         "@vitejs/plugin-vue": "^5.0.0",
-        "@vue/eslint-config-prettier": "^8.0.0",
-        "@vue/eslint-config-typescript": "^12.0.0",
+        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
         "@vue/test-utils": "^2.4.3",
         "@vue/tsconfig": "^0.5.1",
         "cypress": "^13.6.2",
         "date-fns": "^3.0.6",
         "eslint": "^8.56.0",
-        "eslint-plugin-cypress": "^2.15.1",
-        "eslint-plugin-simple-import-sort": "^10.0.0",
-        "eslint-plugin-unused-imports": "^3.0.0",
+        "eslint-plugin-cypress": "^3.3.0",
+        "eslint-plugin-simple-import-sort": "^12.1.0",
+        "eslint-plugin-unused-imports": "^4.0.0",
         "eslint-plugin-vue": "^9.19.2",
         "jsdom": "^23.0.1",
         "lodash": "^4.17.21",

package/src/components/overlay-container.ts

@@ -19,21 +19,22 @@ import {
 import OverlayAnchor from './overlay-anchor.vue';
 import type { OverlayAnchorOptions } from './overlay-types';
 
-interface OverlayOptions {
+interface OverlayOptions<C extends OverlayComponent, R extends ComponentReturn<C>> {
     anchor?: OverlayAnchorOptions;
+    onCallback?: (result: R) => void | Promise<boolean>;
 }
 
-export interface OverlayInjection<C extends OverlayComponent> {
+export interface OverlayInjection<C extends OverlayComponent, R extends ComponentReturn<C>> {
     id: string;
     component: OverlayComponentUnwrapped<C>;
     props: OverlayComponentProps<C>;
-    options: OverlayOptions;
+    options: OverlayOptions<C, R>;
     vnode: VNode;
     wrapperVnode?: VNode;
 }
 
 let overlayCount = 0;
-const OverlayInjections: OverlayInjection<any>[] = reactive([]);
+const OverlayInjections: OverlayInjection<any, any>[] = reactive([]);
 
 export const OverlayContainer = defineComponent({
     setup() {
@@ -62,9 +63,8 @@ export type Vue__ComponentPublicInstanceConstructor<
     new (...args: any[]): T;
 };
 
-export type ObjectComponentConfig<T extends Vue__ComponentPublicInstanceConstructor> = T extends Vue__ComponentPublicInstanceConstructor<infer P>
-    ? P
-    : never;
+export type ObjectComponentConfig<T extends Vue__ComponentPublicInstanceConstructor> =
+    T extends Vue__ComponentPublicInstanceConstructor<infer P> ? P : never;
 export type ObjectComponentProps<T extends Vue__ComponentPublicInstanceConstructor> = Writable<
     Omit<ObjectComponentConfig<T>['$props'], keyof VNodeProps | keyof AllowedComponentProps>
 >;
@@ -92,11 +92,11 @@ type ComponentReturn<M extends OverlayComponent> = OverlayComponentProps<M> exte
 
 export type AnyComponentPublicInstance = { $?: ComponentInternalInstance };
 
-export function createOverlayInjection<C extends OverlayComponent>(
+export function createOverlayInjection<C extends OverlayComponent, R extends ComponentReturn<C>>(
     component: C,
     props: OverlayComponentProps<C>,
-    options?: OverlayOptions
-): OverlayInjection<C> {
+    options?: OverlayOptions<C, R>
+): OverlayInjection<C, R> {
     // create or reconfigure the existing overlay target
     // re-injecting every time keeps the overlay container at the very end of the DOM
     const targetEl = document.getElementById('vf-overlay-target') ?? document.createElement('div');
@@ -110,7 +110,7 @@ export function createOverlayInjection<C extends OverlayComponent>(
     const wrapperVnode = options?.anchor ? h(OverlayAnchor, { overlayId, anchor: options.anchor }, () => [vnode]) : undefined;
 
     // todo: dunno what's going on with types here
-    const injection: OverlayInjection<C> = {
+    const injection: OverlayInjection<C, R> = {
         id: overlayId,
         component: rawComponent as any,
         props,
@@ -152,7 +152,7 @@ export function dismissOverlayInjectionById(id: string) {
     return false;
 }
 
-export function removeOverlayInjection(injection: OverlayInjection<any>) {
+export function removeOverlayInjection(injection: OverlayInjection<any, any>) {
     const index = OverlayInjections.indexOf(injection);
     if (index >= 0) {
         OverlayInjections.splice(index, 1);
@@ -162,11 +162,22 @@ export function removeOverlayInjection(injection: OverlayInjection<any>) {
 export async function presentOverlay<C extends OverlayComponent, R extends ComponentReturn<C>>(
     component: C,
     props: Omit<OverlayComponentProps<C>, 'callback'>,
-    options?: OverlayOptions
+    options?: OverlayOptions<C, R>
 ): Promise<R | undefined> {
     return new Promise<R>(resolve => {
-        let overlayInjection: OverlayInjection<C> | null = null;
-        const callback = (result: R) => {
+        let overlayInjection: OverlayInjection<C, R> | null = null;
+        const callback = async (result: R) => {
+            if (options?.onCallback) {
+                const hookResult = options.onCallback(result);
+                if (typeof hookResult === 'object' && 'then' in hookResult && typeof hookResult.then === 'function') {
+                    // ^ hack for ZoneAwarePromise
+                    const hookResultValue = await hookResult;
+                    if (hookResultValue === false) {
+                        return;
+                    }
+                }
+            }
+
             removeOverlayInjection(overlayInjection!);
             resolve(result);
         };

package/src/components/toast-helpers.ts

@@ -2,7 +2,7 @@ import { createOverlayInjection, type OverlayInjection, removeOverlayInjection }
 import Toast, { type IToastOptions } from './toast.vue';
 
 export function showToast(options: IToastOptions) {
-    const injection: OverlayInjection<typeof Toast> = createOverlayInjection(Toast, {
+    const injection: OverlayInjection<typeof Toast, unknown> = createOverlayInjection(Toast, {
         ...options,
         callback: () => removeOverlayInjection(injection)
     });