@signal24/vue-foundation 4.2.0 → 4.2.1

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

@@ -1,4 +1,4 @@
-import type { AnyComponentPublicInstance } from '@/components';
+import type { AnyComponentPublicInstance } from '../components/modal-container';
 declare const MaskState: unique symbol;
 interface IMaskState {
     [MaskState]?: {

package/dist/vue-foundation.es.js

@@ -1,16 +1,16 @@
 var Ce = Object.defineProperty;
-var Le = (e, t, n) => t in e ? Ce(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
-var f = (e, t, n) => (Le(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { defineComponent as x, defineProps as Ie, defineEmits as De, ref as I, computed as D, openBlock as a, createElementBlock as d, createElementVNode as v, toDisplayString as w, withDirectives as H, createCommentVNode as g, Fragment as $, renderList as P, vModelSelect as He, reactive as $e, h as ue, markRaw as Ae, onMounted as W, onBeforeUnmount as q, getCurrentInstance as he, createBlock as U, Teleport as Be, normalizeClass as E, withModifiers as Ve, renderSlot as F, resolveDirective as fe, createSlots as Fe, withCtx as _, createTextVNode as Q, vModelText as _e, watch as J, onActivated as pe, onDeactivated as me } from "vue";
+var xe = (e, t, n) => t in e ? Ce(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
+var f = (e, t, n) => (xe(e, typeof t != "symbol" ? t + "" : t, n), n);
+import { defineComponent as L, defineProps as Ie, defineEmits as He, ref as I, computed as H, openBlock as a, createElementBlock as d, createElementVNode as v, toDisplayString as w, withDirectives as D, createCommentVNode as g, Fragment as $, renderList as P, vModelSelect as De, reactive as $e, h as ue, markRaw as Ae, onMounted as W, onBeforeUnmount as q, getCurrentInstance as he, createBlock as U, Teleport as Be, normalizeClass as E, withModifiers as Ve, renderSlot as F, resolveDirective as fe, createSlots as Fe, withCtx as _, createTextVNode as Q, vModelText as _e, watch as J, onActivated as pe, onDeactivated as me } from "vue";
 import { debounce as Ne, isEqual as ve, upperFirst as Ke, startCase as Re, cloneDeep as je, remove as Pe } from "lodash";
 import { escapeHtml as We } from "@vue/shared";
-import { escapeHtml as Hn } from "@vue/shared";
+import { escapeHtml as Dn } from "@vue/shared";
 import { format as R } from "date-fns";
-const qe = x({
+const qe = L({
   setup() {
     const e = Ie();
-    De(["update:modelValue"]);
-    const t = I(null), n = D(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = I(e.modelValue ?? null);
+    He(["update:modelValue"]);
+    const t = I(null), n = H(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = I(e.modelValue ?? null);
     return { props: e, options: t, renderOptions: n, selectedItem: i };
   },
   watch: {
@@ -45,7 +45,7 @@ const qe = x({
   value: null
 }, Xe = ["value"];
 function Ye(e, t, n, i, s, o) {
-  return e.renderOptions ? H((a(), d("select", {
+  return e.renderOptions ? D((a(), d("select", {
     key: 1,
     "onUpdate:modelValue": t[0] || (t[0] = (l) => e.selectedItem = l)
   }, [
@@ -58,14 +58,14 @@ function Ye(e, t, n, i, s, o) {
       }, w(l), 9, Xe);
     }), 128))
   ], 512)), [
-    [He, e.selectedItem]
+    [De, e.selectedItem]
   ]) : (a(), d("select", Ue, [
     v("option", null, w(e.props.loadingText || "Loading..."), 1)
   ]));
 }
 const rn = /* @__PURE__ */ ge(qe, [["render", Ye]]);
 let Ze = 0;
-const y = $e([]), an = x({
+const y = $e([]), an = L({
   setup() {
     return () => ue("div", { id: "modal-container" }, [
       P(y, (e) => e.vnode)
@@ -173,7 +173,7 @@ const Je = ["id"], et = {
 }, tt = { class: "vf-modal-content" }, nt = {
   key: 1,
   class: "vf-modal-footer"
-}, it = /* @__PURE__ */ x({
+}, it = /* @__PURE__ */ L({
   __name: "modal",
   props: {
     id: {},
@@ -235,7 +235,7 @@ const Je = ["id"], et = {
     ]));
   }
 });
-const st = ["innerHtml"], ot = ["innerText"], V = /* @__PURE__ */ x({
+const st = ["innerHtml"], ot = ["innerText"], V = /* @__PURE__ */ L({
   __name: "alert-modal",
   props: {
     isBare: { type: Boolean },
@@ -247,7 +247,7 @@ const st = ["innerHtml"], ot = ["innerText"], V = /* @__PURE__ */ x({
     callback: { type: Function }
   },
   setup(e) {
-    const t = e, n = D(() => t.message instanceof Error ? Qe(t.message) : t.message);
+    const t = e, n = H(() => t.message instanceof Error ? Qe(t.message) : t.message);
     return (i, s) => {
       const o = fe("autofocus");
       return a(), U(it, {
@@ -276,7 +276,7 @@ const st = ["innerHtml"], ot = ["innerText"], V = /* @__PURE__ */ x({
           name: "footer",
           fn: _(() => [
             i.shouldConfirm ? (a(), d($, { key: 0 }, [
-              H((a(), d("button", {
+              D((a(), d("button", {
                 class: "primary",
                 onClick: s[0] || (s[0] = () => i.callback(!0))
               }, [
@@ -288,7 +288,7 @@ const st = ["innerHtml"], ot = ["innerText"], V = /* @__PURE__ */ x({
                 class: "default",
                 onClick: s[1] || (s[1] = () => i.callback(!1))
               }, "Cancel")
-            ], 64)) : H((a(), d("button", {
+            ], 64)) : D((a(), d("button", {
               key: 1,
               class: "default",
               onClick: s[2] || (s[2] = () => i.callback(!0))
@@ -600,7 +600,7 @@ function yt(e, t, n, i, s, o) {
   return a(), d("div", {
     class: E(["vf-smart-select", { disabled: o.effectiveDisabled, open: e.shouldDisplayOptions }])
   }, [
-    H(v("input", {
+    D(v("input", {
       "onUpdate:modelValue": t[0] || (t[0] = (r) => e.searchText = r),
       ref: "searchField",
       type: "text",
@@ -638,7 +638,7 @@ function yt(e, t, n, i, s, o) {
     ], 512)) : g("", !0)
   ], 2);
 }
-const Et = /* @__PURE__ */ ge(dt, [["render", yt]]), gn = /* @__PURE__ */ x({
+const Et = /* @__PURE__ */ ge(dt, [["render", yt]]), gn = /* @__PURE__ */ L({
   __name: "ez-smart-select",
   props: {
     modelValue: {},
@@ -649,10 +649,10 @@ const Et = /* @__PURE__ */ ge(dt, [["render", yt]]), gn = /* @__PURE__ */ x({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, i = D(() => Array.isArray(n.options) ? n.options.map((l) => ({ value: l, label: l })) : Object.entries(n.options).map(([l, r]) => ({
+    const n = e, i = H(() => Array.isArray(n.options) ? n.options.map((l) => ({ value: l, label: l })) : Object.entries(n.options).map(([l, r]) => ({
       value: l,
       label: r
-    }))), s = D(() => n.formatter ? (l) => {
+    }))), s = H(() => n.formatter ? (l) => {
       var r;
       return (r = n.formatter) == null ? void 0 : r.call(n, l.label);
     } : (l) => l.label), o = I(i.value.find((l) => l.value === n.modelValue) ?? null);
@@ -695,13 +695,13 @@ function kt(e) {
 function Mt(e) {
   return e ? Re(e) : null;
 }
-function xt(e) {
+function Lt(e) {
   return e ? e.toUpperCase() : null;
 }
 function Ct(e) {
   return e ? lt(e) : null;
 }
-function Lt(e) {
+function xt(e) {
   return at(e);
 }
 const ne = {
@@ -712,9 +712,9 @@ const ne = {
   phone: St,
   upperFirst: kt,
   startCase: Mt,
-  upperCase: xt,
+  upperCase: Lt,
   desnake: Ct,
-  usCurrency: Lt
+  usCurrency: xt
 }, yn = (e) => ({
   ...ne,
   ...e(ne)
@@ -731,12 +731,12 @@ function Tn(e, t) {
   const s = e.currentTarget;
   s.style.userSelect = "none", s.classList.add("context-menu-active"), t.targetClass && s.classList.add(t.targetClass), t.class && i.classList.add(t.class), t.items.forEach((u) => {
     if (u == "-") {
-      const L = document.createElement("div");
-      L.classList.add("separator"), i.appendChild(L);
+      const x = document.createElement("div");
+      x.classList.add("separator"), i.appendChild(x);
       return;
     }
     const m = document.createElement("div");
-    m.classList.add("item"), m.style.userSelect = "none", m.innerText = u.title, i.appendChild(m), u.class && m.classList.add(u.class), u.shouldConfirm ? m.addEventListener("click", () => u.handler()) : m.addEventListener("click", () => xe(m, u.handler));
+    m.classList.add("item"), m.style.userSelect = "none", m.innerText = u.title, i.appendChild(m), u.class && m.classList.add(u.class), u.shouldConfirm ? m.addEventListener("click", () => u.handler()) : m.addEventListener("click", () => Le(m, u.handler));
   });
   const o = window.innerWidth - e.clientX, l = window.innerHeight - e.clientY, r = i.offsetHeight, c = i.offsetWidth, p = o < c ? e.clientX - c - 1 : e.clientX + 1, h = l < r ? e.clientY - r - 1 : e.clientY + 1;
   i.style.left = p + "px", i.style.top = h + "px", setTimeout(() => {
@@ -745,13 +745,13 @@ function Tn(e, t) {
   function T() {
     t.targetClass && s.classList.remove(t.targetClass), s.classList.remove("context-menu-active"), s.style.userSelect = "", n.remove();
   }
-  function xe(u, m) {
+  function Le(u, m) {
     if (u.classList.contains("pending-confirm"))
       return m();
-    const L = u.innerHTML;
+    const x = u.innerHTML;
     u.classList.add("pending-confirm"), u.innerText = "Confirm";
     const G = () => {
-      u.classList.remove("pending-confirm"), u.innerHTML = L, u.removeEventListener("mouseleave", G);
+      u.classList.remove("pending-confirm"), u.innerHTML = x, u.removeEventListener("mouseleave", G);
     };
     u.addEventListener("mouseleave", G), e.stopPropagation();
   }
@@ -759,13 +759,13 @@ function Tn(e, t) {
 const It = (e) => new Promise((t) => setTimeout(t, e)), On = (e) => It(e * 1e3), S = Symbol("MaskState");
 function bn(e, t) {
   const n = e.$.vnode.el, i = n.closest(".vf-modal");
-  return Dt(i ?? n, t);
+  return Ht(i ?? n, t);
 }
 function wn(e) {
   const t = e.$.vnode.el, n = t.closest(".vf-modal");
   return Oe(n ?? t);
 }
-function Dt(e, t) {
+function Ht(e, t) {
   if (!e[S]) {
     const n = document.createElement("div");
     n.classList.add("vf-mask"), e.appendChild(n), e[S] = { maskEl: n };
@@ -779,18 +779,18 @@ const j = Symbol("FormMaskState");
 function Sn(e, t, n) {
   const i = e instanceof Element ? e : be(e);
   i.classList.add("vf-masked");
-  const s = t instanceof Element ? t : i.querySelectorAll(t ?? "button:not([disabled])")[0], o = s.tagName === "INPUT" ? s.value : s.innerText;
+  const s = t instanceof Element ? t : i.querySelectorAll(t ?? "button:not([disabled])")[0], o = s.tagName === "INPUT" ? s.value : s.innerHTML;
   s.setAttribute("disabled", "disabled"), s.innerText = n ?? "Please wait...";
   const r = [...i.querySelectorAll("input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled])")];
   return r.forEach((c) => c.setAttribute("disabled", "disabled")), i[j] = {
     disabledElements: r,
     waitButton: s,
-    buttonText: o
-  }, () => Ht(i);
+    buttonHtml: o
+  }, () => Dt(i);
 }
-function Ht(e) {
+function Dt(e) {
   const t = e instanceof Element ? e : be(e), n = t[j];
-  n && (t.classList.remove("vf-masked"), n.disabledElements.forEach((i) => i.removeAttribute("disabled")), n.waitButton.innerText = n.buttonText, n.waitButton.removeAttribute("disabled"), delete t[j]);
+  n && (t.classList.remove("vf-masked"), n.disabledElements.forEach((i) => i.removeAttribute("disabled")), n.waitButton.innerHTML = n.buttonHtml, n.waitButton.removeAttribute("disabled"), delete t[j]);
 }
 function be(e) {
   const t = e.$.vnode.el;
@@ -811,7 +811,7 @@ function Mn(e, t) {
 function At(e) {
   return e instanceof Error && "status" in e && "body" in e;
 }
-function xn({ apiClient: e, onRequest: t, onError: n, CancelablePromise: i }) {
+function Ln({ apiClient: e, onRequest: t, onError: n, CancelablePromise: i }) {
   const s = e.request.request.bind(e.request);
   e.request.request = (o) => (t && (o = t(o)), new i((l, r, c) => {
     const p = s(o);
@@ -1077,7 +1077,7 @@ class Jt {
 function en(e) {
   e.directive("autofocus", _t), e.directive("confirm-button", Nt), e.directive("date-input", Rt), e.directive("datetime", Pt), e.directive("disabled", qt), e.directive("duration", zt), e.directive("infinite-scroll", Zt), e.directive("readonly", Gt), e.directive("tooltip", Qt);
 }
-function Ln(e) {
+function xn(e) {
   en(e);
 }
 export {
@@ -1093,17 +1093,17 @@ export {
   yn as createFilters,
   ye as createModalInjection,
   lt as desnakeCase,
-  Hn as escapeHtml,
+  Dn as escapeHtml,
   Qe as formatError,
   $t as formatNumber,
   rt as formatPhone,
   at as formatUSCurrency,
   mn as handleError,
   pn as handleErrorAndAlert,
-  xn as installApiClientInterceptors,
-  Ln as installVf,
+  Ln as installApiClientInterceptors,
+  xn as installVf,
   bn as maskComponent,
-  Dt as maskEl,
+  Ht as maskEl,
   Sn as maskForm,
   vn as nl2br,
   Mn as nullifyEmptyInputs,
@@ -1123,7 +1123,7 @@ export {
   X as toError,
   wn as unmaskComponent,
   Oe as unmaskEl,
-  Ht as unmaskForm,
+  Dt as unmaskForm,
   Bt as useInfiniteScroll,
   Cn as useResizeWatcher
 };

package/package.json

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

package/src/components/alert-modal.vue

@@ -20,8 +20,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import { formatError } from '@/helpers/error';
-
+import { formatError } from '../helpers/error';
 import Modal from './modal.vue';
 
 const props = defineProps<{

package/src/directives/datetime.ts

@@ -1,7 +1,7 @@
 import { format } from 'date-fns';
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
-import { VfOptions } from '@/config';
+import { VfOptions } from '../config';
 
 export const vDatetime: ObjectDirective<HTMLElement, string> = {
     beforeMount: applyDateTime,

package/src/helpers/error.ts

@@ -1,5 +1,4 @@
-import { showAlert } from '@/components/alert-helpers';
-
+import { showAlert } from '../components/alert-helpers';
 import { VfOptions } from '../config';
 
 export class UserError extends Error {

package/src/helpers/mask.ts

@@ -1,4 +1,4 @@
-import type { AnyComponentPublicInstance } from '@/components';
+import type { AnyComponentPublicInstance } from '../components/modal-container';
 
 /*///////////////////////////////////////////////
 Component Overlay Masking
@@ -51,7 +51,7 @@ interface IFormMaskState {
     [FormMaskState]?: {
         disabledElements: HTMLElement[];
         waitButton: HTMLElement;
-        buttonText: string;
+        buttonHtml: string;
     };
 }
 type FormMaskElement = Element & IFormMaskState;
@@ -63,7 +63,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
     const buttonEl = (
         buttonSelector instanceof Element ? buttonSelector : form.querySelectorAll(buttonSelector ?? 'button:not([disabled])')[0]
     ) as HTMLElement;
-    const originalButtonText = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerText;
+    const originalButtonHtml = buttonEl.tagName === 'INPUT' ? (buttonEl as HTMLInputElement).value : buttonEl.innerHTML;
     buttonEl.setAttribute('disabled', 'disabled');
     buttonEl.innerText = buttonText ?? 'Please wait...';
 
@@ -74,7 +74,7 @@ export function maskForm(formOrCmp: Element | AnyComponentPublicInstance, button
     (form as FormMaskElement)[FormMaskState] = {
         disabledElements: inputs,
         waitButton: buttonEl,
-        buttonText: originalButtonText
+        buttonHtml: originalButtonHtml
     };
 
     return () => unmaskForm(form);
@@ -89,7 +89,7 @@ export function unmaskForm(formOrCmp: Element | AnyComponentPublicInstance) {
     form.classList.remove('vf-masked');
 
     state.disabledElements.forEach(el => el.removeAttribute('disabled'));
-    state.waitButton.innerText = state.buttonText;
+    state.waitButton.innerHTML = state.buttonHtml;
     state.waitButton.removeAttribute('disabled');
 
     delete (form as FormMaskElement)[FormMaskState];