@signal24/vue-foundation 4.19.3 → 4.19.5

package/dist/src/components/vf-smart-select.vue.d.ts

@@ -27,6 +27,7 @@ declare const _default: <T, V = T>(__VLS_props: NonNullable<Awaited<typeof __VLS
         debug?: boolean;
         required?: boolean;
         showCreateTextOnNewItem?: boolean;
+        autoNext?: boolean;
     }> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         addRemoteOption: (option: T) => void;

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 Ct, getCurrentInstance as pe, withModifiers as ye, normalizeStyle as xt, 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 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 { 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";
@@ -49,7 +49,7 @@ const Ut = {
         }, U(k), 9, Pt);
       }), 128))
     ], 512)), [
-      [Ct, u.value]
+      [xt, u.value]
     ]) : (E(), b("select", Ut, [
       F("option", null, U(n.loadingText || "Loading..."), 1)
     ]));
@@ -76,14 +76,14 @@ const Ut = {
       if (f.y === "center")
         c = w.top + w.height / 2 - m.height / 2, r.push("anchored-center-y");
       else {
-        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");
+        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");
       }
       if (f.x === "center")
         S = w.left + w.width / 2 - m.width / 2, r.push("anchored-center-x");
       else {
-        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");
+        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");
       }
       return {
         styles: {
@@ -104,7 +104,7 @@ const Ut = {
       }, 10);
     }), (g, k) => (E(), b("div", {
       class: $(["vf-overlay-anchor", i.value]),
-      style: xt(o.value),
+      style: Ct(o.value),
       onClick: ye(d, ["stop"])
     }, [
       G(g.$slots, "default")
@@ -456,7 +456,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 Co(e) {
+function xo(e) {
   return e.replace(/\n/g, "<br>");
 }
 function fn(e) {
@@ -469,7 +469,7 @@ function vn(e) {
 function mn(e, t = 1) {
   return "$" + (Number(e) / t).toFixed(3).replace(/0$/, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 }
-function xo() {
+function Co() {
   return dn();
 }
 const hn = ["disabled", "placeholder", "required"], pn = {
@@ -504,7 +504,8 @@ const hn = ["disabled", "placeholder", "required"], pn = {
     optionsListId: {},
     debug: { type: Boolean },
     required: { type: Boolean },
-    showCreateTextOnNewItem: { type: Boolean }
+    showCreateTextOnNewItem: { type: Boolean },
+    autoNext: { type: Boolean }
   },
   emits: ["optionsLoaded", "update:modelValue"],
   setup(e, { expose: t, emit: n }) {
@@ -512,12 +513,12 @@ const hn = ["disabled", "placeholder", "required"], pn = {
     t({
       addRemoteOption: kt
     });
-    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), 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) => {
+    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) => {
       var Ae, Fe;
-      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 = [];
+      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 = [];
       return l.searchFields ? l.searchFields.forEach((De) => {
         s[De] && Z.push(String(s[De]).toLowerCase());
-      }) : (Z.push(y), C && Z.push(C)), {
+      }) : (Z.push(y), x && Z.push(x)), {
         key: ((Fe = j.value) == null ? void 0 : Fe.call(j, s)) ?? String(v),
         title: h,
         subtitle: p,
@@ -532,13 +533,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 C;
+            var x;
             return {
               ...y,
               title: y.title.replace(p, "<mark>$1</mark>"),
-              subtitle: (C = y.subtitle) == null ? void 0 : C.replace(p, "<mark>$1</mark>")
+              subtitle: (x = y.subtitle) == null ? void 0 : x.replace(p, "<mark>$1</mark>")
             };
-          }), Se.value && (s.find((C) => C.searchContent === v) !== void 0 || s.push({
+          }), Se.value && (s.find((x) => x.searchContent === v) !== void 0 || s.push({
             key: i,
             title: at.value ? "Create <strong>" + r.value.trim() + "</strong>..." : r.value.trim()
           }));
@@ -562,7 +563,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(), (x.value || m.value) && !H.value.find((v) => v.key == x.value) && (x.value = ((s = H.value[0]) == null ? void 0 : s.key) ?? o);
+      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);
     }), 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(
@@ -600,7 +601,7 @@ 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 == x.value);
+          const v = H.value.find((h) => h.key == C.value);
           if (v) return He(v);
         }
         if (s.key === "Delete" || s.key === "Backspace") {
@@ -617,7 +618,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       }, 0);
     }
     function ht(s) {
-      c.value ? x.value = pt(c.value) : l.nullTitle && (x.value = o);
+      c.value ? C.value = pt(c.value) : l.nullTitle && (C.value = o);
     }
     function pt(s) {
       var v;
@@ -627,7 +628,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, C) => l.keyExtractor(y) === l.keyExtractor(C) : Xe, p = H.value.find((y) => h(y.ref, s));
+      const h = l.keyExtractor ? (y, x) => l.keyExtractor(y) === l.keyExtractor(x) : Xe, p = H.value.find((y) => h(y.ref, s));
       return p || null;
     }
     function gt() {
@@ -639,27 +640,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 C in y)
-        /^(font|text)/.test(C) && (p.style[C] = y[C]);
+      for (let x in y)
+        /^(font|text)/.test(x) && (p.style[x] = y[x]);
       if (p.style.top = v + "px", p.style.left = h + "px", p.style.minWidth = s.width + "px", !y.maxHeight || y.maxHeight == "none") {
-        const C = window.innerHeight - v - 12;
-        p.style.maxHeight = C + "px";
+        const x = window.innerHeight - v - 12;
+        p.style.maxHeight = x + "px";
       }
       p.style.visibility = "visible", document.body.appendChild(p), setTimeout(Ie, 0);
     }
     function Ie() {
-      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];
+      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];
       h && (v.scrollTop = h.offsetTop);
     }
     function bt(s) {
-      x.value = s ? s.key : null;
+      C.value = s ? s.key : null;
     }
     function ae(s) {
-      const v = H.value.findIndex((C) => C.key == x.value);
+      const v = H.value.findIndex((x) => x.key == C.value);
       let h = v + s;
       if (h < 0 ? h = 0 : h >= H.value.length && (h = H.value.length - 1), v == h) return;
-      x.value = H.value[h].key;
+      C.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));
     }
@@ -671,39 +672,40 @@ 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((C) => C.key == s.key).ref;
+        const y = ie.value.find((x) => x.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 ? 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 = "");
+      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 = "");
     }
     function kt(s) {
       w.value.unshift(s);
     }
     function Oe() {
       var y;
+      if (!l.autoNext) return;
       let s = (y = a.value) == null ? void 0 : y.parentElement;
       for (; s && s.tagName !== "FORM" && s.tagName !== "BODY"; )
         s = s.parentElement;
       if (!s) return;
       const v = s.querySelectorAll('input, button, textarea, select, [tabindex]:not([tabindex="-1"])');
       if (!v) return;
-      const h = Array.from(v).findIndex((C) => C === d.value), p = v[h + 1];
+      const h = Array.from(v).findIndex((x) => x === d.value), p = v[h + 1];
       p && setTimeout(() => p.focus(), 0);
     }
     return (s, v) => (E(), b("div", {
       ref_key: "el",
       ref: a,
-      class: $(["vf-smart-select", { disabled: Ce.value, open: I.value }])
+      class: $(["vf-smart-select", { disabled: xe.value, open: I.value }])
     }, [
       Q(F("input", {
         ref_key: "searchField",
         ref: d,
         "onUpdate:modelValue": v[0] || (v[0] = (h) => r.value = h),
         type: "text",
-        disabled: Ce.value,
+        disabled: xe.value,
         class: $({ nullable: !!s.nullTitle }),
         placeholder: ct.value,
         required: s.required,
@@ -724,7 +726,7 @@ const hn = ["disabled", "placeholder", "required"], pn = {
           (E(!0), b(J, null, he(H.value, (h) => (E(), b("div", {
             key: String(h.key),
             class: $(["option", {
-              highlighted: x.value === h.key
+              highlighted: C.value === h.key
             }]),
             onMousemove: (p) => bt(h),
             onMousedown: (p) => He(h)
@@ -773,17 +775,18 @@ const hn = ["disabled", "placeholder", "required"], pn = {
       "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" }, Cn = {
+const Tn = { class: "content" }, Sn = { class: "message" }, xn = {
   key: 0,
   class: "close"
-}, xn = {
+}, Cn = {
   key: 0,
   class: "progress-bar"
 }, Ln = /* @__PURE__ */ N({
@@ -815,9 +818,9 @@ const Tn = { class: "content" }, Sn = { class: "message" }, Cn = {
     }, [
       F("div", Tn, [
         F("div", Sn, U(i.message), 1),
-        i.disableClose ? D("", !0) : (E(), b("div", Cn, "x"))
+        i.disableClose ? D("", !0) : (E(), b("div", xn, "x"))
       ]),
-      i.durationSecs !== null ? (E(), b("div", xn, [
+      i.durationSecs !== null ? (E(), b("div", Cn, [
         F("div", {
           ref_key: "progressInnerEl",
           ref: o,
@@ -1262,7 +1265,7 @@ export {
   To as maskComponent,
   Gt as maskEl,
   Qt as maskForm,
-  Co as nl2br,
+  xo as nl2br,
   Bo as nullifyEmptyInputs,
   Ee as presentOverlay,
   te as removeOverlayInjection,
@@ -1281,6 +1284,6 @@ export {
   Qe as unmaskForm,
   Vo as useInfiniteScroll,
   _o as useResizeWatcher,
-  xo as uuid,
+  Co as uuid,
   Mo as vfModalRef
 };

package/package.json

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

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>

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

@@ -82,6 +82,7 @@ const props = defineProps<{
     debug?: boolean;
     required?: boolean;
     showCreateTextOnNewItem?: boolean;
+    autoNext?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -523,6 +524,8 @@ function addRemoteOption(option: T) {
 }
 
 function focusNextInput() {
+    if (!props.autoNext) return;
+
     let parent = el.value?.parentElement;
     while (parent && parent.tagName !== 'FORM' && parent.tagName !== 'BODY') {
         parent = parent.parentElement;