@signal24/vue-foundation 4.13.5 → 4.13.7

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/src/components/overlay-container.d.ts

@@ -39,7 +39,7 @@ interface PropsWithCallback<T> {
 }
 type ComponentReturn<M extends OverlayComponent> = OverlayComponentProps<M> extends PropsWithCallback<infer R> ? R : never;
 export type AnyComponentPublicInstance = {
-    $: ComponentInternalInstance;
+    $?: ComponentInternalInstance;
 };
 export declare function createOverlayInjection<C extends OverlayComponent>(component: C, props: OverlayComponentProps<C>, options?: OverlayOptions): OverlayInjection<C>;
 export declare function dismissOverlayInjectionByInstance(instance: AnyComponentPublicInstance): void;

package/dist/src/helpers/mask.d.ts

@@ -10,6 +10,6 @@ export declare function maskComponent(cmp: AnyComponentPublicInstance, message?:
 export declare function unmaskComponent(cmp: AnyComponentPublicInstance): void;
 export declare function maskEl(el: MaskElement, message?: string): () => void;
 export declare function unmaskEl(el: MaskElement): void;
-export declare function maskForm(formOrCmp: Element | AnyComponentPublicInstance, buttonSelector?: string | Element, buttonText?: string): () => void;
+export declare function maskForm(formOrCmp: Element | AnyComponentPublicInstance, buttonSelector?: string | Element, buttonText?: string): (() => void) | undefined;
 export declare function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance): void;
 export {};

package/dist/vue-foundation.es.js

@@ -1,7 +1,7 @@
 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 u, 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 { 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";
@@ -45,26 +45,26 @@ const nt = x({
   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, C(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]
-      }, C(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, [
+  ]) : (d(), h("select", it, [
     w("option", null, C(e.props.loadingText || "Loading..."), 1)
   ]));
 }
-const Mn = /* @__PURE__ */ Ce(nt, [["render", lt]]), rt = /* @__PURE__ */ x({
+const Mn = /* @__PURE__ */ Ce(nt, [["render", rt]]), lt = /* @__PURE__ */ x({
   __name: "overlay-anchor",
   props: {
     overlayId: {},
@@ -72,27 +72,29 @@ const Mn = /* @__PURE__ */ Ce(nt, [["render", lt]]), rt = /* @__PURE__ */ x({
   },
   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() {
+      if (!o)
+        return;
+      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 +103,7 @@ const Mn = /* @__PURE__ */ Ce(nt, [["render", lt]]), rt = /* @__PURE__ */ x({
           ...m.matchWidth ? { width: `${f.width}px` } : {},
           ...m.matchHeight ? { height: `${f.height}px` } : {}
         },
-        classes: h
+        classes: u
       };
     }
     function a() {
@@ -111,7 +113,7 @@ const Mn = /* @__PURE__ */ Ce(nt, [["render", lt]]), rt = /* @__PURE__ */ x({
       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"])
@@ -131,18 +133,18 @@ 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), 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;
 }
 function Hn(e) {
-  Le(e.$);
+  e.$ && Le(e.$);
 }
 function Le(e) {
   let t = e;
@@ -164,10 +166,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) {
@@ -233,11 +235,13 @@ async function Fn(e) {
 }
 const B = Symbol("MaskState");
 function _n(e, t) {
-  const n = e.$.vnode.el, i = n.closest(".vf-modal");
+  var s;
+  const n = (s = e.$) == null ? void 0 : s.vnode.el, i = n.closest(".vf-modal");
   return ht(i ?? n, t);
 }
 function Nn(e) {
-  const t = e.$.vnode.el, n = t.closest(".vf-modal");
+  var i;
+  const t = (i = e.$) == null ? void 0 : i.vnode.el, n = t.closest(".vf-modal");
   return Me(n ?? t);
 }
 function ht(e, t) {
@@ -253,24 +257,30 @@ function Me(e) {
 const Q = Symbol("FormMaskState");
 function ft(e, t, n) {
   const i = e instanceof Element ? e : He(e);
+  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 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);
 }
 function Ie(e) {
-  const t = e instanceof Element ? e : He(e), n = t[Q];
+  const t = e instanceof Element ? e : He(e);
+  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]);
 }
 function He(e) {
-  const t = e.$.vnode.el;
-  return t.tagName === "FORM" ? t : t.querySelector("form");
+  var n;
+  const t = (n = e == null ? void 0 : e.$) == null ? void 0 : n.vnode.el;
+  return t ? t.tagName === "FORM" ? t : t.querySelector("form") : null;
 }
 const pt = ["id"], mt = {
   key: 0,
@@ -290,8 +300,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 +321,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 +345,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,7 +356,7 @@ 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)
@@ -371,11 +381,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))
@@ -392,8 +402,8 @@ const pt = ["id"], mt = {
         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 +415,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 +438,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
@@ -543,16 +553,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
         };
       });
@@ -740,46 +750,46 @@ 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, C(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);
 }
@@ -794,27 +804,27 @@ 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((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) => xe(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 = {
@@ -846,15 +856,15 @@ const Nt = /* @__PURE__ */ Ce(It, [["render", _t]]), jn = /* @__PURE__ */ x({
         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, C(s.message), 1),
-        s.disableClose ? b("", !0) : (d(), u("div", jt, "x"))
+        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,
@@ -933,25 +943,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 +988,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 +999,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 +1038,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 +1049,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 +1071,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 +1099,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 +1123,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 +1145,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 +1232,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 +1244,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);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@signal24/vue-foundation",
     "type": "module",
-    "version": "4.13.5",
+    "version": "4.13.7",
     "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/overlay-anchor.vue

@@ -25,7 +25,8 @@ const instance = getCurrentInstance();
 onMounted(updateAttributes);
 
 function updateAttributes() {
-    const overlayEl = instance!.vnode.el as HTMLElement;
+    if (!instance) return;
+    const overlayEl = instance.vnode.el as HTMLElement;
     const { styles, classes } = computeAnchoredStyle(overlayEl, anchorEl);
     anchorStyles.value = styles;
     anchorClasses.value = classes;

package/src/components/overlay-container.ts

@@ -90,7 +90,7 @@ interface PropsWithCallback<T> {
 }
 type ComponentReturn<M extends OverlayComponent> = OverlayComponentProps<M> extends PropsWithCallback<infer R> ? R : never;
 
-export type AnyComponentPublicInstance = { $: ComponentInternalInstance };
+export type AnyComponentPublicInstance = { $?: ComponentInternalInstance };
 
 export function createOverlayInjection<C extends OverlayComponent>(
     component: C,
@@ -124,7 +124,7 @@ export function createOverlayInjection<C extends OverlayComponent>(
 }
 
 export function dismissOverlayInjectionByInstance(instance: AnyComponentPublicInstance) {
-    dismissOverlayInjectionByInternalInstance(instance.$);
+    instance.$ && dismissOverlayInjectionByInternalInstance(instance.$);
 }
 
 export function dismissOverlayInjectionByInternalInstance(instance: ComponentInternalInstance) {

package/src/helpers/mask.ts

@@ -12,13 +12,13 @@ interface IMaskState {
 type MaskElement = Element & IMaskState;
 
 export function maskComponent(cmp: AnyComponentPublicInstance, message?: string) {
-    const el = cmp.$.vnode.el;
+    const el = cmp.$?.vnode.el;
     const modalParentlEl = el!.closest('.vf-modal');
     return maskEl(modalParentlEl ?? el, message);
 }
 
 export function unmaskComponent(cmp: AnyComponentPublicInstance) {
-    const el = cmp.$.vnode.el;
+    const el = cmp.$?.vnode.el;
     const modalParentlEl = el!.closest('.vf-modal');
     return unmaskEl(modalParentlEl ?? el);
 }
@@ -58,6 +58,8 @@ type FormMaskElement = Element & IFormMaskState;
 
 export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, buttonSelector?: string | Element, buttonText?: string) {
     const form = formOrCmp instanceof Element ? formOrCmp : getFormFromCmp(formOrCmp);
+    if (!form) return;
+
     form.classList.add('vf-masked');
 
     const buttonEl = (
@@ -85,6 +87,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
 
 export function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance) {
     const form = formOrCmp instanceof Element ? formOrCmp : getFormFromCmp(formOrCmp);
+    if (!form) return;
 
     const state = (form as FormMaskElement)[FormMaskState];
     if (!state) return;
@@ -101,8 +104,9 @@ export function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance) {
     delete (form as FormMaskElement)[FormMaskState];
 }
 
-function getFormFromCmp(cmp: AnyComponentPublicInstance) {
-    const cmpEl = cmp.$.vnode.el!;
+function getFormFromCmp(cmp: AnyComponentPublicInstance | null) {
+    const cmpEl = cmp?.$?.vnode.el;
+    if (!cmpEl) return null;
     if (cmpEl.tagName === 'FORM') {
         return cmpEl as HTMLElement;
     } else {