@signal24/vue-foundation 4.13.1 → 4.13.2

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

@@ -1042,24 +1042,26 @@ function ve(e, t) {
 const rn = {
   mounted: an
 }, A = Symbol("ConfirmState");
-function an(e) {
-  e.addEventListener("click", (t) => {
-    const n = Date.now();
+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 (n - e[A].initTime < 300)
+      if (i - e[A].initTime < 300)
         return;
       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[A];
+        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[A] = 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 = {

package/package.json

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

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);
     });