@signal24/vue-foundation 4.29.1 → 4.29.2

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.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 .group-title{padding:5px 8px;color:#999}.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 .group-title{padding:5px 8px;color:#999}.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;left:50%;transform:translate(-50%)}.vf-toast.bottom{bottom:50px}.vf-toast.top{top:50px}.vf-toast .content{display:flex;align-items:center}

package/dist/vue-foundation.es.js

@@ -2,7 +2,7 @@ import { defineComponent as N, ref as S, computed as T, watch as I, onMounted as
 import { compact as tt, cloneDeep as Wt, uniq as jt, groupBy as Ut, isEqual as we, debounce as Pt, startCase as qt, upperFirst as zt, remove as Kt, last as Yt } from "lodash";
 import { configureOpenApiClient as Xt, OpenApiError as Zt } from "@signal24/openapi-client-codegen";
 import { escapeHtml as Gt } from "@vue/shared";
-import { escapeHtml as vs } from "@vue/shared";
+import { escapeHtml as ps } from "@vue/shared";
 import { format as U, addDays as Jt, parse as Qt } from "date-fns";
 const en = {
   key: 0,
@@ -23,8 +23,8 @@ const en = {
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
     const n = e, o = t, l = S(null), s = T(() => l.value ? l.value.map((d) => {
-      const g = d;
-      return n.preprocesor ? n.preprocesor(g) : n.displayKey ? g[n.displayKey] : "";
+      const E = d;
+      return n.preprocesor ? n.preprocesor(E) : n.displayKey ? E[n.displayKey] : "";
     }) : null), u = S(n.modelValue ?? null);
     I(() => n.loadFn, r), I(
       () => n.modelValue,
@@ -35,13 +35,13 @@ const en = {
     }
     return _(r), (c, d) => s.value ? ie((b(), k("select", {
       key: 1,
-      "onUpdate:modelValue": d[0] || (d[0] = (g) => u.value = g)
+      "onUpdate:modelValue": d[0] || (d[0] = (E) => u.value = E)
     }, [
       n.nullText ? (b(), k("option", tn, R(n.nullText), 1)) : V("", !0),
-      (b(!0), k(le, null, re(s.value, (g, h) => (b(), k("option", {
+      (b(!0), k(le, null, re(s.value, (E, h) => (b(), k("option", {
         key: h,
         value: l.value?.[h]
-      }, R(g), 9, nn))), 128))
+      }, R(E), 9, nn))), 128))
     ], 512)), [
       [Vt, u.value]
     ]) : (b(), k("select", en, [
@@ -69,25 +69,25 @@ const on = /* @__PURE__ */ N({
     _(u);
     function u() {
       if (!s) return;
-      const d = s.vnode.el, { styles: g, classes: h } = r(d, n);
-      o.value = g, l.value = h;
+      const d = s.vnode.el, { styles: E, classes: h } = r(d, n);
+      o.value = E, l.value = h;
     }
-    function r(d, g) {
-      const h = t.anchor instanceof HTMLElement ? {} : t.anchor, w = g.getBoundingClientRect(), a = d.getBoundingClientRect();
-      h.matchWidth && (a.width = w.width), h.matchHeight && (a.height = w.height);
+    function r(d, E) {
+      const h = t.anchor instanceof HTMLElement ? {} : t.anchor, g = E.getBoundingClientRect(), a = d.getBoundingClientRect();
+      h.matchWidth && (a.width = g.width), h.matchHeight && (a.height = g.height);
       const f = h.class ? Array.isArray(h.class) ? h.class : [h.class] : [];
       let m, C;
       if (h.y === "center")
-        m = w.top + w.height / 2 - a.height / 2, f.push("anchored-center-y");
+        m = g.top + g.height / 2 - a.height / 2, f.push("anchored-center-y");
       else {
-        const B = (w.bottom + a.height < window.innerHeight || h.y === "below") && h.y !== "above";
-        m = B ? w.bottom : w.top - a.height, f.push(B ? "anchored-top" : "anchored-bottom");
+        const B = (g.bottom + a.height < window.innerHeight || h.y === "below") && h.y !== "above";
+        m = B ? g.bottom : g.top - a.height, f.push(B ? "anchored-top" : "anchored-bottom");
       }
       if (h.x === "center")
-        C = w.left + w.width / 2 - a.width / 2, f.push("anchored-center-x");
+        C = g.left + g.width / 2 - a.width / 2, f.push("anchored-center-x");
       else {
-        const B = (w.left + a.width < window.innerWidth || h.x === "left") && h.x !== "right";
-        C = B ? w.left : w.right - a.width, f.push(B ? "anchored-left" : "anchored-right");
+        const B = (g.left + a.width < window.innerWidth || h.x === "left") && h.x !== "right";
+        C = B ? g.left : g.right - a.width, f.push(B ? "anchored-left" : "anchored-right");
       }
       return {
         styles: {
@@ -106,7 +106,7 @@ const on = /* @__PURE__ */ N({
       setTimeout(() => {
         window.addEventListener("click", c);
       }, 10);
-    }), (d, g) => (b(), k("div", {
+    }), (d, E) => (b(), k("div", {
       class: H(["vf-overlay-anchor", l.value]),
       style: Ht(o.value),
       onClick: ke(c, ["stop"])
@@ -278,7 +278,7 @@ function ot(e) {
   e[Z] && e.removeChild(e[Z].maskEl);
 }
 const Ee = Symbol("FormMaskState");
-function vn(e, t, n) {
+function pn(e, t, n) {
   const o = e instanceof Element ? e : it(e);
   if (!o) return () => {
   };
@@ -303,7 +303,7 @@ function it(e) {
   const t = e?.$?.vnode.el;
   return t ? t.tagName === "FORM" ? t : t.querySelector("form") : null;
 }
-const pn = ["id"], mn = {
+const vn = ["id"], mn = {
   key: 0,
   class: "vf-modal-header"
 }, hn = { class: "vf-modal-content" }, yn = {
@@ -321,7 +321,7 @@ const pn = ["id"], mn = {
   emits: ["formSubmit"],
   setup(e, { expose: t }) {
     const n = be(), o = e;
-    t({ mask: h, unmask: w, hide: a, unhide: f });
+    t({ mask: h, unmask: g, hide: a, unhide: f });
     const l = S(), s = S(), u = S(!1), r = T(() => tt([...Array.isArray(o.class) ? o.class : [o.class], u.value && "hidden"]));
     _(() => {
       document.body.classList.add("vf-modal-open"), o.closeOnMaskClick && (window.addEventListener("keydown", d), l.value?.addEventListener("click", c));
@@ -329,21 +329,21 @@ const pn = ["id"], mn = {
       window.removeEventListener("keydown", d), document.body.querySelectorAll(".vf-modal").length > 0 || document.body.classList.remove("vf-modal-open");
     });
     function c(m) {
-      m.target == l.value && g();
+      m.target == l.value && E();
     }
     function d(m) {
       if (m.key === "Esc" || m.key === "Escape") {
         const C = document.querySelectorAll(".vf-modal-wrap");
-        C[C.length - 1] === l.value && g();
+        C[C.length - 1] === l.value && E();
       }
     }
-    function g() {
+    function E() {
       nt(n);
     }
     function h() {
-      return vn(s.value), () => w();
+      return pn(s.value), () => g();
     }
-    function w() {
+    function g() {
       st(s.value);
     }
     function a() {
@@ -370,7 +370,7 @@ const pn = ["id"], mn = {
           o.closeX ? (b(), k("i", {
             key: 0,
             class: "close",
-            onClick: g
+            onClick: E
           })) : V("", !0)
         ])) : V("", !0),
         $("div", hn, [
@@ -380,7 +380,7 @@ const pn = ["id"], mn = {
           W(m.$slots, "footer")
         ])) : V("", !0)
       ], 34)
-    ], 10, pn));
+    ], 10, vn));
   }
 }), wn = ["innerHtml"], En = ["innerText"], ne = /* @__PURE__ */ N({
   __name: "vf-alert-modal",
@@ -473,16 +473,16 @@ function Go(e, t) {
       return;
     }
     const f = document.createElement("div");
-    f.classList.add("item"), f.style.userSelect = "none", f.innerText = a.title, o.appendChild(f), a.class && f.classList.add(a.class), a.shouldConfirm ? f.addEventListener("click", (m) => w(m, f, a.handler)) : f.addEventListener("click", () => a.handler());
+    f.classList.add("item"), f.style.userSelect = "none", f.innerText = a.title, o.appendChild(f), a.class && f.classList.add(a.class), a.shouldConfirm ? f.addEventListener("click", (m) => g(m, f, a.handler)) : f.addEventListener("click", () => a.handler());
   });
-  const s = window.innerWidth - e.clientX, u = window.innerHeight - e.clientY, r = o.offsetHeight, c = o.offsetWidth, d = s < c ? e.clientX - c - 1 : e.clientX + 1, g = u < r ? e.clientY - r - 1 : e.clientY + 1;
-  o.style.left = d + "px", o.style.top = g + "px", setTimeout(() => {
+  const s = window.innerWidth - e.clientX, u = window.innerHeight - e.clientY, r = o.offsetHeight, c = o.offsetWidth, d = s < c ? e.clientX - c - 1 : e.clientX + 1, E = u < r ? e.clientY - r - 1 : e.clientY + 1;
+  o.style.left = d + "px", o.style.top = E + "px", setTimeout(() => {
     o.style.width = o.offsetWidth + "px";
   }, 50);
   function h() {
     t.targetClass && l.classList.remove(t.targetClass), l.classList.remove("context-menu-active"), l.style.userSelect = "", n.remove();
   }
-  function w(a, f, m) {
+  function g(a, f, m) {
     if (f.classList.contains("pending-confirm"))
       return m();
     const C = f.innerHTML;
@@ -551,14 +551,14 @@ function D(e, t) {
   n.intValue = s, n.value = s / l, o.increment = o.increment || 1 / l, o.useVedic ? o.groups = xn : o.groups = Cn, this.s = o, this.p = l;
 }
 function se(e, t) {
-  var n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !0, o = 0, l = t.decimal, s = t.errorOnInvalid, u = t.precision, r = t.fromCents, c = Ce(u), d = typeof e == "number", g = e instanceof D;
-  if (g && r)
+  var n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !0, o = 0, l = t.decimal, s = t.errorOnInvalid, u = t.precision, r = t.fromCents, c = Ce(u), d = typeof e == "number", E = e instanceof D;
+  if (E && r)
     return e.intValue;
-  if (d || g)
-    o = g ? e.value : e;
+  if (d || E)
+    o = E ? e.value : e;
   else if (typeof e == "string") {
-    var h = new RegExp("[^-\\d" + l + "]", "g"), w = new RegExp("\\" + l, "g");
-    o = e.replace(/\((.*)\)/, "-$1").replace(h, "").replace(w, "."), o = o || 0;
+    var h = new RegExp("[^-\\d" + l + "]", "g"), g = new RegExp("\\" + l, "g");
+    o = e.replace(/\((.*)\)/, "-$1").replace(h, "").replace(g, "."), o = o || 0;
   } else {
     if (s)
       throw Error("Invalid Input");
@@ -567,8 +567,8 @@ function se(e, t) {
   return r || (o *= c, o = o.toFixed(4)), n ? lt(o) : o;
 }
 function Mn(e, t) {
-  var n = t.pattern, o = t.negativePattern, l = t.symbol, s = t.separator, u = t.decimal, r = t.groups, c = ("" + e).replace(/^-/, "").split("."), d = c[0], g = c[1];
-  return (e.value >= 0 ? n : o).replace("!", l).replace("#", d.replace(r, "$1" + s) + (g ? u + g : ""));
+  var n = t.pattern, o = t.negativePattern, l = t.symbol, s = t.separator, u = t.decimal, r = t.groups, c = ("" + e).replace(/^-/, "").split("."), d = c[0], E = c[1];
+  return (e.value >= 0 ? n : o).replace("!", l).replace("#", d.replace(r, "$1" + s) + (E ? u + E : ""));
 }
 D.prototype = {
   /**
@@ -752,30 +752,30 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
     t({
       addRemoteOption: Dt
     });
-    const r = S(), c = S(), d = S(), g = S(!1), h = S(), w = S(!1), a = S(""), f = S(null), m = S(null), C = S(!1), x = S(null), B = S(!1), mt = T(() => s.showCreateTextOnNewItem ?? !0), P = T(() => !!(s.options || h.value)), ht = T(() => s.options ?? h.value ?? []), yt = T(() => s.prependOptions ?? []), gt = T(() => s.appendOptions ?? []), Le = T(() => !!s.disabled || !P.value && (g.value || !s.loadOptions)), z = T(() => s.loadingText || "..."), wt = T(() => !P.value && (!s.loadOptions || s.preload || s.modelValue && (s.valueField || s.valueExtractor)) ? z.value : s.nullTitle ? s.nullTitle : s.placeholder || ""), Et = T(() => s.noResultsText || "No options match your search."), q = T(() => s.valueExtractor ? s.valueExtractor : s.valueField ? (i) => i[s.valueField] : null), fe = T(() => s.keyExtractor ? s.keyExtractor : s.keyField ? (i) => String(i[s.keyField]) : q.value ? (i) => String(q.value(i)) : null), bt = T(() => s.groupFormatter ? s.groupFormatter : s.groupField ? (i) => String(i[s.groupField]) : null), Fe = T(() => s.formatter ? s.formatter : s.labelField ? (i) => String(i[s.labelField]) : (i) => String(i)), Oe = T(() => s.selectionFormatter ? s.selectionFormatter : Fe.value), Ie = T(() => [...yt.value, ...ht.value, ...gt.value]), De = T(() => !!(s.groupField || s.groupFormatter)), ve = T(() => Ie.value.map((i, E) => {
-      const p = bt.value?.(i), v = Fe.value(i), y = s.subtitleFormatter?.(i), O = v ? v.trim().toLowerCase() : "", Ne = y ? y.trim().toLowerCase() : "", oe = [];
+    const r = S(), c = S(), d = S(), E = S(!1), h = S(), g = S(!1), a = S(""), f = S(null), m = S(null), C = S(!1), x = S(null), B = S(!1), mt = T(() => s.showCreateTextOnNewItem ?? !0), P = T(() => !!(s.options || h.value)), ht = T(() => s.options ?? h.value ?? []), yt = T(() => s.prependOptions ?? []), gt = T(() => s.appendOptions ?? []), Le = T(() => !!s.disabled || !P.value && !s.loadOptions), z = T(() => s.loadingText || "..."), wt = T(() => !P.value && (!s.loadOptions || s.preload || s.modelValue && (s.valueField || s.valueExtractor)) ? z.value : s.nullTitle ? s.nullTitle : s.placeholder || ""), Et = T(() => s.noResultsText || "No options match your search."), q = T(() => s.valueExtractor ? s.valueExtractor : s.valueField ? (i) => i[s.valueField] : null), fe = T(() => s.keyExtractor ? s.keyExtractor : s.keyField ? (i) => String(i[s.keyField]) : q.value ? (i) => String(q.value(i)) : null), bt = T(() => s.groupFormatter ? s.groupFormatter : s.groupField ? (i) => String(i[s.groupField]) : null), Fe = T(() => s.formatter ? s.formatter : s.labelField ? (i) => String(i[s.labelField]) : (i) => String(i)), Oe = T(() => s.selectionFormatter ? s.selectionFormatter : Fe.value), Ie = T(() => [...yt.value, ...ht.value, ...gt.value]), De = T(() => !!(s.groupField || s.groupFormatter)), pe = T(() => Ie.value.map((i, w) => {
+      const v = bt.value?.(i), p = Fe.value(i), y = s.subtitleFormatter?.(i), O = p ? p.trim().toLowerCase() : "", Ne = y ? y.trim().toLowerCase() : "", oe = [];
       return s.searchFields ? s.searchFields.forEach((Re) => {
         i[Re] && oe.push(String(i[Re]).toLowerCase());
       }) : (oe.push(O), Ne && oe.push(Ne)), {
-        key: fe.value?.(i) ?? String(E),
-        group: p,
-        title: v,
+        key: fe.value?.(i) ?? String(w),
+        group: v,
+        title: p,
         subtitle: y,
         searchContent: oe.join(""),
         ref: i
       };
     })), L = T(() => {
-      let i = [...ve.value];
-      if (w.value) {
-        const E = a.value.trim().toLowerCase();
-        if (E.length) {
-          i = i.filter((y) => y.searchContent.includes(E));
-          const p = Gt(a.value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), v = new RegExp(`(${p})`, "ig");
+      let i = [...pe.value];
+      if (g.value) {
+        const w = a.value.trim().toLowerCase();
+        if (w.length) {
+          i = i.filter((y) => y.searchContent.includes(w));
+          const v = Gt(a.value).replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&"), p = new RegExp(`(${v})`, "ig");
           i = i.map((y) => ({
             ...y,
-            title: y.title.replace(v, "<mark>$1</mark>"),
-            subtitle: y.subtitle?.replace(v, "<mark>$1</mark>")
-          })), B.value && (i.find((O) => O.searchContent === E) !== void 0 || i.push({
+            title: y.title.replace(p, "<mark>$1</mark>"),
+            subtitle: y.subtitle?.replace(p, "<mark>$1</mark>")
+          })), B.value && (i.find((O) => O.searchContent === w) !== void 0 || i.push({
             key: l,
             title: mt.value ? "Create <strong>" + a.value.trim() + "</strong>..." : a.value.trim()
           }));
@@ -793,20 +793,20 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
             options: L.value
           }
         ];
-      const i = jt(L.value.map((p) => p.group ?? "")), E = Ut(L.value, (p) => p.group ?? "");
-      return i.map((p) => ({
-        groupTitle: p,
-        options: E[p]
+      const i = jt(L.value.map((v) => v.group ?? "")), w = Ut(L.value, (v) => v.group ?? "");
+      return i.map((v) => ({
+        groupTitle: v,
+        options: w[v]
       }));
     });
-    I(() => s.modelValue, me), I(ve, () => {
+    I(() => s.modelValue, me), I(pe, () => {
       C.value && setTimeout($e, 0);
     }), I(a, () => {
-      w.value && !s.remoteSearch && !a.value.trim().length && (w.value = !1);
+      g.value && !s.remoteSearch && !a.value.trim().length && (g.value = !1);
     }), I(C, () => {
-      C.value ? setTimeout(Ft, 0) : (w.value = !1, a.value = m.value ?? "", d.value && (d.value.style.visibility = "hidden"));
+      C.value ? setTimeout(Ft, 0) : (g.value = !1, a.value = m.value ?? "", d.value && (d.value.style.visibility = "hidden"));
     }), I(L, () => {
-      s.modelValue !== null && f.value === null && me(), (x.value !== null || w.value) && !L.value.find((i) => i.key == x.value) && (x.value = L.value[0]?.key ?? o);
+      s.modelValue !== null && f.value === null && me(), (x.value !== null || g.value) && !L.value.find((i) => i.key == x.value) && (x.value = L.value[0]?.key ?? o);
     }), _(async () => {
       B.value = s.onCreateItem !== void 0, s.loadOptions && s.preload && (a.value = z.value, await Ve(), a.value = ""), !s.options && !s.loadOptions && (s.valueField || s.valueExtractor) ? a.value = z.value : me(), I(f, () => {
         const i = We(f.value) && q.value !== null ? q.value(f.value) : f.value;
@@ -819,11 +819,11 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       await He(), h.value && u("optionsLoaded", h.value);
     }
     async function He() {
-      const i = s.remoteSearch && w.value && a.value.length ? a.value : null;
-      g.value = !0, h.value = await s.loadOptions?.(i) ?? [], g.value = !1, Ae();
+      const i = s.remoteSearch && g.value && a.value.length ? a.value : null;
+      E.value = !0, h.value = await s.loadOptions?.(i) ?? [], E.value = !1, Ae();
     }
     function Tt() {
-      w.value && (He(), w.value = a.value.trim().length > 0);
+      g.value && (He(), g.value = a.value.trim().length > 0);
     }
     function St(i) {
       if (i.key == "Escape") {
@@ -832,25 +832,25 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       }
       if (!(i.key == "ArrowLeft" || i.key == "ArrowRight") && i.key != "Tab") {
         if (!P.value) {
-          w.value || i.preventDefault();
+          g.value || i.preventDefault();
           return;
         }
         if (i.key == "ArrowUp" || i.key == "ArrowDown")
-          return i.preventDefault(), pe(i.key == "ArrowUp" ? -1 : 1);
+          return i.preventDefault(), ve(i.key == "ArrowUp" ? -1 : 1);
         if (i.key == "PageUp" || i.key == "PageDown")
-          return i.preventDefault(), pe(i.key == "PageUp" ? -10 : 10);
+          return i.preventDefault(), ve(i.key == "PageUp" ? -10 : 10);
         if (i.key == "Home" || i.key == "End")
-          return i.preventDefault(), pe(i.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
+          return i.preventDefault(), ve(i.key == "Home" ? -Number.MAX_SAFE_INTEGER : Number.MAX_SAFE_INTEGER);
         if (i.key == "Enter") {
           i.preventDefault();
-          const E = L.value.find((p) => p.key == x.value);
-          if (E) return Be(E);
+          const w = L.value.find((v) => v.key == x.value);
+          if (w) return Be(w);
         }
         if (i.key === "Delete" || i.key === "Backspace") {
-          a.value.length > 1 && (w.value = !0);
+          a.value.length > 1 && (g.value = !0);
           return;
         }
-        !i.metaKey && Un.includes(i.key) && (w.value = !0);
+        !i.metaKey && Un.includes(i.key) && (g.value = !0);
       }
     }
     function Ct() {
@@ -863,11 +863,11 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       return fe.value ? fe.value(f.value) : Mt(i)?.key ?? "";
     }
     function Mt(i) {
-      const E = L.value.find((y) => y.ref === i);
-      if (E)
-        return E;
-      const p = s.keyExtractor ? (y, O) => s.keyExtractor(y) === s.keyExtractor(O) : we, v = L.value.find((y) => p(y.ref, i));
-      return v || null;
+      const w = L.value.find((y) => y.ref === i);
+      if (w)
+        return w;
+      const v = s.keyExtractor ? (y, O) => s.keyExtractor(y) === s.keyExtractor(O) : we, p = L.value.find((y) => v(y.ref, i));
+      return p || null;
     }
     function Lt() {
       s.debug || (!a.value.length && s.nullTitle && (f.value = null, m.value = null), C.value = !1);
@@ -876,40 +876,40 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       P.value || Ve(), s.optionsListId && d.value?.setAttribute("id", s.optionsListId), Ot();
     }
     function Ot() {
-      const i = r.value.getBoundingClientRect(), E = i.y + i.height + 2, p = i.x, v = d.value, y = window.getComputedStyle(r.value);
+      const i = r.value.getBoundingClientRect(), w = i.y + i.height + 2, v = i.x, p = d.value, y = window.getComputedStyle(r.value);
       for (let O in y)
-        /^(font|text)/.test(O) && (v.style[O] = y[O]);
-      if (v.style.top = E + "px", v.style.left = p + "px", v.style.minWidth = i.width + "px", !y.maxHeight || y.maxHeight == "none") {
-        const O = window.innerHeight - E - 12;
-        v.style.maxHeight = O + "px";
+        /^(font|text)/.test(O) && (p.style[O] = y[O]);
+      if (p.style.top = w + "px", p.style.left = v + "px", p.style.minWidth = i.width + "px", !y.maxHeight || y.maxHeight == "none") {
+        const O = window.innerHeight - w - 12;
+        p.style.maxHeight = O + "px";
       }
-      v.style.visibility = "visible", document.body.appendChild(v), setTimeout($e, 0);
+      p.style.visibility = "visible", document.body.appendChild(p), setTimeout($e, 0);
     }
     function $e() {
       if (!P.value || !x.value) return;
-      const i = L.value.findIndex((v) => v.key == x.value), E = d.value, p = E?.querySelectorAll(".option")[i];
-      p && (E.scrollTop = p.offsetTop);
+      const i = L.value.findIndex((p) => p.key == x.value), w = d.value, v = w?.querySelectorAll(".option")[i];
+      v && (w.scrollTop = v.offsetTop);
     }
     function It(i) {
       x.value = i ? i.key : null;
     }
-    function pe(i) {
-      const E = L.value.findIndex((O) => O.key == x.value);
-      let p = E + i;
-      if (p < 0 ? p = 0 : p >= L.value.length && (p = L.value.length - 1), E == p) return;
-      x.value = L.value[p].key;
-      const v = d.value, y = v?.querySelectorAll(".option")[p];
-      y && (y.offsetTop < v.scrollTop ? v.scrollTop = y.offsetTop : y.offsetTop + y.offsetHeight > v.scrollTop + v.clientHeight && (v.scrollTop = y.offsetTop + y.offsetHeight - v.clientHeight));
+    function ve(i) {
+      const w = L.value.findIndex((O) => O.key == x.value);
+      let v = w + i;
+      if (v < 0 ? v = 0 : v >= L.value.length && (v = L.value.length - 1), w == v) return;
+      x.value = L.value[v].key;
+      const p = d.value, y = p?.querySelectorAll(".option")[v];
+      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));
     }
     function Be(i) {
-      if (w.value = !1, i.key === o)
+      if (g.value = !1, i.key === o)
         a.value = "", f.value = null, m.value = null;
       else if (i.key === l) {
-        const E = a.value.trim();
-        a.value = "", f.value = null, m.value = null, s.onCreateItem?.(E);
+        const w = a.value.trim();
+        a.value = "", f.value = null, m.value = null, s.onCreateItem?.(w);
       } else {
-        const p = ve.value.find((v) => v.key == i.key).ref;
-        f.value = p, m.value = Oe.value(p), a.value = m.value ?? "";
+        const v = pe.value.find((p) => p.key == i.key).ref;
+        f.value = v, m.value = Oe.value(v), a.value = m.value ?? "";
       }
       c.value?.blur(), _e();
     }
@@ -925,12 +925,12 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       for (; i && i.tagName !== "FORM" && i.tagName !== "BODY"; )
         i = i.parentElement;
       if (!i) return;
-      const E = i.querySelectorAll('input, button, textarea, select, [tabindex]:not([tabindex="-1"])');
-      if (!E) return;
-      const p = Array.from(E).findIndex((y) => y === c.value), v = E[p + 1];
-      v && setTimeout(() => v.focus(), 0);
+      const w = i.querySelectorAll('input, button, textarea, select, [tabindex]:not([tabindex="-1"])');
+      if (!w) return;
+      const v = Array.from(w).findIndex((y) => y === c.value), p = w[v + 1];
+      p && setTimeout(() => p.focus(), 0);
     }
-    return (i, E) => (b(), k("div", {
+    return (i, w) => (b(), k("div", {
       ref_key: "el",
       ref: r,
       class: H(["vf-smart-select", { disabled: Le.value, open: C.value }])
@@ -938,7 +938,7 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
       ie($("input", {
         ref_key: "searchField",
         ref: c,
-        "onUpdate:modelValue": E[0] || (E[0] = (p) => a.value = p),
+        "onUpdate:modelValue": w[0] || (w[0] = (v) => a.value = v),
         type: "text",
         disabled: Le.value,
         class: H({ nullable: !!i.nullTitle }),
@@ -958,32 +958,32 @@ const $n = ["disabled", "placeholder", "required", "name"], Bn = {
         ref: d,
         class: H(["vf-smart-select-options", { grouped: De.value }])
       }, [
-        P.value ? (b(!0), k(le, { key: 1 }, re(kt.value, (p) => (b(), k("div", {
-          key: p.groupTitle,
+        P.value ? (b(!0), k(le, { key: 1 }, re(kt.value, (v) => (b(), k("div", {
+          key: v.groupTitle,
           class: "group"
         }, [
-          p.groupTitle ? (b(), k("div", _n, [
+          v.groupTitle ? (b(), k("div", _n, [
             W(i.$slots, "group", {
-              group: p.groupTitle
+              group: v.groupTitle
             }, () => [
-              X(R(p.groupTitle), 1)
+              X(R(v.groupTitle), 1)
             ])
           ])) : V("", !0),
-          (b(!0), k(le, null, re(p.options, (v) => (b(), k("div", {
-            key: v.key,
-            class: H(["option", [x.value === v.key && "highlighted", v.ref && i.classForOption?.(v.ref)]]),
-            onMousemove: (y) => It(v),
-            onMousedown: (y) => Be(v)
+          (b(!0), k(le, null, re(v.options, (p) => (b(), k("div", {
+            key: p.key,
+            class: H(["option", [x.value === p.key && "highlighted", p.ref && i.classForOption?.(p.ref)]]),
+            onMousemove: (y) => It(p),
+            onMousedown: (y) => Be(p)
           }, [
-            W(i.$slots, "option", { option: v }, () => [
+            W(i.$slots, "option", { option: p }, () => [
               $("div", {
                 class: "title",
-                innerHTML: v.title
+                innerHTML: p.title
               }, null, 8, Rn),
-              v.subtitle ? (b(), k("div", {
+              p.subtitle ? (b(), k("div", {
                 key: 0,
                 class: "subtitle",
-                innerHTML: v.subtitle
+                innerHTML: p.subtitle
               }, null, 8, Wn)) : V("", !0)
             ])
           ], 42, Nn))), 128)),
@@ -1043,6 +1043,7 @@ const qn = { class: "content" }, zn = { class: "message" }, Kn = {
 }, Xn = /* @__PURE__ */ N({
   __name: "vf-toast",
   props: {
+    position: {},
     message: {},
     className: {},
     durationSecs: {},
@@ -1063,7 +1064,7 @@ const qn = { class: "content" }, zn = { class: "message" }, Kn = {
         easing: "linear"
       }), setTimeout(() => t.callback(), l * 1e3);
     }), (l, s) => (b(), k("div", {
-      class: H(["vf-toast", l.className]),
+      class: H(["vf-toast", [l.className, { top: l.position === "top", bottom: l.position !== "top" }]]),
       onClick: ke(n, ["stop"])
     }, [
       $("div", qn, [
@@ -1159,7 +1160,7 @@ const Ue = {
 }), xe = Symbol("HookState");
 function as(e, t) {
   const n = t ?? be();
-  _(() => fo(n, e), n), Qe(() => vo(n), n), et(() => Pe(n), n), ue(() => Pe(n), n);
+  _(() => fo(n, e), n), Qe(() => po(n), n), et(() => Pe(n), n), ue(() => Pe(n), n);
 }
 function fo(e, t) {
   const n = {};
@@ -1169,7 +1170,7 @@ function fo(e, t) {
   }
   t.windowScrolledToBottom && (n.window = new G(window, t.windowScrolledToBottom)), e[xe] = n;
 }
-function vo(e) {
+function po(e) {
   const t = e[xe];
   t?.el?.install(), t?.ancestor?.install(), t?.window?.install();
 }
@@ -1203,7 +1204,7 @@ class G {
 function us(e) {
   _(() => window.addEventListener("resize", e)), Qe(() => window.addEventListener("resize", e)), et(() => window.removeEventListener("resize", e)), ue(() => window.removeEventListener("resize", e));
 }
-const po = {
+const vo = {
   mounted: ze,
   updated: ze
 }, qe = Symbol("HasAutoFocused");
@@ -1268,8 +1269,8 @@ function Eo(e, t) {
   }
   if (!u && e.attributes.getNamedItem("simplified-date") !== null) {
     let d = null;
-    const g = /* @__PURE__ */ new Date();
-    g.getFullYear() === s.getFullYear() ? (g.getMonth() !== s.getMonth() || g.getDate() !== s.getDate()) && (d = "M/d") : d = "M/d/yy";
+    const E = /* @__PURE__ */ new Date();
+    E.getFullYear() === s.getFullYear() ? (E.getMonth() !== s.getMonth() || E.getDate() !== s.getDate()) && (d = "M/d") : d = "M/d/yy";
     const h = r ? null : F.defaultTimeFormat;
     u = tt([d, h]).join(" ");
   }
@@ -1327,7 +1328,7 @@ const xo = {
   unmounted: ft
 }, j = /* @__PURE__ */ new Map();
 function dt(e, t) {
-  j.size === 0 && window.addEventListener("keydown", vt), j.set(t.value.toLowerCase(), [...j.get(t.value.toLowerCase()) ?? [], e]);
+  j.size === 0 && window.addEventListener("keydown", pt), j.set(t.value.toLowerCase(), [...j.get(t.value.toLowerCase()) ?? [], e]);
 }
 function ft(e, t) {
   const n = j.get(t.value.toLowerCase());
@@ -1335,12 +1336,12 @@ function ft(e, t) {
     const o = n.indexOf(e);
     o !== -1 && n.splice(o, 1), n.length === 0 && j.delete(t.value.toLowerCase());
   }
-  j.size === 0 && window.removeEventListener("keydown", vt);
+  j.size === 0 && window.removeEventListener("keydown", pt);
 }
 function Mo(e, t) {
   ft(e, t), dt(e, t);
 }
-function vt(e) {
+function pt(e) {
   if (typeof e.key != "string") return;
   const t = e.key.toLowerCase(), n = j.get(t);
   n && (Yt(n)?.click(), e.preventDefault());
@@ -1365,7 +1366,7 @@ function Ze(e, t) {
 const Oo = {
   mounted: Ge,
   updated: Ge,
-  unmounted: pt
+  unmounted: vt
 }, J = Symbol("TooltipState");
 function Ge(e, t) {
   let n = e.attributes.getNamedItem("tip")?.value ?? t.value;
@@ -1376,9 +1377,9 @@ function Ge(e, t) {
     };
     e[J] ? e[J].configure(o) : e[J] = new Io(e, o);
   } else
-    pt(e);
+    vt(e);
 }
-function pt(e) {
+function vt(e) {
   e[J]?.destroy(), delete e[J];
 }
 class Io {
@@ -1429,7 +1430,7 @@ class Io {
   }
 }
 function Do(e) {
-  e.directive("autofocus", po), e.directive("confirm-button", mo), e.directive("date-input", yo), e.directive("datetime", wo), e.directive("disabled", bo), e.directive("duration", To), e.directive("hotkey", xo), e.directive("infinite-scroll", Lo), e.directive("readonly", Fo), e.directive("tooltip", Oo);
+  e.directive("autofocus", vo), e.directive("confirm-button", mo), e.directive("date-input", yo), e.directive("datetime", wo), e.directive("disabled", bo), e.directive("duration", To), e.directive("hotkey", xo), e.directive("infinite-scroll", Lo), e.directive("readonly", Fo), e.directive("tooltip", Oo);
 }
 function cs(e) {
   Do(e);
@@ -1452,7 +1453,7 @@ export {
   Wo as dismissOverlayInjectionByInstance,
   nt as dismissOverlayInjectionByInternalInstance,
   ln as dismissOverlayInjectionByVnode,
-  vs as escapeHtml,
+  ps as escapeHtml,
   cn as formatError,
   kn as formatNumber,
   Hn as formatPhone,
@@ -1464,7 +1465,7 @@ export {
   We as isNotNullOrUndefined,
   Yo as maskComponent,
   fn as maskEl,
-  vn as maskForm,
+  pn as maskForm,
   ns as nl2br,
   es as nullifyEmptyInputs,
   Te as presentOverlay,

package/package.json

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

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

@@ -126,7 +126,7 @@ const loadedOptions = computed(() => props.options ?? remoteOptions.value ?? [])
 
 const effectivePrependOptions = computed(() => props.prependOptions ?? []);
 const effectiveAppendOptions = computed(() => props.appendOptions ?? []);
-const effectiveDisabled = computed(() => !!props.disabled || (!isLoaded.value && (isLoading.value || !props.loadOptions))); // need to check this. what about with typeahead?
+const effectiveDisabled = computed(() => !!props.disabled || (!isLoaded.value && !props.loadOptions));
 const effectiveLoadingText = computed(() => props.loadingText || '...');
 const effectivePlaceholder = computed(() => {
     if (!isLoaded.value) {