@signal24/vue-foundation 4.13.4 → 4.13.6

package/dist/src/components/modal.vue.d.ts

@@ -1,6 +1,6 @@
-declare function mask(): void;
+declare function mask(): () => void;
 declare function unmask(): void;
-declare function hide(): void;
+declare function hide(): () => void;
 declare function unhide(): void;
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     id?: string | undefined;

package/dist/vue-foundation.es.js

@@ -1,13 +1,13 @@
 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 C, defineProps as _e, defineEmits as Ne, ref as O, computed as _, openBlock as d, createElementBlock as u, createElementVNode as w, toDisplayString as x, 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 Ce, upperFirst as Ye, startCase as Ze, cloneDeep as Ge, remove as Qe } from "lodash";
+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";
 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 = C({
+const nt = x({
   setup() {
     const e = _e();
     Ne(["update:modelValue"]);
@@ -33,7 +33,7 @@ const nt = C({
       this.options = await this.props.loadFn();
     }
   }
-}), xe = (e, t) => {
+}), Ce = (e, t) => {
   const n = e.__vccOpts || e;
   for (const [i, s] of t)
     n[i] = s;
@@ -45,26 +45,26 @@ const nt = C({
   key: 0,
   value: null
 }, ot = ["value"];
-function lt(e, t, n, i, s, o) {
-  return e.renderOptions ? j((d(), u("select", {
+function rt(e, t, n, i, s, o) {
+  return e.renderOptions ? j((d(), h("select", {
     key: 1,
-    "onUpdate:modelValue": t[0] || (t[0] = (r) => e.selectedItem = r)
+    "onUpdate:modelValue": t[0] || (t[0] = (l) => e.selectedItem = l)
   }, [
-    e.props.nullText ? (d(), u("option", st, x(e.props.nullText), 1)) : b("", !0),
-    (d(!0), u(U, null, J(e.renderOptions, (r, l) => {
+    e.props.nullText ? (d(), h("option", st, C(e.props.nullText), 1)) : b("", !0),
+    (d(!0), h(U, null, J(e.renderOptions, (l, r) => {
       var a;
-      return d(), u("option", {
-        key: l,
-        value: (a = e.options) == null ? void 0 : a[l]
-      }, x(r), 9, ot);
+      return d(), h("option", {
+        key: r,
+        value: (a = e.options) == null ? void 0 : a[r]
+      }, C(l), 9, ot);
     }), 128))
   ], 512)), [
     [Re, e.selectedItem]
-  ]) : (d(), u("select", it, [
-    w("option", null, x(e.props.loadingText || "Loading..."), 1)
+  ]) : (d(), h("select", it, [
+    w("option", null, C(e.props.loadingText || "Loading..."), 1)
   ]));
 }
-const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
+const Mn = /* @__PURE__ */ Ce(nt, [["render", rt]]), lt = /* @__PURE__ */ x({
   __name: "overlay-anchor",
   props: {
     overlayId: {},
@@ -72,27 +72,27 @@ const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
   },
   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(r);
-    function r() {
-      const p = o.vnode.el, { styles: g, classes: m } = l(p, n);
+    L(l);
+    function l() {
+      const p = o.vnode.el, { styles: g, classes: m } = r(p, n);
       i.value = g, s.value = m;
     }
-    function l(p, g) {
-      const m = t.anchor instanceof HTMLElement ? {} : t.anchor, y = g.getBoundingClientRect(), f = p.getBoundingClientRect();
-      m.matchWidth && (f.width = y.width), m.matchHeight && (f.height = y.height);
-      const h = m.class ? Array.isArray(m.class) ? m.class : [m.class] : [];
+    function r(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] : [];
       let c, T;
       if (m.y === "center")
-        c = y.top + y.height / 2 - f.height / 2, h.push("anchored-center-y");
+        c = v.top + v.height / 2 - f.height / 2, u.push("anchored-center-y");
       else {
-        const H = (y.bottom + f.height < window.innerHeight || m.y === "below") && m.y !== "above";
-        c = H ? y.bottom : y.top - f.height, h.push(H ? "anchored-top" : "anchored-bottom");
+        const H = (v.bottom + f.height < window.innerHeight || m.y === "below") && m.y !== "above";
+        c = H ? v.bottom : v.top - f.height, u.push(H ? "anchored-top" : "anchored-bottom");
       }
       if (m.x === "center")
-        T = y.left + y.width / 2 - f.width / 2, h.push("anchored-center-x");
+        T = v.left + v.width / 2 - f.width / 2, u.push("anchored-center-x");
       else {
-        const H = (y.left + f.width < window.innerWidth || m.x === "left") && m.x !== "right";
-        T = H ? y.left : y.right - f.width, h.push(H ? "anchored-left" : "anchored-right");
+        const H = (v.left + f.width < window.innerWidth || m.x === "left") && m.x !== "right";
+        T = H ? v.left : v.right - f.width, u.push(H ? "anchored-left" : "anchored-right");
       }
       return {
         styles: {
@@ -101,7 +101,7 @@ const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
           ...m.matchWidth ? { width: `${f.width}px` } : {},
           ...m.matchHeight ? { height: `${f.height}px` } : {}
         },
-        classes: h
+        classes: u
       };
     }
     function a() {
@@ -111,7 +111,7 @@ const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
       setTimeout(() => {
         window.addEventListener("click", a);
       }, 10);
-    }), (p, g) => (d(), u("div", {
+    }), (p, g) => (d(), h("div", {
       class: k(["vf-overlay-anchor", s.value]),
       style: Ke(i.value),
       onClick: te(a, ["stop"])
@@ -121,7 +121,7 @@ const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
   }
 });
 let at = 0;
-const S = je([]), In = C({
+const S = je([]), In = x({
   setup() {
     return () => W("div", [
       J(S, (e) => W(Ue, { key: e.id, to: "#vf-overlay-target" }, [e.wrapperVnode ?? e.vnode]))
@@ -131,13 +131,13 @@ const S = je([]), In = C({
 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), r = W(o, t), l = n != null && n.anchor ? W(rt, { overlayId: s, anchor: n.anchor }, () => [r]) : void 0, a = {
+  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 = {
     id: s,
     component: o,
     props: t,
     options: n ?? {},
-    vnode: r,
-    wrapperVnode: l
+    vnode: l,
+    wrapperVnode: r
   };
   return S.push(a), a;
 }
@@ -164,10 +164,10 @@ function P(e) {
 async function se(e, t, n) {
   return new Promise((i) => {
     let s = null;
-    const r = { ...t, callback: (l) => {
-      P(s), i(l);
+    const l = { ...t, callback: (r) => {
+      P(s), i(r);
     } };
-    s = ie(e, r, n);
+    s = ie(e, l, n);
   });
 }
 function q(e, t) {
@@ -257,9 +257,9 @@ function ft(e, t, n) {
   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 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,
+  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,
     waitButton: s,
     buttonHtml: o
   }, () => Ie(i);
@@ -278,7 +278,7 @@ const pt = ["id"], mt = {
 }, vt = { class: "vf-modal-content" }, yt = {
   key: 1,
   class: "vf-modal-footer"
-}, gt = /* @__PURE__ */ C({
+}, gt = /* @__PURE__ */ x({
   __name: "modal",
   props: {
     id: {},
@@ -290,8 +290,8 @@ const pt = ["id"], mt = {
   emits: ["formSubmit"],
   setup(e, { expose: t }) {
     const n = ee(), i = e;
-    t({ mask: m, unmask: y, hide: f, unhide: h });
-    const s = O(), o = O(), r = O(!1), l = _(() => ze([i.class, r.value && "hidden"]));
+    t({ mask: m, unmask: v, hide: f, unhide: u });
+    const s = O(), o = O(), l = O(!1), r = _(() => ze([i.class, l.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));
@@ -311,20 +311,20 @@ const pt = ["id"], mt = {
       Le(n);
     }
     function m() {
-      ft(o.value);
+      return ft(o.value), () => v();
     }
-    function y() {
+    function v() {
       Ie(o.value);
     }
     function f() {
-      r.value = !0;
+      return l.value = !0, () => u();
     }
-    function h() {
-      r.value = !1;
+    function u() {
+      l.value = !1;
     }
-    return (c, T) => (d(), u("div", {
+    return (c, T) => (d(), h("div", {
       id: c.id,
-      class: k(["vf-overlay vf-modal-wrap", l.value]),
+      class: k(["vf-overlay vf-modal-wrap", r.value]),
       ref_key: "overlay",
       ref: s
     }, [
@@ -335,9 +335,9 @@ const pt = ["id"], mt = {
         ref_key: "form",
         ref: o
       }, [
-        c.$slots.header ? (d(), u("div", mt, [
+        c.$slots.header ? (d(), h("div", mt, [
           K(c.$slots, "header"),
-          i.closeX ? (d(), u("i", {
+          i.closeX ? (d(), h("i", {
             key: 0,
             class: "close",
             onClick: g
@@ -346,13 +346,13 @@ const pt = ["id"], mt = {
         w("div", vt, [
           K(c.$slots, "default")
         ]),
-        c.$slots.footer ? (d(), u("div", yt, [
+        c.$slots.footer ? (d(), h("div", yt, [
           K(c.$slots, "footer")
         ])) : b("", !0)
       ], 34)
     ], 10, pt));
   }
-}), Et = ["innerHtml"], Tt = ["innerText"], X = /* @__PURE__ */ C({
+}), Et = ["innerHtml"], Tt = ["innerText"], X = /* @__PURE__ */ x({
   __name: "alert-modal",
   props: {
     isBare: { type: Boolean },
@@ -371,11 +371,11 @@ const pt = ["id"], mt = {
         class: k(["vf-alert", i.classes])
       }, Pe({
         default: Y(() => [
-          i.isHtml ? (d(), u("div", {
+          i.isHtml ? (d(), h("div", {
             key: 0,
             innerHtml: i.message,
             class: "user-message"
-          }, null, 8, Et)) : (d(), u("div", {
+          }, null, 8, Et)) : (d(), h("div", {
             key: 1,
             innerText: n.value
           }, null, 8, Tt))
@@ -385,15 +385,15 @@ const pt = ["id"], mt = {
         i.title ? {
           name: "header",
           fn: Y(() => [
-            w("h1", null, x(i.title), 1)
+            w("h1", null, C(i.title), 1)
           ]),
           key: "0"
         } : void 0,
         i.isBare ? void 0 : {
           name: "footer",
           fn: Y(() => [
-            i.shouldConfirm ? (d(), u(U, { key: 0 }, [
-              j((d(), u("button", {
+            i.shouldConfirm ? (d(), h(U, { key: 0 }, [
+              j((d(), h("button", {
                 class: "primary",
                 onClick: s[0] || (s[0] = () => i.callback(!0))
               }, [
@@ -405,7 +405,7 @@ const pt = ["id"], mt = {
                 class: "default",
                 onClick: s[1] || (s[1] = () => i.callback(!1))
               }, "Cancel")
-            ], 64)) : j((d(), u("button", {
+            ], 64)) : j((d(), h("button", {
               key: 1,
               class: "default",
               onClick: s[2] || (s[2] = () => i.callback(!0))
@@ -428,11 +428,11 @@ function Ot() {
     throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
   return R(wt);
 }
-const v = [];
+const y = [];
 for (let e = 0; e < 256; ++e)
-  v.push((e + 256).toString(16).slice(1));
+  y.push((e + 256).toString(16).slice(1));
 function bt(e, t = 0) {
-  return v[e[t + 0]] + v[e[t + 1]] + v[e[t + 2]] + v[e[t + 3]] + "-" + v[e[t + 4]] + v[e[t + 5]] + "-" + v[e[t + 6]] + v[e[t + 7]] + "-" + v[e[t + 8]] + v[e[t + 9]] + "-" + v[e[t + 10]] + v[e[t + 11]] + v[e[t + 12]] + v[e[t + 13]] + v[e[t + 14]] + v[e[t + 15]];
+  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 = {
   randomUUID: kt
@@ -453,10 +453,10 @@ function St(e, t, n) {
 function Rn(e) {
   return e.replace(/\n/g, "<br>");
 }
-function Ct(e) {
+function xt(e) {
   return e.replace(/_/g, " ");
 }
-function xt(e) {
+function Ct(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);
 }
@@ -543,16 +543,16 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     },
     optionsDescriptors() {
       return this.allOptions.map((e, t) => {
-        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 = [];
+        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 = [];
         return this.searchFields ? this.searchFields.forEach((p) => {
-          e[p] && r.push(String(e[p]).toLowerCase());
-        }) : (r.push(s), o && r.push(o)), {
+          e[p] && l.push(String(e[p]).toLowerCase());
+        }) : (l.push(s), o && l.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: r.join(""),
+          searchContent: l.join(""),
           ref: e
         };
       });
@@ -668,11 +668,11 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
       return this.effectiveKeyExtractor ? this.effectiveKeyExtractor(this.selectedOption) : ((t = this.getOptionDescriptor(e)) == null ? void 0 : t.key) ?? "";
     },
     getOptionDescriptor(e) {
-      const t = this.effectiveOptions.find((i) => i.ref === e);
+      const t = this.effectiveOptions.find((s) => s.ref === e);
       if (t)
         return t;
-      const n = this.effectiveOptions.find((i) => Ce(i.ref, e));
-      return n || null;
+      const n = this.keyExtractor ? (s, o) => this.keyExtractor(s) === this.keyExtractor(o) : xe, i = this.effectiveOptions.find((s) => n(s.ref, e));
+      return i || null;
     },
     handleInputBlurred() {
       this.debug || (!this.searchText.length && this.nullTitle && (this.selectedOption = null, this.selectedOptionTitle = null), this.shouldDisplayOptions = !1);
@@ -740,50 +740,50 @@ const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
   class: "no-results"
 };
 function _t(e, t, n, i, s, o) {
-  const r = Oe("disabled");
-  return d(), u("div", {
+  const l = Oe("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] = (l) => e.searchText = l),
+      "onUpdate:modelValue": t[0] || (t[0] = (r) => e.searchText = r),
       ref: "searchField",
       type: "text",
       class: k({ nullable: !!n.nullTitle }),
-      onKeydown: t[1] || (t[1] = (...l) => o.handleKeyDown && o.handleKeyDown(...l)),
+      onKeydown: t[1] || (t[1] = (...r) => o.handleKeyDown && o.handleKeyDown(...r)),
       placeholder: o.effectivePlaceholder,
-      onFocus: t[2] || (t[2] = (...l) => o.handleInputFocused && o.handleInputFocused(...l)),
-      onBlur: t[3] || (t[3] = (...l) => o.handleInputBlurred && o.handleInputBlurred(...l)),
+      onFocus: t[2] || (t[2] = (...r) => o.handleInputFocused && o.handleInputFocused(...r)),
+      onBlur: t[3] || (t[3] = (...r) => o.handleInputBlurred && o.handleInputBlurred(...r)),
       required: n.required
     }, null, 42, Ht), [
       [qe, e.searchText],
-      [r, o.effectiveDisabled]
+      [l, o.effectiveDisabled]
     ]),
-    e.shouldDisplayOptions ? (d(), u("div", Dt, [
-      e.isLoaded ? (d(), u(U, { key: 1 }, [
-        (d(!0), u(U, null, J(o.effectiveOptions, (l) => (d(), u("div", {
-          key: String(l.key),
+    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),
           class: k(["option", {
-            highlighted: e.highlightedOptionKey === l.key
+            highlighted: e.highlightedOptionKey === r.key
           }]),
-          onMousemove: (a) => o.handleOptionHover(l),
-          onMousedown: (a) => o.selectOption(l)
+          onMousemove: (a) => o.handleOptionHover(r),
+          onMousedown: (a) => o.selectOption(r)
         }, [
           w("div", {
             class: "title",
-            innerHTML: l.title
+            innerHTML: r.title
           }, null, 8, Bt),
-          l.subtitle ? (d(), u("div", {
+          r.subtitle ? (d(), h("div", {
             key: 0,
             class: "subtitle",
-            innerHTML: l.subtitle
+            innerHTML: r.subtitle
           }, null, 8, Vt)) : b("", !0)
         ], 42, $t))), 128)),
-        !o.effectiveOptions.length && e.searchText ? (d(), u("div", Ft, x(o.effectiveNoResultsText), 1)) : b("", !0)
-      ], 64)) : (d(), u("div", At, "Loading..."))
+        !o.effectiveOptions.length && e.searchText ? (d(), h("div", Ft, C(o.effectiveNoResultsText), 1)) : b("", !0)
+      ], 64)) : (d(), h("div", At, "Loading..."))
     ], 512)) : b("", !0)
   ], 2);
 }
-const Nt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
+const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
   __name: "ez-smart-select",
   props: {
     modelValue: {},
@@ -794,27 +794,27 @@ const Nt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    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,
+    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,
       label: a
-    }))), s = _(() => n.formatter ? (l) => {
+    }))), s = _(() => n.formatter ? (r) => {
       var a;
-      return (a = n.formatter) == null ? void 0 : a.call(n, l.label);
-    } : (l) => l.label), o = t, r = O(i.value.find((l) => l.value === n.modelValue) ?? null);
+      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 ce(
       () => n.modelValue,
-      (l) => {
-        r.value = i.value.find((a) => a.value === l) ?? null;
+      (r) => {
+        l.value = i.value.find((a) => a.value === r) ?? null;
       }
-    ), ce(r, (l) => {
+    ), ce(l, (r) => {
       var a;
-      o("update:modelValue", l ? ((a = i.value.find((p) => Ce(p, l))) == null ? void 0 : a.value) ?? null : null);
-    }), (l, a) => (d(), be(Nt, {
-      modelValue: r.value,
-      "onUpdate:modelValue": a[0] || (a[0] = (p) => r.value = p),
+      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),
       options: i.value,
       formatter: s.value,
-      "null-title": l.nullTitle
+      "null-title": r.nullTitle
     }, null, 8, ["modelValue", "options", "formatter", "null-title"]));
   }
 }), Rt = { class: "content" }, Kt = { class: "message" }, jt = {
@@ -823,7 +823,7 @@ const Nt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
 }, Ut = {
   key: 0,
   class: "progress-bar"
-}, Wt = /* @__PURE__ */ C({
+}, Wt = /* @__PURE__ */ x({
   __name: "toast",
   props: {
     message: {},
@@ -846,15 +846,15 @@ const Nt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
         duration: s * 1e3,
         easing: "linear"
       }), setTimeout(() => t.callback(), s * 1e3);
-    }), (s, o) => (d(), u("div", {
+    }), (s, o) => (d(), h("div", {
       class: k(["vf-toast", s.className]),
       onClick: te(n, ["stop"])
     }, [
       w("div", Rt, [
-        w("div", Kt, x(s.message), 1),
-        s.disableClose ? b("", !0) : (d(), u("div", jt, "x"))
+        w("div", Kt, C(s.message), 1),
+        s.disableClose ? b("", !0) : (d(), h("div", jt, "x"))
       ]),
-      s.durationSecs !== null ? (d(), u("div", Ut, [
+      s.durationSecs !== null ? (d(), h("div", Ut, [
         w("div", {
           ref_key: "progressInnerEl",
           ref: i,
@@ -885,7 +885,7 @@ function Xt(e) {
   return e === null || typeof e == "string" && !/^\d+$/.test(e) ? e : nn(Number(e));
 }
 function Yt(e) {
-  return e && xt(e);
+  return e && Ct(e);
 }
 function Zt(e) {
   return e ? Ye(e) : null;
@@ -897,7 +897,7 @@ function Qt(e) {
   return e ? e.toUpperCase() : null;
 }
 function Jt(e) {
-  return e ? Ct(e) : null;
+  return e ? xt(e) : null;
 }
 function en(e, t = 1) {
   return Lt(e, t);
@@ -933,25 +933,25 @@ function qn(e, t) {
       c.classList.add("separator"), i.appendChild(c);
       return;
     }
-    const h = document.createElement("div");
-    h.classList.add("item"), h.style.userSelect = "none", h.innerText = f.title, i.appendChild(h), f.class && h.classList.add(f.class), f.shouldConfirm ? h.addEventListener("click", (c) => y(c, h, f.handler)) : h.addEventListener("click", () => f.handler());
+    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, 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;
+  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;
   i.style.left = p + "px", i.style.top = g + "px", setTimeout(() => {
     i.style.width = i.offsetWidth + "px";
   }, 50);
   function m() {
     t.targetClass && s.classList.remove(t.targetClass), s.classList.remove("context-menu-active"), s.style.userSelect = "", n.remove();
   }
-  function y(f, h, c) {
-    if (h.classList.contains("pending-confirm"))
+  function v(f, u, c) {
+    if (u.classList.contains("pending-confirm"))
       return c();
-    const T = h.innerHTML;
-    h.classList.add("pending-confirm"), h.innerText = "Confirm";
+    const T = u.innerHTML;
+    u.classList.add("pending-confirm"), u.innerText = "Confirm";
     const I = () => {
-      h.classList.remove("pending-confirm"), h.innerHTML = T, h.removeEventListener("mouseleave", I);
+      u.classList.remove("pending-confirm"), u.innerHTML = T, u.removeEventListener("mouseleave", I);
     };
-    h.addEventListener("mouseleave", I), f.stopPropagation();
+    u.addEventListener("mouseleave", I), f.stopPropagation();
   }
 }
 const tn = (e) => new Promise((t) => setTimeout(t, e)), zn = (e) => tn(e * 1e3);
@@ -978,7 +978,7 @@ function Zn(e) {
     }
   });
 }
-const le = Symbol("HookState");
+const re = 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);
@@ -989,16 +989,16 @@ 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[le] = n;
+  t.windowScrolledToBottom && (n.window = new V(window, t.windowScrolledToBottom)), e[re] = n;
 }
 function on(e) {
   var n, i, s;
-  const t = e[le];
+  const t = e[re];
   (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[le];
+  const t = e[re];
   (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"];
@@ -1028,7 +1028,7 @@ 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 ln = {
+const rn = {
   mounted: ve,
   updated: ve
 }, me = Symbol("HasAutoFocused");
@@ -1039,13 +1039,13 @@ function ve(e, t) {
   const n = ["BUTTON", "INPUT", "TEXTAREA", "SELECT"].indexOf(e.tagName) > -1 ? e : e.querySelectorAll("input")[0];
   setTimeout(() => n.focus(), 10);
 }
-const rn = {
+const ln = {
   mounted: an
 }, A = Symbol("ConfirmState");
 function an(e, t) {
   e.addEventListener("click", (n) => {
-    var r, l;
-    const i = Date.now(), s = ((r = t.value) == null ? void 0 : r.text) !== void 0 ? t.value.text : "Confirm";
+    var l, r;
+    const i = Date.now(), s = ((l = t.value) == null ? void 0 : l.text) !== void 0 ? t.value.text : "Confirm";
     if (e[A]) {
       if (i - e[A].initTime < 300)
         return;
@@ -1061,7 +1061,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), (l = t.value) != null && l.class && e.classList.add(t.value.class), e.addEventListener("mouseout", o.resetHandler);
+    e[A] = o, s && (e.innerHTML = s), (r = t.value) != null && r.class && e.classList.add(t.value.class), e.addEventListener("mouseout", o.resetHandler);
   });
 }
 const cn = {
@@ -1089,14 +1089,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 r = (p = e.attributes.getNamedItem("format")) == null ? void 0 : p.value;
-  if (!r && e.attributes.getNamedItem("relative-date") !== null) {
+  let l = (p = e.attributes.getNamedItem("format")) == null ? void 0 : p.value;
+  if (!l && 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", r = "HH:mm");
+    g.getFullYear() == o.getFullYear() && g.getMonth() == o.getMonth() && g.getDate() == o.getDate() && (n = "at", l = "HH:mm");
   }
-  r || (e.attributes.getNamedItem("date-only") !== null ? r = M.defaultDateFormat : r = M.defaultDateTimeFormat);
-  let l = G(o, r);
-  return n && (l = n + " " + l), l;
+  l || (e.attributes.getNamedItem("date-only") !== null ? l = M.defaultDateFormat : l = M.defaultDateTimeFormat);
+  let r = G(o, l);
+  return n && (r = n + " " + r), r;
 }
 const fn = {
   beforeMount: ge,
@@ -1113,19 +1113,19 @@ const mn = {
   beforeMount: Ee,
   updated: Ee,
   unmounted: $e
-}, N = Symbol("HasAutoFocused"), re = [];
+}, N = Symbol("HasAutoFocused"), le = [];
 function vn() {
-  re.forEach(Ae);
+  le.forEach(Ae);
 }
 setInterval(vn, 1e3);
 function Ee(e, t) {
-  var r;
+  var l;
   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[N] || re.push(e), e[N] = {
+  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] = {
     startTs: s,
     includeSeconds: o
   }, Ae(e);
@@ -1135,7 +1135,7 @@ function Ae(e) {
   e.innerText = yn(n, t.includeSeconds);
 }
 function $e(e) {
-  e[N] && (Qe(re, e), delete e[N]), e.innerText = "-";
+  e[N] && (Qe(le, e), delete e[N]), e.innerText = "-";
 }
 function yn(e, t) {
   const n = [], i = Math.floor(e / 86400);
@@ -1222,8 +1222,8 @@ class wn {
   }
   handleMouseMove(t) {
     const n = this.tipEl.offsetWidth, i = this.tipEl.offsetHeight, s = window.innerWidth, o = window.innerHeight;
-    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;
+    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;
   }
   checkMoveEvent() {
     var t;
@@ -1234,7 +1234,7 @@ class wn {
   }
 }
 function On(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);
+  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 Jn(e) {
   On(e);
@@ -1251,7 +1251,7 @@ export {
   Bn as configureVf,
   Wn as createFilters,
   ie as createOverlayInjection,
-  Ct as desnakeCase,
+  xt as desnakeCase,
   dt as dismissOverlayInjectionById,
   Hn as dismissOverlayInjectionByInstance,
   Le as dismissOverlayInjectionByInternalInstance,
@@ -1259,7 +1259,7 @@ export {
   ni as escapeHtml,
   ut as formatError,
   nn as formatNumber,
-  xt as formatPhone,
+  Ct as formatPhone,
   Lt as formatUSCurrency,
   Fn as handleError,
   Vn as handleErrorAndAlert,

package/package.json

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

package/src/components/modal.vue

@@ -82,6 +82,7 @@ function closeParent() {
 
 function mask() {
     maskForm(form.value!);
+    return () => unmask();
 }
 
 function unmask() {
@@ -90,6 +91,7 @@ function unmask() {
 
 function hide() {
     isHidden.value = true;
+    return () => unhide();
 }
 
 function unhide() {

package/src/components/smart-select.vue

@@ -400,11 +400,14 @@ export default {
                 return matchedRef;
             }
 
-            // for reasons I've yet to determine, the prepend options, although they are wrapped by proxies and have identical content,
-            // are not the same proxy object as selectedOption once assigned -- even though the loaded data *is* the same. I've tried
-            // setting them as reactive using the same method (via data props rather than computed) and it didn't change anything.
-            // therefore, falling back to an isEqual check here when there's no equal object
-            const matchedObj = this.effectiveOptions.find(o => isEqual(o.ref, option));
+            // didn't find an object match, so we'll try a content match. a couple reasons:
+            // 1) the initial selection may have come from an owning object and the object as a whole may differ from the full content list
+            // 2) for reasons I've yet to determine, the prepend options, although they are wrapped by proxies and have identical content,
+            //    are not the same proxy object as selectedOption once assigned -- even though the loaded data *is* the same. I've tried
+            //    setting them as reactive using the same method (via data props rather than computed) and it didn't change anything.
+            //    therefore, falling back to an isEqual check here when there's no equal object
+            const matcher = this.keyExtractor ? (a: GenericObject, b: GenericObject) => this.keyExtractor!(a) === this.keyExtractor!(b) : isEqual;
+            const matchedObj = this.effectiveOptions.find(o => matcher(o.ref!, option));
             if (matchedObj) {
                 return matchedObj;
             }