@signal24/vue-foundation 4.30.3 → 4.30.4

package/package.json

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

package/src/components/alert-helpers.ts

@@ -6,6 +6,7 @@ interface IAlertOptions {
     message: string | Error;
     classes?: string[];
     iconClass?: string | string[];
+    isHtml?: boolean;
 }
 
 function resolveAlertParams(arg0: string | Error | IAlertOptions, arg1?: string | Error) {

package/src/components/vf-alert-modal.vue

@@ -6,8 +6,8 @@
 
         <i v-if="iconClass" :class="['vf-alert-icon', iconClass]" />
 
-        <div v-if="isHtml" :innerHtml="message" class="user-message"></div>
-        <div v-else :innerText="textMessage"></div>
+        <div v-if="isHtml" :innerHTML="resolvedMessage" class="user-message"></div>
+        <div v-else :innerText="resolvedMessage"></div>
 
         <template v-if="!isBare" #footer>
             <template v-if="shouldConfirm">
@@ -36,7 +36,7 @@ const props = defineProps<{
     callback: (ok: boolean) => void;
 }>();
 
-const textMessage = computed(() => {
+const resolvedMessage = computed(() => {
     if (props.message instanceof Error) {
         return formatError(props.message);
     }

package/src/config.ts

@@ -5,6 +5,7 @@ interface IOptions {
     defaultTimeFormat: string;
     defaultCurrencyDivisor: number;
     onOverlaysChanged?: (count: number) => void;
+    disableStickyMinWidthDirective?: boolean;
 }
 
 export const VfOptions: IOptions = {

package/src/directives/sticky-min-width.ts

@@ -1,24 +1,45 @@
 import type { ObjectDirective } from 'vue';
 
+import { VfOptions } from '@/config';
+
 const ObserverMap = new WeakMap<HTMLElement, ResizeObserver>();
 
-export const vStickyMinWidth: ObjectDirective<HTMLElement> = {
-    beforeMount(el) {
-        const observer = new ResizeObserver(() => {
-            const computedMinWidthStr = window.getComputedStyle(el).minWidth.match(/^(\d+)px$/)?.[1];
-            const computedMinWidth = computedMinWidthStr ? parseInt(computedMinWidthStr, 10) : 0;
-            if (el.clientWidth <= computedMinWidth) return;
-            el.style.minWidth = `${el.clientWidth}px`;
-        });
-        ObserverMap.set(el, observer);
-        observer.observe(el);
+export const vStickyMinWidth: ObjectDirective<HTMLElement, boolean | undefined> = {
+    beforeMount(el, binding) {
+        if (binding.value === false || VfOptions.disableStickyMinWidthDirective) return;
+        setup(el);
     },
 
-    beforeUnmount(el) {
-        const observer = ObserverMap.get(el);
-        if (observer) {
-            observer.unobserve(el);
-            ObserverMap.delete(el);
+    updated(el, binding) {
+        if (binding.value !== binding.oldValue) {
+            if (binding.value === false || VfOptions.disableStickyMinWidthDirective) {
+                teardown(el);
+            } else {
+                setup(el);
+            }
         }
+    },
+
+    beforeUnmount(el) {
+        teardown(el);
     }
 };
+
+function setup(el: HTMLElement) {
+    const observer = new ResizeObserver(() => {
+        const computedMinWidthStr = window.getComputedStyle(el).minWidth.match(/^(\d+)px$/)?.[1];
+        const computedMinWidth = computedMinWidthStr ? parseInt(computedMinWidthStr, 10) : 0;
+        if (el.clientWidth <= computedMinWidth) return;
+        el.style.minWidth = `${el.clientWidth}px`;
+    });
+    ObserverMap.set(el, observer);
+    observer.observe(el);
+}
+
+function teardown(el: HTMLElement) {
+    const observer = ObserverMap.get(el);
+    if (observer) {
+        observer.unobserve(el);
+        ObserverMap.delete(el);
+    }
+}

package/src/directives/tooltip.ts

@@ -1,5 +1,7 @@
 import type { DirectiveBinding, ObjectDirective } from 'vue';
 
+import { showAlert } from '@/components';
+
 type TooltipValue = string | null | false | undefined;
 
 export const vTooltip: ObjectDirective<TooltipElement, TooltipValue> = {
@@ -21,7 +23,8 @@ function createTip(el: TooltipElement, binding: DirectiveBinding<TooltipValue>)
     if (tipText) {
         const config: ITooltipOptions = {
             content: tipText,
-            html: el.getAttribute('html') !== null
+            html: el.getAttribute('html') !== null,
+            alertOnTap: el.getAttribute('alert-on-tap') !== null
         };
 
         if (!el[TooltipState]) {
@@ -45,6 +48,7 @@ interface ITooltipOptions {
     delay?: number;
     html?: boolean;
     class?: string | string[];
+    alertOnTap?: boolean;
 }
 
 // todo: improve with mutation observer to see removal of node
@@ -69,6 +73,7 @@ class VfTooltip {
         el.addEventListener('mouseenter', this.handleTargetMouseEnterWithContext);
         el.addEventListener('mouseleave', this.handleTargetMouseLeaveWithContext);
         el.addEventListener('click', this.handleTargetMouseLeaveWithContext);
+        if (config.alertOnTap) el.addEventListener('touchstart', () => this.showTapAlert());
     }
 
     configure(config: ITooltipOptions) {
@@ -93,6 +98,14 @@ class VfTooltip {
         if (e) this.handleMouseMove(e);
     }
 
+    showTapAlert() {
+        showAlert({
+            title: this.config.title,
+            message: this.config.content,
+            isHtml: this.config.html ?? false
+        });
+    }
+
     renderTooltip() {
         if (!this.tipEl) {
             this.tipEl = document.createElement('div');