@cloudron/pankow 3.5.2 → 3.5.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.2",
+  "version": "3.5.4",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.1.9",
+    "vite": "^7.1.10",
     "vue": "^3.5.22"
   }
 }

package/tooltip.js

@@ -23,10 +23,30 @@ const RIGHT = 4;
 const padding = 10;
 
 const tooltips = {};
+const intervals = {};
 
-function remove(key) {
+function isElementHidden(element) {
+    if (!element) return true;
+
+    var rect = element.getBoundingClientRect();
+    var centerX = (rect.left + rect.right) / 2;
+    var centerY = (rect.top + rect.bottom) / 2;
+
+    const hit = document.elementFromPoint(centerX, centerY);
+
+    return hit !== element && !element.contains(hit);
+}
+
+function remove(key, target) {
     if (tooltips[key]) tooltips[key].remove();
+
     delete tooltips[key];
+    clearInterval(intervals[key]);
+
+    if (target) {
+        target.removeAttribute('aria-expanded');
+        target.removeAttribute('aria-describedby');
+    }
 }
 
 function update(target, value, modifiers, tooltip) {
@@ -50,28 +70,43 @@ function update(target, value, modifiers, tooltip) {
 }
 
 function mounted(el, binding, vnode) {
+    const key = vnode.ctx.uid;
+
     el.addEventListener('mouseenter', () => {
-        if (!binding.value) return remove(vnode.ctx.uid);
+        if (!binding.value) return remove(key);
+
+        const tooltip = document.createElement('div');
+        tooltips[key] = tooltip;
 
-        tooltips[vnode.ctx.uid] = document.createElement('div');
-        tooltips[vnode.ctx.uid].classList.add('pankow-tooltip');
-        window.document.body.appendChild(tooltips[vnode.ctx.uid]);
+        tooltip.setAttribute('id', key);
+        tooltip.setAttribute('role', 'tooltip');
+        tooltip.setAttribute('aria-hidden', 'false');
+        tooltip.classList.add('pankow-tooltip');
+        window.document.body.appendChild(tooltip);
 
-        update(el, binding.value, binding.modifiers, tooltips[vnode.ctx.uid]);
+        el.setAttribute('aria-expanded', 'true');
+        el.setAttribute('aria-describedby', key);
+
+        update(el, binding.value, binding.modifiers, tooltip);
+
+        intervals[key] = setInterval(() => {
+            if (isElementHidden(el)) remove(key, el)
+        }, 1000);
     });
 
     el.addEventListener('mouseleave', () => {
-        remove(vnode.ctx.uid);
+        remove(key, el);
     });
+
 }
 
 function updated(el, binding, vnode) {
-    if (!binding.value) return remove(vnode.ctx.uid);
+    if (!binding.value) return remove(vnode.ctx.uid, el);
     update(el, binding.value, binding.modifiers, tooltips[vnode.ctx.uid]);
 }
 
 function beforeUnmount(el, binding, vnode) {
-    remove(vnode.ctx.uid);
+    remove(vnode.ctx.uid, el);
 }
 
 const tooltip = {

package/types/utils.d.ts

@@ -12,6 +12,7 @@ declare namespace _default {
     export { prettyLongDate };
     export { prettyFileSize };
     export { prettyEmailAddresses };
+    export { prettyDuration };
     export { sanitize };
     export { pathJoin };
     export { download };
@@ -39,6 +40,7 @@ export function formatDate(format: any, value: any): any;
 export function prettyLongDate(value: any): string;
 export function prettyFileSize(value: any): string;
 export function prettyEmailAddresses(addresses: any): any;
+export function prettyDuration(ms: any): any;
 export function sanitize(path: any): any;
 export function pathJoin(...args: any[]): any;
 export function download(entries: any, name: any): void;

package/utils.js

@@ -183,6 +183,17 @@ function prettyEmailAddresses(addresses) {
     return addresses.slice(1, -1);
 }
 
+function prettyDuration(ms) {
+  const totalSeconds = Math.floor(ms / 1000);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor((totalSeconds % 86400) / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  const df = new Intl.DurationFormat(undefined, { style: 'narrow' });
+  return df.format({ days, hours, minutes, seconds });
+}
+
 function sanitize(path) {
     path = '/' + path;
     return path.replace(/\/+/g, '/');
@@ -432,6 +443,7 @@ export {
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,
+    prettyDuration,
     sanitize,
     pathJoin,
     download,
@@ -460,6 +472,7 @@ export default {
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,
+    prettyDuration,
     sanitize,
     pathJoin,
     download,