@signal24/vue-foundation 4.19.4 → 4.19.6

package/dist/src/components/alert-helpers.d.ts

@@ -2,6 +2,7 @@ interface IAlertOptions {
     title?: string;
     message: string | Error;
     classes?: string[];
+    iconClass?: string | string[];
 }
 export declare function showAlert(title: string, message: string | Error): Promise<void>;
 export declare function showAlert(message: string | Error): Promise<void>;

package/dist/src/components/vf-alert-modal.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
     title?: string;
     message: string | Error;
     shouldConfirm?: boolean;
+    iconClass?: string | string[];
     callback: (ok: boolean) => void;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, HTMLDivElement>;

package/dist/vue-foundation.css

@@ -1 +1 @@
-.vf-overlay-anchor{position:absolute;z-index:100}.vf-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100}.vf-overlay.hidden{display:none}.vf-modal-wrap{background:#00000040;display:flex;justify-content:center;align-items:center}.vf-modal{background:#fff;box-shadow:0 3px 6px #00000026;min-width:200px;max-width:95%;max-height:95%;display:flex;flex-direction:column}.vf-modal-header,.vf-modal-footer{flex-shrink:0;position:relative}.vf-modal.scrolls>.vf-modal-content{overflow:auto;flex-grow:1;flex-shrink:1;flex-basis:0%}.vf-modal-wrap.vf-alert .vf-modal{max-width:800px}.vf-modal-wrap.vf-alert .vf-modal>.vf-modal-content{padding:12px}.vf-modal-wrap.vf-alert.wait .vf-modal-content{text-align:center}.vf-modal-wrap.vf-alert.destructive button.primary{color:red}.vf-smart-select{position:relative}.vf-smart-select input{width:100%;padding-right:24px!important}.vf-smart-select input.nullable::placeholder{color:#000}.vf-smart-select:after{content:" ";display:block;position:absolute;top:50%;right:8px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#333333 transparent transparent transparent;pointer-events:none}.vf-smart-select.open:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #333333 transparent}.vf-smart-select:not(.disabled) input{cursor:pointer}.vf-smart-select.disabled:after{opacity:.4}.vf-smart-select-options{visibility:hidden;position:absolute;min-height:20px;border:1px solid #e8e8e8;background:#fff;overflow:auto;z-index:101}.vf-smart-select-options .option,.vf-smart-select-options .no-results{padding:5px 8px}.vf-smart-select-options .option{cursor:pointer}.vf-smart-select-options .option.highlighted{background-color:#f5f5f5}.vf-toast{position:absolute;bottom:50px;left:50%;transform:translate(-50%)}.vf-toast .content{display:flex;align-items:center}
+.vf-overlay-anchor{position:absolute;z-index:100}.vf-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:100}.vf-overlay.hidden{display:none}.vf-modal-wrap{background:#00000040;display:flex;justify-content:center;align-items:center}.vf-modal{background:#fff;box-shadow:0 3px 6px #00000026;min-width:200px;max-width:95%;max-height:95%;display:flex;flex-direction:column}.vf-modal-header,.vf-modal-footer{flex-shrink:0;position:relative}.vf-modal.scrolls>.vf-modal-content{overflow:auto;flex-grow:1;flex-shrink:1;flex-basis:0%}.vf-modal-wrap.vf-alert .vf-modal{max-width:800px}.vf-modal-wrap.vf-alert .vf-modal>.vf-modal-content{padding:12px}.vf-modal-wrap.vf-alert.wait .vf-modal-content{text-align:center}.vf-modal-wrap.vf-alert.wait .vf-alert-icon{margin-bottom:12px}.vf-modal-wrap.vf-alert.destructive button.primary{color:red}.vf-smart-select{position:relative}.vf-smart-select input{width:100%;padding-right:24px!important}.vf-smart-select input.nullable::placeholder{color:#000}.vf-smart-select:after{content:" ";display:block;position:absolute;top:50%;right:8px;margin-top:-3px;width:0;height:0;border-style:solid;border-width:5px 5px 0 5px;border-color:#333333 transparent transparent transparent;pointer-events:none}.vf-smart-select.open:after{margin-top:-4px;border-width:0 5px 5px 5px;border-color:transparent transparent #333333 transparent}.vf-smart-select:not(.disabled) input{cursor:pointer}.vf-smart-select.disabled:after{opacity:.4}.vf-smart-select-options{visibility:hidden;position:absolute;min-height:20px;border:1px solid #e8e8e8;background:#fff;overflow:auto;z-index:101}.vf-smart-select-options .option,.vf-smart-select-options .no-results{padding:5px 8px}.vf-smart-select-options .option{cursor:pointer}.vf-smart-select-options .option.highlighted{background-color:#f5f5f5}.vf-toast{position:absolute;bottom:50px;left:50%;transform:translate(-50%)}.vf-toast .content{display:flex;align-items:center}

package/dist/vue-foundation.es.js

@@ -1,7 +1,7 @@
 var Tt = Object.defineProperty;
 var St = (e, t, n) => t in e ? Tt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var O = (e, t, n) => St(e, typeof t != "symbol" ? t + "" : t, n);
-import { defineComponent as N, ref as T, computed as M, watch as A, onMounted as V, openBlock as E, createElementBlock as b, createElementVNode as F, toDisplayString as U, withDirectives as Q, createCommentVNode as D, Fragment as J, renderList as he, vModelSelect as xt, getCurrentInstance as pe, withModifiers as ye, normalizeStyle as Ct, normalizeClass as $, renderSlot as G, reactive as Lt, h as ee, Teleport as Mt, markRaw as It, onBeforeUnmount as ge, resolveDirective as Ht, createBlock as qe, createSlots as Ot, withCtx as ue, createTextVNode as ce, vModelText as At, onActivated as ze, onDeactivated as Ye } from "vue";
+import { defineComponent as N, ref as T, computed as M, watch as A, onMounted as V, openBlock as E, createElementBlock as k, createElementVNode as D, toDisplayString as U, withDirectives as Q, createCommentVNode as F, Fragment as J, renderList as he, vModelSelect as Ct, getCurrentInstance as pe, withModifiers as ye, normalizeStyle as xt, normalizeClass as B, renderSlot as G, reactive as Lt, h as ee, Teleport as Mt, markRaw as It, onBeforeUnmount as ge, resolveDirective as Ht, createBlock as qe, createSlots as Ot, withCtx as ue, createTextVNode as ce, vModelText as At, onActivated as ze, onDeactivated as Ye } from "vue";
 import { compact as Ke, debounce as Ft, isEqual as Xe, startCase as Dt, upperFirst as Bt, cloneDeep as $t, remove as Vt, last as _t } from "lodash";
 import { escapeHtml as Nt } from "@vue/shared";
 import { escapeHtml as Uo } from "@vue/shared";
@@ -26,8 +26,8 @@ const Ut = {
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
     const n = e, o = t, i = T(null), l = M(() => i.value ? i.value.map((g) => {
-      const k = g;
-      return n.preprocesor ? n.preprocesor(k) : n.displayKey ? k[n.displayKey] : "";
+      const b = g;
+      return n.preprocesor ? n.preprocesor(b) : n.displayKey ? b[n.displayKey] : "";
     }) : null), u = T(n.modelValue ?? null);
     A(() => n.loadFn, a), A(
       () => n.modelValue,
@@ -36,22 +36,22 @@ const Ut = {
     async function a() {
       i.value = await n.loadFn();
     }
-    return V(a), (d, g) => l.value ? Q((E(), b("select", {
+    return V(a), (d, g) => l.value ? Q((E(), k("select", {
       key: 1,
-      "onUpdate:modelValue": g[0] || (g[0] = (k) => u.value = k)
+      "onUpdate:modelValue": g[0] || (g[0] = (b) => u.value = b)
     }, [
-      n.nullText ? (E(), b("option", jt, U(n.nullText), 1)) : D("", !0),
-      (E(!0), b(J, null, he(l.value, (k, f) => {
+      n.nullText ? (E(), k("option", jt, U(n.nullText), 1)) : F("", !0),
+      (E(!0), k(J, null, he(l.value, (b, f) => {
         var w;
-        return E(), b("option", {
+        return E(), k("option", {
           key: f,
           value: (w = i.value) == null ? void 0 : w[f]
-        }, U(k), 9, Pt);
+        }, U(b), 9, Pt);
       }), 128))
     ], 512)), [
-      [xt, u.value]
-    ]) : (E(), b("select", Ut, [
-      F("option", null, U(n.loadingText || "Loading..."), 1)
+      [Ct, u.value]
+    ]) : (E(), k("select", Ut, [
+      D("option", null, U(n.loadingText || "Loading..."), 1)
     ]));
   }
 }), qt = /* @__PURE__ */ N({
@@ -65,25 +65,25 @@ const Ut = {
     V(u);
     function u() {
       if (!l) return;
-      const g = l.vnode.el, { styles: k, classes: f } = a(g, n);
-      o.value = k, i.value = f;
+      const g = l.vnode.el, { styles: b, classes: f } = a(g, n);
+      o.value = b, i.value = f;
     }
-    function a(g, k) {
-      const f = t.anchor instanceof HTMLElement ? {} : t.anchor, w = k.getBoundingClientRect(), m = g.getBoundingClientRect();
+    function a(g, b) {
+      const f = t.anchor instanceof HTMLElement ? {} : t.anchor, w = b.getBoundingClientRect(), m = g.getBoundingClientRect();
       f.matchWidth && (m.width = w.width), f.matchHeight && (m.height = w.height);
       const r = f.class ? Array.isArray(f.class) ? f.class : [f.class] : [];
       let c, S;
       if (f.y === "center")
         c = w.top + w.height / 2 - m.height / 2, r.push("anchored-center-y");
       else {
-        const C = (w.bottom + m.height < window.innerHeight || f.y === "below") && f.y !== "above";
-        c = C ? w.bottom : w.top - m.height, r.push(C ? "anchored-top" : "anchored-bottom");
+        const x = (w.bottom + m.height < window.innerHeight || f.y === "below") && f.y !== "above";
+        c = x ? w.bottom : w.top - m.height, r.push(x ? "anchored-top" : "anchored-bottom");
       }
       if (f.x === "center")
         S = w.left + w.width / 2 - m.width / 2, r.push("anchored-center-x");
       else {
-        const C = (w.left + m.width < window.innerWidth || f.x === "left") && f.x !== "right";
-        S = C ? w.left : w.right - m.width, r.push(C ? "anchored-left" : "anchored-right");
+        const x = (w.left + m.width < window.innerWidth || f.x === "left") && f.x !== "right";
+        S = x ? w.left : w.right - m.width, r.push(x ? "anchored-left" : "anchored-right");
       }
       return {
         styles: {
@@ -102,9 +102,9 @@ const Ut = {
       setTimeout(() => {
         window.addEventListener("click", d);
       }, 10);
-    }), (g, k) => (E(), b("div", {
-      class: $(["vf-overlay-anchor", i.value]),
-      style: Ct(o.value),
+    }), (g, b) => (E(), k("div", {
+      class: B(["vf-overlay-anchor", i.value]),
+      style: xt(o.value),
       onClick: ye(d, ["stop"])
     }, [
       G(g.$slots, "default")
@@ -200,14 +200,14 @@ function wo(e, t) {
   });
   return () => te(o);
 }
-const B = {
+const $ = {
   unhandledErrorSupportText: "please contact support",
   errorHandler: (e) => console.error("Unhandled error:", e),
   defaultDateFormat: "M/d/yy",
   defaultTimeFormat: "H:mm"
 };
 function Eo(e) {
-  Object.assign(B, e);
+  Object.assign($, e);
 }
 class oe extends Error {
   constructor(t) {
@@ -217,24 +217,24 @@ class oe extends Error {
 function Zt(e) {
   return e instanceof oe ? e.message : `An application error has occurred:
 
-${be(e).message}
+${ke(e).message}
 
-Please refresh the page and try again. If this error persists, ${B.unhandledErrorSupportText}.`;
+Please refresh the page and try again. If this error persists, ${$.unhandledErrorSupportText}.`;
 }
-function be(e) {
+function ke(e) {
   return e instanceof Error ? e : new Error(String(e));
 }
-async function bo(e, t) {
-  const n = be(e);
-  return n instanceof oe || B.errorHandler(n), Xt({
+async function ko(e, t) {
+  const n = ke(e);
+  return n instanceof oe || $.errorHandler(n), Xt({
     title: t == null ? void 0 : t.title,
     message: n,
     classes: t == null ? void 0 : t.classes
   });
 }
-async function ko(e) {
-  const t = be(e);
-  t instanceof oe || B.errorHandler(t);
+async function bo(e) {
+  const t = ke(e);
+  t instanceof oe || $.errorHandler(t);
 }
 const z = Symbol("MaskState");
 function To(e, t) {
@@ -311,15 +311,15 @@ const Jt = ["id"], en = {
       window.removeEventListener("keydown", g), document.body.querySelectorAll(".vf-modal").length > 0 || document.body.classList.remove("vf-modal-open");
     });
     function d(c) {
-      c.target == i.value && k();
+      c.target == i.value && b();
     }
     function g(c) {
       if (c.key === "Esc" || c.key === "Escape") {
         const S = document.querySelectorAll(".vf-modal-wrap");
-        S[S.length - 1] === i.value && k();
+        S[S.length - 1] === i.value && b();
       }
     }
-    function k() {
+    function b() {
       Ze(n);
     }
     function f() {
@@ -334,33 +334,33 @@ const Jt = ["id"], en = {
     function r() {
       u.value = !1;
     }
-    return (c, S) => (E(), b("div", {
+    return (c, S) => (E(), k("div", {
       id: c.id,
       ref_key: "overlay",
       ref: i,
-      class: $(["vf-overlay vf-modal-wrap", a.value])
+      class: B(["vf-overlay vf-modal-wrap", a.value])
     }, [
-      F("form", {
+      D("form", {
         ref_key: "form",
         ref: l,
         action: ".",
-        class: $(["vf-modal", { scrolls: c.scrolls }]),
+        class: B(["vf-modal", { scrolls: c.scrolls }]),
         onSubmit: S[0] || (S[0] = ye((I) => c.$emit("formSubmit"), ["prevent"]))
       }, [
-        c.$slots.header ? (E(), b("div", en, [
+        c.$slots.header ? (E(), k("div", en, [
           G(c.$slots, "header"),
-          o.closeX ? (E(), b("i", {
+          o.closeX ? (E(), k("i", {
             key: 0,
             class: "close",
-            onClick: k
-          })) : D("", !0)
-        ])) : D("", !0),
-        F("div", tn, [
+            onClick: b
+          })) : F("", !0)
+        ])) : F("", !0),
+        D("div", tn, [
           G(c.$slots, "default")
         ]),
-        c.$slots.footer ? (E(), b("div", nn, [
+        c.$slots.footer ? (E(), k("div", nn, [
           G(c.$slots, "footer")
-        ])) : D("", !0)
+        ])) : F("", !0)
       ], 34)
     ], 10, Jt));
   }
@@ -373,6 +373,7 @@ const Jt = ["id"], en = {
     title: {},
     message: {},
     shouldConfirm: { type: Boolean },
+    iconClass: {},
     callback: { type: Function }
   },
   setup(e) {
@@ -380,15 +381,19 @@ const Jt = ["id"], en = {
     return (o, i) => {
       const l = Ht("autofocus");
       return E(), qe(on, {
-        class: $(["vf-alert", ...o.classes ?? []])
+        class: B(["vf-alert", ...o.classes ?? []])
       }, Ot({
         default: ue(() => [
-          o.isHtml ? (E(), b("div", {
+          o.iconClass ? (E(), k("i", {
             key: 0,
+            class: B(["vf-alert-icon", o.iconClass])
+          }, null, 2)) : F("", !0),
+          o.isHtml ? (E(), k("div", {
+            key: 1,
             innerHtml: o.message,
             class: "user-message"
-          }, null, 8, ln)) : (E(), b("div", {
-            key: 1,
+          }, null, 8, ln)) : (E(), k("div", {
+            key: 2,
             innerText: n.value
           }, null, 8, sn))
         ]),
@@ -404,8 +409,8 @@ const Jt = ["id"], en = {
         o.isBare ? void 0 : {
           name: "footer",
           fn: ue(() => [
-            o.shouldConfirm ? (E(), b(J, { key: 0 }, [
-              Q((E(), b("button", {
+            o.shouldConfirm ? (E(), k(J, { key: 0 }, [
+              Q((E(), k("button", {
                 class: "primary",
                 onClick: i[0] || (i[0] = () => o.callback(!0))
               }, i[3] || (i[3] = [
@@ -413,11 +418,11 @@ const Jt = ["id"], en = {
               ]))), [
                 [l]
               ]),
-              F("button", {
+              D("button", {
                 class: "default",
                 onClick: i[1] || (i[1] = () => o.callback(!1))
               }, "Cancel")
-            ], 64)) : Q((E(), b("button", {
+            ], 64)) : Q((E(), k("button", {
               key: 1,
               class: "default",
               onClick: i[2] || (i[2] = () => o.callback(!0))
@@ -456,7 +461,7 @@ function dn(e, t, n) {
   const o = e.random || (e.rng || un)();
   return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, an(o);
 }
-function xo(e) {
+function Co(e) {
   return e.replace(/\n/g, "<br>");
 }
 function fn(e) {
@@ -469,7 +474,7 @@ function vn(e) {
 function mn(e, t = 1) {
   return "$" + (Number(e) / t).toFixed(3).replace(/0$/, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
-function Co() {
+function xo() {
   return dn();
 }
 const hn = ["disabled", "placeholder", "required"], pn = {
@@ -478,7 +483,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
 }, yn = ["onMousemove", "onMousedown"], gn = ["innerHTML"], wn = ["innerHTML"], En = {
   key: 0,
   class: "no-results"
-}, bn = "`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:\"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM", kn = /* @__PURE__ */ N({
+}, kn = "`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:\"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM", bn = /* @__PURE__ */ N({
   __name: "vf-smart-select",
   props: {
     modelValue: {},
@@ -511,14 +516,14 @@ const hn = ["disabled", "placeholder", "required"], pn = {
   setup(e, { expose: t, emit: n }) {
     const o = Symbol("null"), i = Symbol("create"), l = e, u = n;
     t({
-      addRemoteOption: kt
+      addRemoteOption: bt
     });
-    const a = T(), d = T(), g = T(), k = T(!1), f = T(!1), w = T([]), m = T(!1), r = T(""), c = T(null), S = T(null), I = T(!1), C = T(null), Se = T(!1), at = M(() => l.showCreateTextOnNewItem ?? !0), rt = M(() => l.prependOptions ?? []), ut = M(() => l.appendOptions ?? []), xe = M(() => !!l.disabled), ct = M(() => !f.value && l.preload ? "Loading..." : l.nullTitle ? l.nullTitle : l.placeholder || ""), dt = M(() => l.noResultsText || "No options match your search."), W = M(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (s) => s[l.valueField] : null), j = M(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (s) => String(s[l.keyField]) : W.value ? (s) => String(W.value(s)) : null), se = M(() => l.formatter ? l.formatter : l.labelField ? (s) => String(s[l.labelField]) : (s) => String(s)), Ce = M(() => [...rt.value, ...w.value, ...ut.value]), ie = M(() => Ce.value.map((s, v) => {
+    const a = T(), d = T(), g = T(), b = T(!1), f = T(!1), w = T([]), m = T(!1), r = T(""), c = T(null), S = T(null), I = T(!1), x = T(null), Se = T(!1), at = M(() => l.showCreateTextOnNewItem ?? !0), rt = M(() => l.prependOptions ?? []), ut = M(() => l.appendOptions ?? []), Ce = M(() => !!l.disabled), ct = M(() => !f.value && l.preload ? "Loading..." : l.nullTitle ? l.nullTitle : l.placeholder || ""), dt = M(() => l.noResultsText || "No options match your search."), W = M(() => l.valueExtractor ? l.valueExtractor : l.valueField ? (s) => s[l.valueField] : null), j = M(() => l.keyExtractor ? l.keyExtractor : l.keyField ? (s) => String(s[l.keyField]) : W.value ? (s) => String(W.value(s)) : null), se = M(() => l.formatter ? l.formatter : l.labelField ? (s) => String(s[l.labelField]) : (s) => String(s)), xe = M(() => [...rt.value, ...w.value, ...ut.value]), ie = M(() => xe.value.map((s, v) => {
       var Ae, Fe;
-      const h = se.value(s), p = (Ae = l.subtitleFormatter) == null ? void 0 : Ae.call(l, s), y = h ? h.trim().toLowerCase() : "", x = p ? p.trim().toLowerCase() : "", Z = [];
+      const h = se.value(s), p = (Ae = l.subtitleFormatter) == null ? void 0 : Ae.call(l, s), y = h ? h.trim().toLowerCase() : "", C = p ? p.trim().toLowerCase() : "", Z = [];
       return l.searchFields ? l.searchFields.forEach((De) => {
         s[De] && Z.push(String(s[De]).toLowerCase());
-      }) : (Z.push(y), x && Z.push(x)), {
+      }) : (Z.push(y), C && Z.push(C)), {
         key: ((Fe = j.value) == null ? void 0 : Fe.call(j, s)) ?? String(v),
         title: h,
         subtitle: p,
@@ -533,13 +538,13 @@ const hn = ["disabled", "placeholder", "required"], pn = {
           s = s.filter((y) => y.searchContent.includes(v));
           const h = Nt(r.value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), p = new RegExp(`(${h})`, "ig");
           s = s.map((y) => {
-            var x;
+            var C;
             return {
               ...y,
               title: y.title.replace(p, "<mark>$1</mark>"),
-              subtitle: (x = y.subtitle) == null ? void 0 : x.replace(p, "<mark>$1</mark>")
+              subtitle: (C = y.subtitle) == null ? void 0 : C.replace(p, "<mark>$1</mark>")
             };
-          }), Se.value && (s.find((x) => x.searchContent === v) !== void 0 || s.push({
+          }), Se.value && (s.find((C) => C.searchContent === v) !== void 0 || s.push({
             key: i,
             title: at.value ? "Create <strong>" + r.value.trim() + "</strong>..." : r.value.trim()
           }));
@@ -563,7 +568,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       I.value ? setTimeout(wt, 0) : (m.value = !1, r.value = S.value || "", g.value && (g.value.style.visibility = "hidden"));
     }), A(H, () => {
       var s;
-      l.modelValue && !c.value && re(), (C.value || m.value) && !H.value.find((v) => v.key == C.value) && (C.value = ((s = H.value[0]) == null ? void 0 : s.key) ?? o);
+      l.modelValue && !c.value && re(), (x.value || m.value) && !H.value.find((v) => v.key == x.value) && (x.value = ((s = H.value[0]) == null ? void 0 : s.key) ?? o);
     }), V(async () => {
       Se.value = l.onCreateItem !== void 0, l.options ? (w.value = [...l.options], f.value = !0) : l.preload && await Le(), re(), A(c, () => {
         c.value !== l.modelValue && u(
@@ -578,7 +583,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
     async function Me() {
       var v;
       const s = l.remoteSearch && m.value && r.value ? r.value : null;
-      k.value = !0, w.value = await ((v = l.loadOptions) == null ? void 0 : v.call(l, s)) ?? [], k.value = !1, f.value = !0;
+      b.value = !0, w.value = await ((v = l.loadOptions) == null ? void 0 : v.call(l, s)) ?? [], b.value = !1, f.value = !0;
     }
     function ft() {
       m.value && (Me(), m.value = r.value.trim().length > 0);
@@ -601,14 +606,14 @@ const hn = ["disabled", "placeholder", "required"], pn = {
           return s.preventDefault(), ae(s.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
         if (s.key == "Enter") {
           s.preventDefault();
-          const v = H.value.find((h) => h.key == C.value);
+          const v = H.value.find((h) => h.key == x.value);
           if (v) return He(v);
         }
         if (s.key === "Delete" || s.key === "Backspace") {
           r.value.length > 1 && (m.value = !0);
           return;
         }
-        !s.metaKey && bn.includes(s.key) && (m.value = !0);
+        !s.metaKey && kn.includes(s.key) && (m.value = !0);
       }
     }
     function mt() {
@@ -618,7 +623,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       }, 0);
     }
     function ht(s) {
-      c.value ? C.value = pt(c.value) : l.nullTitle && (C.value = o);
+      c.value ? x.value = pt(c.value) : l.nullTitle && (x.value = o);
     }
     function pt(s) {
       var v;
@@ -628,7 +633,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       const v = H.value.find((y) => y.ref === s);
       if (v)
         return v;
-      const h = l.keyExtractor ? (y, x) => l.keyExtractor(y) === l.keyExtractor(x) : Xe, p = H.value.find((y) => h(y.ref, s));
+      const h = l.keyExtractor ? (y, C) => l.keyExtractor(y) === l.keyExtractor(C) : Xe, p = H.value.find((y) => h(y.ref, s));
       return p || null;
     }
     function gt() {
@@ -640,27 +645,27 @@ const hn = ["disabled", "placeholder", "required"], pn = {
     }
     function Et() {
       const s = a.value.getBoundingClientRect(), v = s.y + s.height + 2, h = s.x, p = g.value, y = window.getComputedStyle(a.value);
-      for (let x in y)
-        /^(font|text)/.test(x) && (p.style[x] = y[x]);
+      for (let C in y)
+        /^(font|text)/.test(C) && (p.style[C] = y[C]);
       if (p.style.top = v + "px", p.style.left = h + "px", p.style.minWidth = s.width + "px", !y.maxHeight || y.maxHeight == "none") {
-        const x = window.innerHeight - v - 12;
-        p.style.maxHeight = x + "px";
+        const C = window.innerHeight - v - 12;
+        p.style.maxHeight = C + "px";
       }
       p.style.visibility = "visible", document.body.appendChild(p), setTimeout(Ie, 0);
     }
     function Ie() {
-      if (!f.value || !C.value) return;
-      const s = H.value.findIndex((p) => p.key == C.value), v = g.value, h = v == null ? void 0 : v.querySelectorAll(".option")[s];
+      if (!f.value || !x.value) return;
+      const s = H.value.findIndex((p) => p.key == x.value), v = g.value, h = v == null ? void 0 : v.querySelectorAll(".option")[s];
       h && (v.scrollTop = h.offsetTop);
     }
-    function bt(s) {
-      C.value = s ? s.key : null;
+    function kt(s) {
+      x.value = s ? s.key : null;
     }
     function ae(s) {
-      const v = H.value.findIndex((x) => x.key == C.value);
+      const v = H.value.findIndex((C) => C.key == x.value);
       let h = v + s;
       if (h < 0 ? h = 0 : h >= H.value.length && (h = H.value.length - 1), v == h) return;
-      C.value = H.value[h].key;
+      x.value = H.value[h].key;
       const p = g.value, y = p == null ? void 0 : p.querySelectorAll(".option")[h];
       y && (y.offsetTop < p.scrollTop ? p.scrollTop = y.offsetTop : y.offsetTop + y.offsetHeight > p.scrollTop + p.clientHeight && (p.scrollTop = y.offsetTop + y.offsetHeight - p.clientHeight));
     }
@@ -672,15 +677,15 @@ const hn = ["disabled", "placeholder", "required"], pn = {
         const p = r.value.trim();
         r.value = "", c.value = null, S.value = null, (v = l.onCreateItem) == null || v.call(l, p);
       } else {
-        const y = ie.value.find((x) => x.key == s.key).ref;
+        const y = ie.value.find((C) => C.key == s.key).ref;
         c.value = y, S.value = se.value(y), r.value = S.value || "";
       }
       (h = d.value) == null || h.blur(), Oe();
     }
     function re() {
-      l.modelValue ? (c.value = W.value ? Ce.value.find((s) => l.modelValue === W.value(s)) : l.modelValue, S.value = c.value ? se.value(c.value) : null, r.value = S.value || "") : (c.value = null, S.value = null, r.value = "");
+      l.modelValue ? (c.value = W.value ? xe.value.find((s) => l.modelValue === W.value(s)) : l.modelValue, S.value = c.value ? se.value(c.value) : null, r.value = S.value || "") : (c.value = null, S.value = null, r.value = "");
     }
-    function kt(s) {
+    function bt(s) {
       w.value.unshift(s);
     }
     function Oe() {
@@ -692,21 +697,21 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       if (!s) return;
       const v = s.querySelectorAll('input, button, textarea, select, [tabindex]:not([tabindex="-1"])');
       if (!v) return;
-      const h = Array.from(v).findIndex((x) => x === d.value), p = v[h + 1];
+      const h = Array.from(v).findIndex((C) => C === d.value), p = v[h + 1];
       p && setTimeout(() => p.focus(), 0);
     }
-    return (s, v) => (E(), b("div", {
+    return (s, v) => (E(), k("div", {
       ref_key: "el",
       ref: a,
-      class: $(["vf-smart-select", { disabled: xe.value, open: I.value }])
+      class: B(["vf-smart-select", { disabled: Ce.value, open: I.value }])
     }, [
-      Q(F("input", {
+      Q(D("input", {
         ref_key: "searchField",
         ref: d,
         "onUpdate:modelValue": v[0] || (v[0] = (h) => r.value = h),
         type: "text",
-        disabled: xe.value,
-        class: $({ nullable: !!s.nullTitle }),
+        disabled: Ce.value,
+        class: B({ nullable: !!s.nullTitle }),
         placeholder: ct.value,
         required: s.required,
         "data-1p-ignore": "",
@@ -716,34 +721,34 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       }, null, 42, hn), [
         [At, r.value]
       ]),
-      I.value ? (E(), b("div", {
+      I.value ? (E(), k("div", {
         key: 0,
         ref_key: "optionsContainer",
         ref: g,
         class: "vf-smart-select-options"
       }, [
-        f.value ? (E(), b(J, { key: 1 }, [
-          (E(!0), b(J, null, he(H.value, (h) => (E(), b("div", {
+        f.value ? (E(), k(J, { key: 1 }, [
+          (E(!0), k(J, null, he(H.value, (h) => (E(), k("div", {
             key: String(h.key),
-            class: $(["option", {
-              highlighted: C.value === h.key
+            class: B(["option", {
+              highlighted: x.value === h.key
             }]),
-            onMousemove: (p) => bt(h),
+            onMousemove: (p) => kt(h),
             onMousedown: (p) => He(h)
           }, [
-            F("div", {
+            D("div", {
               class: "title",
               innerHTML: h.title
             }, null, 8, gn),
-            h.subtitle ? (E(), b("div", {
+            h.subtitle ? (E(), k("div", {
               key: 0,
               class: "subtitle",
               innerHTML: h.subtitle
-            }, null, 8, wn)) : D("", !0)
+            }, null, 8, wn)) : F("", !0)
           ], 42, yn))), 128)),
-          !H.value.length && r.value ? (E(), b("div", En, U(dt.value), 1)) : D("", !0)
-        ], 64)) : (E(), b("div", pn, "Loading..."))
-      ], 512)) : D("", !0)
+          !H.value.length && r.value ? (E(), k("div", En, U(dt.value), 1)) : F("", !0)
+        ], 64)) : (E(), k("div", pn, "Loading..."))
+      ], 512)) : F("", !0)
     ], 2));
   }
 }), Lo = /* @__PURE__ */ N({
@@ -768,24 +773,25 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       }
     ), A(u, (a) => {
       var g;
-      const d = a ? (g = o.value.find((k) => Xe(k, a))) == null ? void 0 : g.value : null;
+      const d = a ? (g = o.value.find((b) => Xe(b, a))) == null ? void 0 : g.value : null;
       l("update:modelValue", d ?? null);
-    }), (a, d) => (E(), qe(kn, {
+    }), (a, d) => (E(), qe(bn, {
       modelValue: u.value,
       "onUpdate:modelValue": d[0] || (d[0] = (g) => u.value = g),
       options: o.value,
       formatter: i.value,
-      "null-title": a.nullTitle
-    }, null, 8, ["modelValue", "options", "formatter", "null-title"]));
+      "null-title": a.nullTitle,
+      placeholder: a.placeholder
+    }, null, 8, ["modelValue", "options", "formatter", "null-title", "placeholder"]));
   }
 });
 function Mo() {
   return T();
 }
-const Tn = { class: "content" }, Sn = { class: "message" }, xn = {
+const Tn = { class: "content" }, Sn = { class: "message" }, Cn = {
   key: 0,
   class: "close"
-}, Cn = {
+}, xn = {
   key: 0,
   class: "progress-bar"
 }, Ln = /* @__PURE__ */ N({
@@ -811,21 +817,21 @@ const Tn = { class: "content" }, Sn = { class: "message" }, xn = {
         duration: i * 1e3,
         easing: "linear"
       }), setTimeout(() => t.callback(), i * 1e3);
-    }), (i, l) => (E(), b("div", {
-      class: $(["vf-toast", i.className]),
+    }), (i, l) => (E(), k("div", {
+      class: B(["vf-toast", i.className]),
       onClick: ye(n, ["stop"])
     }, [
-      F("div", Tn, [
-        F("div", Sn, U(i.message), 1),
-        i.disableClose ? D("", !0) : (E(), b("div", xn, "x"))
+      D("div", Tn, [
+        D("div", Sn, U(i.message), 1),
+        i.disableClose ? F("", !0) : (E(), k("div", Cn, "x"))
       ]),
-      i.durationSecs !== null ? (E(), b("div", Cn, [
-        F("div", {
+      i.durationSecs !== null ? (E(), k("div", xn, [
+        D("div", {
           ref_key: "progressInnerEl",
           ref: o,
           class: "inner"
         }, null, 512)
-      ])) : D("", !0)
+      ])) : F("", !0)
     ], 2));
   }
 });
@@ -901,8 +907,8 @@ function Ao(e, t) {
     const r = document.createElement("div");
     r.classList.add("item"), r.style.userSelect = "none", r.innerText = m.title, o.appendChild(r), m.class && r.classList.add(m.class), m.shouldConfirm ? r.addEventListener("click", (c) => w(c, r, m.handler)) : r.addEventListener("click", () => m.handler());
   });
-  const l = window.innerWidth - e.clientX, u = window.innerHeight - e.clientY, a = o.offsetHeight, d = o.offsetWidth, g = l < d ? e.clientX - d - 1 : e.clientX + 1, k = u < a ? e.clientY - a - 1 : e.clientY + 1;
-  o.style.left = g + "px", o.style.top = k + "px", setTimeout(() => {
+  const l = window.innerWidth - e.clientX, u = window.innerHeight - e.clientY, a = o.offsetHeight, d = o.offsetWidth, g = l < d ? e.clientX - d - 1 : e.clientX + 1, b = u < a ? e.clientY - a - 1 : e.clientY + 1;
+  o.style.left = g + "px", o.style.top = b + "px", setTimeout(() => {
     o.style.width = o.offsetWidth + "px";
   }, 50);
   function f() {
@@ -943,7 +949,7 @@ function $o(e, t) {
     }
   });
 }
-const ke = Symbol("HookState");
+const be = Symbol("HookState");
 function Vo(e, t) {
   const n = t ?? pe();
   V(() => Rn(n, e), n), ze(() => Wn(n), n), Ye(() => Ve(n), n), ge(() => Ve(n), n);
@@ -954,16 +960,16 @@ function Rn(e, t) {
     const o = et(e.vnode.el);
     o ? n.ancestor = new Y(o, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
   }
-  t.windowScrolledToBottom && (n.window = new Y(window, t.windowScrolledToBottom)), e[ke] = n;
+  t.windowScrolledToBottom && (n.window = new Y(window, t.windowScrolledToBottom)), e[be] = n;
 }
 function Wn(e) {
   var n, o, i;
-  const t = e[ke];
+  const t = e[be];
   (n = t == null ? void 0 : t.el) == null || n.install(), (o = t == null ? void 0 : t.ancestor) == null || o.install(), (i = t == null ? void 0 : t.window) == null || i.install();
 }
 function Ve(e) {
   var n, o, i;
-  const t = e[ke];
+  const t = e[be];
   (n = t == null ? void 0 : t.el) == null || n.uninstall(), (o = t == null ? void 0 : t.ancestor) == null || o.uninstall(), (i = t == null ? void 0 : t.window) == null || i.uninstall();
 }
 const fe = ["auto", "scroll"];
@@ -1046,13 +1052,13 @@ function Re(e, t) {
   t.value == t.oldValue && e.innerHTML.length || (e.innerText = Kn(e, t));
 }
 function Kn(e, t) {
-  var g, k;
+  var g, b;
   if (!t.value)
     return ((g = e.attributes.getNamedItem("placeholder")) == null ? void 0 : g.value) ?? "";
   let n = "";
   const o = t.value.replace(/ /g, "T").replace(/\.\d+Z$/, "Z"), i = e.attributes.getNamedItem("local") !== null ? o.replace(/Z$/, "") : o.replace(/(Z|\+00:00)?$/, "Z"), l = new Date(i);
   e.attributes.getNamedItem("display-utc") !== null && l.setMinutes(l.getMinutes() - l.getTimezoneOffset());
-  let u = (k = e.attributes.getNamedItem("format")) == null ? void 0 : k.value;
+  let u = (b = e.attributes.getNamedItem("format")) == null ? void 0 : b.value;
   const a = e.attributes.getNamedItem("date-only") !== null;
   if (!u && e.attributes.getNamedItem("relative-date") !== null) {
     const f = /* @__PURE__ */ new Date();
@@ -1062,10 +1068,10 @@ function Kn(e, t) {
     let f = null;
     const w = /* @__PURE__ */ new Date();
     w.getFullYear() === l.getFullYear() ? (w.getMonth() !== l.getMonth() || w.getDate() !== l.getDate()) && (f = "M/d") : f = "M/d/YY";
-    const m = a ? null : B.defaultTimeFormat;
+    const m = a ? null : $.defaultTimeFormat;
     u = Ke([f, m]).join(" ");
   }
-  u || (a ? u = B.defaultDateFormat : u = `${B.defaultDateFormat} ${B.defaultTimeFormat}`);
+  u || (a ? u = $.defaultDateFormat : u = `${$.defaultDateFormat} ${$.defaultTimeFormat}`);
   let d = ve(l, u);
   return n && (d = n + " " + d), d;
 }
@@ -1242,7 +1248,7 @@ export {
   le as VfAlertModal,
   Lo as VfEzSmartSelect,
   on as VfModal,
-  kn as VfSmartSelect,
+  bn as VfSmartSelect,
   Do as cloneProp,
   Eo as configureVf,
   $o as configureVfOpenApiClient,
@@ -1258,13 +1264,13 @@ export {
   Nn as formatNumber,
   vn as formatPhone,
   mn as formatUSCurrency,
-  ko as handleError,
-  bo as handleErrorAndAlert,
+  bo as handleError,
+  ko as handleErrorAndAlert,
   No as installVf,
   To as maskComponent,
   Gt as maskEl,
   Qt as maskForm,
-  xo as nl2br,
+  Co as nl2br,
   Bo as nullifyEmptyInputs,
   Ee as presentOverlay,
   te as removeOverlayInjection,
@@ -1277,12 +1283,12 @@ export {
   wo as showWait,
   _n as sleep,
   Fo as sleepSecs,
-  be as toError,
+  ke as toError,
   So as unmaskComponent,
   Ge as unmaskEl,
   Qe as unmaskForm,
   Vo as useInfiniteScroll,
   _o as useResizeWatcher,
-  Co as uuid,
+  xo as uuid,
   Mo as vfModalRef
 };

package/package.json

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

package/src/components/alert-helpers.ts

@@ -5,6 +5,7 @@ interface IAlertOptions {
     title?: string;
     message: string | Error;
     classes?: string[];
+    iconClass?: string | string[];
 }
 
 function resolveAlertParams(arg0: string | Error | IAlertOptions, arg1?: string | Error) {

package/src/components/vf-alert-modal.vue

@@ -4,6 +4,8 @@
             {{ title }}
         </template>
 
+        <i v-if="iconClass" :class="['vf-alert-icon', iconClass]" />
+
         <div v-if="isHtml" :innerHtml="message" class="user-message"></div>
         <div v-else :innerText="textMessage"></div>
 
@@ -30,6 +32,7 @@ const props = defineProps<{
     title?: string;
     message: string | Error;
     shouldConfirm?: boolean;
+    iconClass?: string | string[];
     callback: (ok: boolean) => void;
 }>();
 
@@ -56,6 +59,10 @@ const textMessage = computed(() => {
         .vf-modal-content {
             text-align: center;
         }
+
+        .vf-alert-icon {
+            margin-bottom: 12px;
+        }
     }
 
     &.destructive {

package/src/components/vf-ez-smart-select.vue

@@ -1,5 +1,5 @@
 <template>
-    <VfSmartSelect v-model="selectedItem" :options="computedOpts" :formatter="ezFormatter" :null-title="nullTitle" />
+    <VfSmartSelect v-model="selectedItem" :options="computedOpts" :formatter="ezFormatter" :null-title="nullTitle" :placeholder="placeholder" />
 </template>
 
 <script lang="ts" setup>