@cloudron/pankow 3.5.1 → 3.5.3

package/components/CircleChart.vue

@@ -0,0 +1,40 @@
+<script setup>
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  values: Array,
+});
+
+// const normalizedValue = computed(() => {
+//   if (props.value < 0) return 0;
+//   if (props.value > 100) return 100;
+//   return props.value;
+// });
+
+// we want 100 to be the circumverence so we can neatly use percentage: radius = 100 / ( 3,14159 * 2 ) = 15,9155
+const radius = 15.9155;
+const stroke = 10;
+
+function calculateViewbox() {
+  return `0 0 ${radius*2+stroke} ${radius*2+stroke}`;
+}
+
+function calculateArcPath() {
+  return `M${radius+stroke/2} ${stroke/2} a ${radius} ${radius} 0 0 1 0 ${radius*2} a ${radius} ${radius} 0 0 1 0 -${radius*2}`;
+}
+
+</script>
+
+<template>
+  <div class="pankow-circle-chart">
+    <svg :viewBox="calculateViewbox()" xmlns="http://www.w3.org/2000/svg">
+      <path :d="calculateArcPath()" fill="none" stroke="red" :stroke-width="stroke" stroke-dasharray="75, 100" @click.stop="onClick('red')" />
+      <path :d="calculateArcPath()" fill="none" stroke="green" :stroke-width="stroke" stroke-dasharray="30, 100" @click.stop="onClick('green') "/>
+    </svg>
+  </div>
+</template>
+
+<style>
+
+</style>

package/components/MultiSelect.vue

@@ -1,7 +1,6 @@
 <script setup>
 
 import { ref, useTemplateRef, onMounted, computed, watch } from 'vue';
-import Button from './Button.vue';
 import Menu from './Menu.vue';
 import Icon from './Icon.vue';
 
@@ -40,7 +39,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['select']);
+const emits = defineEmits(['select', 'close']);
 
 const model = defineModel();
 
@@ -117,6 +116,7 @@ const menuModel = computed(() => {
 
 function onMenuClosed() {
   elem.value.focus();
+  emits('close');
 }
 
 function onClick(event) {
@@ -134,11 +134,7 @@ function onOpen(event) {
 
 function onClose(event) {
   menu.value.close();
-}
-
-function onClosed() {
-  // restores the focus
-  elem.value.focus();
+  emits('close');
 }
 
 onMounted(() => {

package/components/SingleSelect.vue

@@ -169,7 +169,7 @@ onMounted(() => {
     </select>
 
     <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"/>
-    <span>
+    <span class="pankow-singleselect-label">
       <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
       {{ selected ? selected[optionLabel] : placeholder }}
     </span>
@@ -199,6 +199,7 @@ onMounted(() => {
   transition: background-color 250ms;
   min-width: 100px;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -222,4 +223,9 @@ onMounted(() => {
   border-color: var(--pankow-input-border-color);
 }
 
+.pankow-singleselect-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 </style>

package/components/TextInput.vue

@@ -56,8 +56,6 @@ defineExpose({ focus });
 
 .pankow-text-input[readonly] {
   cursor: not-allowed;
-  border-color: var(--pankow-input-border-color) !important;
-  background-color: #f5f5f5;
 }
 
 .pankow-text-input:disabled {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.1",
+  "version": "3.5.3",
   "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 = {