@signal24/vue-foundation 4.13.0 → 4.13.2

package/dist/src/config.d.ts

@@ -1,6 +1,7 @@
 interface IOptions {
     unhandledErrorSupportText: string;
     errorHandler: (err: Error) => void;
+    defaultDateFormat: string;
     defaultDateTimeFormat: string;
 }
 export declare const VfOptions: IOptions;

package/dist/src/directives/confirm-button.d.ts

@@ -1,2 +1,7 @@
 import type { ObjectDirective } from 'vue';
-export declare const vConfirmButton: ObjectDirective<HTMLElement, void>;
+interface ConfirmButtonOptions {
+    text?: string | null;
+    class?: string;
+}
+export declare const vConfirmButton: ObjectDirective<HTMLElement, ConfirmButtonOptions>;
+export {};

package/dist/vue-foundation.es.js

@@ -1,7 +1,7 @@
 var Ve = Object.defineProperty;
 var Fe = (e, t, n) => t in e ? Ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n;
 var E = (e, t, n) => (Fe(e, typeof t != "symbol" ? t + "" : t, n), n);
-import { defineComponent as C, defineProps as _e, defineEmits as Ne, ref as O, computed as F, openBlock as d, createElementBlock as u, createElementVNode as w, toDisplayString as x, withDirectives as j, createCommentVNode as b, Fragment as U, renderList as J, vModelSelect as Re, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ke, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as Ue, markRaw as We, onBeforeUnmount as ne, resolveDirective as Oe, createBlock as be, createSlots as Pe, withCtx as Y, createTextVNode as ae, vModelText as qe, watch as ce, onActivated as ke, onDeactivated as Se } from "vue";
+import { defineComponent as C, defineProps as _e, defineEmits as Ne, ref as O, computed as _, openBlock as d, createElementBlock as u, createElementVNode as w, toDisplayString as x, withDirectives as j, createCommentVNode as b, Fragment as U, renderList as J, vModelSelect as Re, getCurrentInstance as ee, onMounted as L, normalizeClass as k, normalizeStyle as Ke, withModifiers as te, renderSlot as K, reactive as je, h as W, Teleport as Ue, markRaw as We, onBeforeUnmount as ne, resolveDirective as Oe, createBlock as be, createSlots as Pe, withCtx as Y, createTextVNode as ae, vModelText as qe, watch as ce, onActivated as ke, onDeactivated as Se } from "vue";
 import { compact as ze, debounce as Xe, isEqual as Ce, upperFirst as Ye, startCase as Ze, cloneDeep as Ge, remove as Qe } from "lodash";
 import { escapeHtml as Je } from "@vue/shared";
 import { escapeHtml as ni } from "@vue/shared";
@@ -11,7 +11,7 @@ const nt = C({
   setup() {
     const e = _e();
     Ne(["update:modelValue"]);
-    const t = O(null), n = F(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = O(e.modelValue ?? null);
+    const t = O(null), n = _(() => t.value ? t.value.map((o) => e.preprocesor ? e.preprocesor(o) : o[e.displayKey ?? ""]) : null), i = O(e.modelValue ?? null);
     return { props: e, options: t, renderOptions: n, selectedItem: i };
   },
   watch: {
@@ -85,14 +85,14 @@ const Mn = /* @__PURE__ */ xe(nt, [["render", lt]]), rt = /* @__PURE__ */ C({
       if (m.y === "center")
         c = y.top + y.height / 2 - f.height / 2, h.push("anchored-center-y");
       else {
-        const I = (y.bottom + f.height < window.innerHeight || m.y === "below") && m.y !== "above";
-        c = I ? y.bottom : y.top - f.height, h.push(I ? "anchored-top" : "anchored-bottom");
+        const H = (y.bottom + f.height < window.innerHeight || m.y === "below") && m.y !== "above";
+        c = H ? y.bottom : y.top - f.height, h.push(H ? "anchored-top" : "anchored-bottom");
       }
       if (m.x === "center")
         T = y.left + y.width / 2 - f.width / 2, h.push("anchored-center-x");
       else {
-        const I = (y.left + f.width < window.innerWidth || m.x === "left") && m.x !== "right";
-        T = I ? y.left : y.right - f.width, h.push(I ? "anchored-left" : "anchored-right");
+        const H = (y.left + f.width < window.innerWidth || m.x === "left") && m.x !== "right";
+        T = H ? y.left : y.right - f.width, h.push(H ? "anchored-left" : "anchored-right");
       }
       return {
         styles: {
@@ -199,13 +199,14 @@ function $n(e, t) {
   });
   return () => P(n);
 }
-const N = {
+const M = {
   unhandledErrorSupportText: "please contact support",
   errorHandler: (e) => console.error("Unhandled error:", e),
-  defaultDateTimeFormat: "MM/dd/yy HH:mm"
+  defaultDateFormat: "M/d/yy",
+  defaultDateTimeFormat: "M/d/yy H:mm"
 };
 function Bn(e) {
-  Object.assign(N, e);
+  Object.assign(M, e);
 }
 class z extends Error {
   constructor(t) {
@@ -217,20 +218,20 @@ function ut(e) {
 
 ${oe(e).message}
 
-Please refresh the page and try again. If this error persists, ${N.unhandledErrorSupportText}.`;
+Please refresh the page and try again. If this error persists, ${M.unhandledErrorSupportText}.`;
 }
 function oe(e) {
   return e instanceof Error ? e : new Error(String(e));
 }
 async function Vn(e, t) {
   const n = oe(e);
-  return n instanceof z || N.errorHandler(n), t ? de(t, n) : de(n);
+  return n instanceof z || M.errorHandler(n), t ? de(t, n) : de(n);
 }
 async function Fn(e) {
   const t = oe(e);
-  t instanceof z || N.errorHandler(t);
+  t instanceof z || M.errorHandler(t);
 }
-const $ = Symbol("MaskState");
+const B = Symbol("MaskState");
 function _n(e, t) {
   const n = e.$.vnode.el, i = n.closest(".vf-modal");
   return ht(i ?? n, t);
@@ -240,14 +241,14 @@ function Nn(e) {
   return Me(n ?? t);
 }
 function ht(e, t) {
-  if (!e[$]) {
+  if (!e[B]) {
     const n = document.createElement("div");
-    n.classList.add("vf-mask"), e.appendChild(n), e[$] = { maskEl: n };
+    n.classList.add("vf-mask"), e.appendChild(n), e[B] = { maskEl: n };
   }
-  return e[$].maskEl.innerText = t ?? "", () => Me(e);
+  return e[B].maskEl.innerText = t ?? "", () => Me(e);
 }
 function Me(e) {
-  e[$] && e.removeChild(e[$].maskEl);
+  e[B] && e.removeChild(e[B].maskEl);
 }
 const Q = Symbol("FormMaskState");
 function ft(e, t, n) {
@@ -290,7 +291,7 @@ const pt = ["id"], mt = {
   setup(e, { expose: t }) {
     const n = ee(), i = e;
     t({ mask: m, unmask: y, hide: f, unhide: h });
-    const s = O(), o = O(), r = O(!1), l = F(() => ze([i.class, r.value && "hidden"]));
+    const s = O(), o = O(), r = O(!1), l = _(() => ze([i.class, r.value && "hidden"]));
     L(() => {
       var c;
       document.body.classList.add("vf-modal-open"), i.closeOnMaskClick && (window.addEventListener("keydown", p), (c = s.value) == null || c.addEventListener("click", a));
@@ -330,7 +331,7 @@ const pt = ["id"], mt = {
       w("form", {
         action: ".",
         class: k(["vf-modal", { scrolls: c.scrolls }]),
-        onSubmit: T[0] || (T[0] = te((M) => c.$emit("formSubmit"), ["prevent"])),
+        onSubmit: T[0] || (T[0] = te((I) => c.$emit("formSubmit"), ["prevent"])),
         ref_key: "form",
         ref: o
       }, [
@@ -363,7 +364,7 @@ const pt = ["id"], mt = {
     callback: { type: Function }
   },
   setup(e) {
-    const t = e, n = F(() => t.message instanceof Error ? ut(t.message) : t.message);
+    const t = e, n = _(() => t.message instanceof Error ? ut(t.message) : t.message);
     return (i, s) => {
       const o = Oe("autofocus");
       return d(), be(gt, {
@@ -465,7 +466,7 @@ function Lt(e) {
 function Kn() {
   return St();
 }
-const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:\"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM", It = {
+const D = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@#$%^&*()_+{}|:\"<>?qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM", It = {
   props: {
     modelValue: {
       type: null,
@@ -577,7 +578,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
         }
       } else
         this.nullTitle && e.unshift({
-          key: H,
+          key: D,
           title: this.nullTitle
         });
       return e;
@@ -603,7 +604,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     },
     effectiveOptions() {
       var e;
-      this.modelValue && !this.selectedOption && this.handleValueChanged(), this.highlightedOptionKey && !this.effectiveOptions.find((t) => t.key == this.highlightedOptionKey) && (this.highlightedOptionKey = ((e = this.effectiveOptions[0]) == null ? void 0 : e.key) ?? H);
+      this.modelValue && !this.selectedOption && this.handleValueChanged(), this.highlightedOptionKey && !this.effectiveOptions.find((t) => t.key == this.highlightedOptionKey) && (this.highlightedOptionKey = ((e = this.effectiveOptions[0]) == null ? void 0 : e.key) ?? D);
     }
   },
   async mounted() {
@@ -660,7 +661,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     },
     setHighlightedOptionKey(e) {
       var t;
-      this.selectedOption ? this.highlightedOptionKey = this.getOptionKey(this.selectedOption) : e ? this.highlightedOptionKey = ((t = this.effectiveOptions) == null ? void 0 : t[0].key) ?? H : this.nullTitle && (this.highlightedOptionKey = H);
+      this.selectedOption ? this.highlightedOptionKey = this.getOptionKey(this.selectedOption) : e ? this.highlightedOptionKey = ((t = this.effectiveOptions) == null ? void 0 : t[0].key) ?? D : this.nullTitle && (this.highlightedOptionKey = D);
     },
     getOptionKey(e) {
       var t;
@@ -709,7 +710,7 @@ const H = Symbol("null"), he = Symbol("create"), Mt = "`1234567890-=[]\\;',./~!@
     },
     selectOption(e) {
       var t;
-      if (this.isSearching = !1, e.key == H)
+      if (this.isSearching = !1, e.key == D)
         this.searchText = "", this.selectedOption = null, this.selectedOptionTitle = null;
       else if (e.key === he) {
         const n = this.searchText.trim();
@@ -793,10 +794,10 @@ const Nt = /* @__PURE__ */ xe(It, [["render", _t]]), jn = /* @__PURE__ */ C({
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const n = e, i = F(() => Array.isArray(n.options) ? n.options.map((l) => ({ value: l, label: l })) : Object.entries(n.options).map(([l, a]) => ({
+    const n = e, i = _(() => Array.isArray(n.options) ? n.options.map((l) => ({ value: l, label: l })) : Object.entries(n.options).map(([l, a]) => ({
       value: l,
       label: a
-    }))), s = F(() => n.formatter ? (l) => {
+    }))), s = _(() => n.formatter ? (l) => {
       var a;
       return (a = n.formatter) == null ? void 0 : a.call(n, l.label);
     } : (l) => l.label), o = t, r = O(i.value.find((l) => l.value === n.modelValue) ?? null);
@@ -947,10 +948,10 @@ function qn(e, t) {
       return c();
     const T = h.innerHTML;
     h.classList.add("pending-confirm"), h.innerText = "Confirm";
-    const M = () => {
-      h.classList.remove("pending-confirm"), h.innerHTML = T, h.removeEventListener("mouseleave", M);
+    const I = () => {
+      h.classList.remove("pending-confirm"), h.innerHTML = T, h.removeEventListener("mouseleave", I);
     };
-    h.addEventListener("mouseleave", M), f.stopPropagation();
+    h.addEventListener("mouseleave", I), f.stopPropagation();
   }
 }
 const tn = (e) => new Promise((t) => setTimeout(t, e)), zn = (e) => tn(e * 1e3);
@@ -984,11 +985,11 @@ function Gn(e, t) {
 }
 function sn(e, t) {
   const n = {};
-  if (t.elScrolledToBottom && (n.el = new B(e.vnode.el, t.elScrolledToBottom)), t.ancestorScrolledToBottom) {
+  if (t.elScrolledToBottom && (n.el = new V(e.vnode.el, t.elScrolledToBottom)), t.ancestorScrolledToBottom) {
     const i = De(e.vnode.el);
-    i ? n.ancestor = new B(i, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
+    i ? n.ancestor = new V(i, t.ancestorScrolledToBottom) : console.warn("[VueFoundation] No scollable ancestor found for component:", e);
   }
-  t.windowScrolledToBottom && (n.window = new B(window, t.windowScrolledToBottom)), e[le] = n;
+  t.windowScrolledToBottom && (n.window = new V(window, t.windowScrolledToBottom)), e[le] = n;
 }
 function on(e) {
   var n, i, s;
@@ -1008,7 +1009,7 @@ function De(e) {
   const n = window.getComputedStyle(t);
   return Z.includes(n.overflow) || Z.includes(n.overflowX) || Z.includes(n.overflowY) ? t : De(t);
 }
-class B {
+class V {
   constructor(t, n) {
     E(this, "isTripped", !1);
     E(this, "onScrollWithContext", this.onScroll.bind(this));
@@ -1040,25 +1041,27 @@ function ve(e, t) {
 }
 const rn = {
   mounted: an
-}, D = Symbol("ConfirmState");
-function an(e) {
-  e.addEventListener("click", (t) => {
-    const n = Date.now();
-    if (e[D]) {
-      if (n - e[D].initTime < 300)
+}, A = Symbol("ConfirmState");
+function an(e, t) {
+  e.addEventListener("click", (n) => {
+    var r, l;
+    const i = Date.now(), s = ((r = t.value) == null ? void 0 : r.text) !== void 0 ? t.value.text : "Confirm";
+    if (e[A]) {
+      if (i - e[A].initTime < 300)
         return;
-      e[D].resetHandler(), e.dispatchEvent(new Event("confirm"));
+      e[A].resetHandler(), e.dispatchEvent(new Event("confirm"));
       return;
     }
-    t.preventDefault(), t.stopImmediatePropagation();
-    const i = {
-      initTime: n,
+    n.preventDefault(), n.stopImmediatePropagation();
+    const o = {
+      initTime: i,
       preconfirmHtml: e.innerHTML,
       resetHandler: () => {
-        e.innerHTML = i.preconfirmHtml, e.blur(), e.removeEventListener("mouseout", i.resetHandler), delete e[D];
+        var a;
+        s && (e.innerHTML = o.preconfirmHtml), (a = t.value) != null && a.class && e.classList.remove(t.value.class), e.blur(), e.removeEventListener("mouseout", o.resetHandler), delete e[A];
       }
     };
-    e[D] = i, e.innerHTML = "Confirm", e.addEventListener("mouseout", i.resetHandler);
+    e[A] = o, s && (e.innerHTML = s), (l = t.value) != null && l.class && e.classList.add(t.value.class), e.addEventListener("mouseout", o.resetHandler);
   });
 }
 const cn = {
@@ -1091,7 +1094,7 @@ function hn(e, t) {
     const g = /* @__PURE__ */ new Date();
     g.getFullYear() == o.getFullYear() && g.getMonth() == o.getMonth() && g.getDate() == o.getDate() && (n = "at", r = "HH:mm");
   }
-  r || (r = N.defaultDateTimeFormat);
+  r || (e.attributes.getNamedItem("date-only") !== null ? r = M.defaultDateFormat : r = M.defaultDateTimeFormat);
   let l = G(o, r);
   return n && (l = n + " " + l), l;
 }
@@ -1110,7 +1113,7 @@ const mn = {
   beforeMount: Ee,
   updated: Ee,
   unmounted: $e
-}, _ = Symbol("HasAutoFocused"), re = [];
+}, N = Symbol("HasAutoFocused"), re = [];
 function vn() {
   re.forEach(Ae);
 }
@@ -1122,17 +1125,17 @@ function Ee(e, t) {
   if (!t.value)
     return $e(e);
   const n = new Date(t.value), i = (r = e.attributes.getNamedItem("base-time")) == null ? void 0 : r.value, s = n.getTime() - (i ? new Date(i).getTime() - t.value * 1e3 : 0), o = e.getAttribute("no-seconds") === null;
-  e[_] || re.push(e), e[_] = {
+  e[N] || re.push(e), e[N] = {
     startTs: s,
     includeSeconds: o
   }, Ae(e);
 }
 function Ae(e) {
-  const t = e[_], n = Math.round((Date.now() - t.startTs) / 1e3);
+  const t = e[N], n = Math.round((Date.now() - t.startTs) / 1e3);
   e.innerText = yn(n, t.includeSeconds);
 }
 function $e(e) {
-  e[_] && (Qe(re, e), delete e[_]), e.innerText = "-";
+  e[N] && (Qe(re, e), delete e[N]), e.innerText = "-";
 }
 function yn(e, t) {
   const n = [], i = Math.floor(e / 86400);
@@ -1142,17 +1145,17 @@ function yn(e, t) {
   const o = Math.floor(e / 60);
   return (i || s || o) && n.push(o + "m"), t ? n.length || n.push("0m") : (e -= o * 60, n.push(e + "s")), n.join(" ");
 }
-const A = Symbol("InfiniteScrollHandler"), gn = {
+const $ = Symbol("InfiniteScrollHandler"), gn = {
   mounted(e, t) {
-    e[A] = new B(e, t.value);
+    e[$] = new V(e, t.value);
   },
   updated(e, t) {
     var n;
-    (n = e[A]) == null || n.uninstall(), e[A] = new B(e, t.value);
+    (n = e[$]) == null || n.uninstall(), e[$] = new V(e, t.value);
   },
   unmounted(e) {
     var t;
-    (t = e[A]) == null || t.uninstall(), delete e[A];
+    (t = e[$]) == null || t.uninstall(), delete e[$];
   }
 }, En = {
   beforeMount: Te,
@@ -1165,7 +1168,7 @@ const Tn = {
   mounted: we,
   updated: we,
   unmounted: Be
-}, V = Symbol("TooltipState");
+}, F = Symbol("TooltipState");
 function we(e, t) {
   var i;
   let n = ((i = e.attributes.getNamedItem("tip")) == null ? void 0 : i.value) ?? t.value;
@@ -1174,13 +1177,13 @@ function we(e, t) {
       content: n,
       html: e.getAttribute("html") !== null
     };
-    e[V] ? e[V].configure(s) : e[V] = new wn(e, s);
+    e[F] ? e[F].configure(s) : e[F] = new wn(e, s);
   } else
     Be(e);
 }
 function Be(e) {
   var t;
-  (t = e[V]) == null || t.destroy(), delete e[V];
+  (t = e[F]) == null || t.destroy(), delete e[F];
 }
 class wn {
   constructor(t, n) {

package/package.json

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

package/src/config.ts

@@ -1,13 +1,15 @@
 interface IOptions {
     unhandledErrorSupportText: string;
     errorHandler: (err: Error) => void;
+    defaultDateFormat: string;
     defaultDateTimeFormat: string;
 }
 
 export const VfOptions: IOptions = {
     unhandledErrorSupportText: 'please contact support',
     errorHandler: err => console.error('Unhandled error:', err),
-    defaultDateTimeFormat: 'MM/dd/yy HH:mm'
+    defaultDateFormat: 'M/d/yy',
+    defaultDateTimeFormat: 'M/d/yy H:mm'
 };
 
 export function configureVf(options: Partial<IOptions>) {

package/src/directives/confirm-button.ts

@@ -1,6 +1,12 @@
+import type { DirectiveBinding } from 'vue';
 import type { ObjectDirective } from 'vue';
 
-export const vConfirmButton: ObjectDirective<HTMLElement, void> = {
+interface ConfirmButtonOptions {
+    text?: string | null;
+    class?: string;
+}
+
+export const vConfirmButton: ObjectDirective<HTMLElement, ConfirmButtonOptions> = {
     mounted: fn
 };
 
@@ -14,9 +20,10 @@ interface IConfirmElement {
     [ConfirmState]?: IConfirmState;
 }
 
-function fn(el: HTMLElement & IConfirmElement) {
+function fn(el: HTMLElement & IConfirmElement, binding: DirectiveBinding<ConfirmButtonOptions>) {
     el.addEventListener('click', e => {
         const now = Date.now();
+        const confirmText = binding.value?.text !== undefined ? binding.value.text : 'Confirm';
 
         if (el[ConfirmState]) {
             if (now - el[ConfirmState].initTime < 300) {
@@ -35,15 +42,18 @@ function fn(el: HTMLElement & IConfirmElement) {
             initTime: now,
             preconfirmHtml: el.innerHTML,
             resetHandler: () => {
-                el.innerHTML = confirmState.preconfirmHtml;
+                if (confirmText) el.innerHTML = confirmState.preconfirmHtml;
+                if (binding.value?.class) el.classList.remove(binding.value.class);
                 el.blur();
 
                 el.removeEventListener('mouseout', confirmState.resetHandler);
                 delete el[ConfirmState];
             }
         };
+
         el[ConfirmState] = confirmState;
-        el.innerHTML = 'Confirm';
+        if (confirmText) el.innerHTML = confirmText;
+        if (binding.value?.class) el.classList.add(binding.value.class);
 
         el.addEventListener('mouseout', confirmState.resetHandler);
     });

package/src/directives/datetime.ts

@@ -38,7 +38,11 @@ function getDateTimeValue(el: HTMLElement, binding: DirectiveBinding<string>) {
     }
 
     if (!formatSpec) {
-        formatSpec = VfOptions.defaultDateTimeFormat;
+        if (el.attributes.getNamedItem('date-only') !== null) {
+            formatSpec = VfOptions.defaultDateFormat;
+        } else {
+            formatSpec = VfOptions.defaultDateTimeFormat;
+        }
     }
 
     let result = format(theDate, formatSpec);