@cloudron/pankow 3.6.4 → 3.6.6

package/components/Dialog.vue

@@ -166,9 +166,9 @@ defineExpose({ open, close });
 
 .pankow-dialog-x-close {
   position: absolute;
-  font-size: 20px;
-  top: 15px;
-  right: 15px;
+  font-size: 14px;
+  top: 10px;
+  right: 10px;
 }
 
 .pankow-dialog-center {
@@ -205,4 +205,4 @@ defineExpose({ open, close });
   text-align: right;
 }
 
-</style>
+</style>

package/components/SideBar.vue

@@ -3,6 +3,13 @@
 import { ref, useTemplateRef, onMounted } from 'vue';
 import { onSwipe } from '../gestures.js';
 
+defineProps({
+  showOpenAction: {
+    type: Boolean,
+    default: true
+  },
+});
+
 const sideBar = useTemplateRef('sideBar');
 const isVisible = ref(false);
 
@@ -25,23 +32,33 @@ defineExpose({ open, close });
 </script>
 
 <template>
-  <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
-    <Transition name="pankow-scale">
-      <div class="pankow-sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
-      <div class="pankow-sidebar-open-action" v-else @click="open()"><i class="fa-solid fa-bars"></i></div>
+  <div class="pankow-sidebar-container" :class="{ 'pankow-sidebar-open': isVisible }">
+    <Transition name="pankow-fade">
+      <div class="pankow-sidebar-backdrop" @click="close"></div>
     </Transition>
-    <div class="pankow-sidebar-inner">
-      <slot></slot>
+    <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
+      <Transition name="pankow-scale">
+        <div class="pankow-sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
+        <div class="pankow-sidebar-open-action" v-else-if="showOpenAction" @click="open()"><i class="fa-solid fa-bars"></i></div>
+      </Transition>
+      <div class="pankow-sidebar-inner">
+        <slot></slot>
+      </div>
     </div>
   </div>
 </template>
 
 <style>
 
-.pankow-sidebar {
+.pankow-sidebar-container {
   display: block;
   height: 100%;
   min-width: 220px;
+}
+
+.pankow-sidebar {
+  display: block;
+  height: 100%;
   overflow: auto;
 }
 
@@ -72,17 +89,42 @@ defineExpose({ open, close });
   cursor: pointer;
 }
 
+.pankow-sidebar-backdrop {
+  display: none;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000aa;
+}
+
 @media (max-width: 576px) {
-  .pankow-sidebar {
+  .pankow-sidebar-container {
     position: fixed;
     left: 0;
     top: 0;
-    width: 100%;
+    width: 0;
+    min-width: 0;
     height: 100%;
     z-index: 2000;
+  }
+
+  .pankow-sidebar-open {
+    width: 100%;
+  }
+
+  .pankow-sidebar {
+    position: absolute;
+    width: calc(70%);
+    left: 0;
     transition: left 250ms ease-in-out;
   }
 
+  .pankow-sidebar-open .pankow-sidebar-backdrop {
+    display: block;
+  }
+
   .pankow-sidebar-closed {
     position: fixed;
     left: -600px;  /* depends on media query */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.6.4",
+  "version": "3.6.6",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -29,9 +29,12 @@
     "online-3d-viewer": "^0.18.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "highlight.js": "^11.11.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vue": "^3.5.26"
+    "vue": "^3.5.27",
+    "vue-router": "^5.0.2"
   }
 }

package/tooltip.js

@@ -25,6 +25,8 @@ const padding = 10;
 const tooltips = {};
 const intervals = {};
 
+let id = 0;
+
 function isElementHidden(element) {
     if (!element) return true;
 
@@ -72,7 +74,10 @@ function update(target, modifiers, key) {
 }
 
 function mounted(el, binding, vnode) {
-    const key = vnode.ctx.uid;
+    // generate running unique id
+    el.__pankow_id = id++;
+
+    const key = el.__pankow_id;
     tooltips[key] = {
         element: null,
         value: binding.value
@@ -108,19 +113,21 @@ function mounted(el, binding, vnode) {
 }
 
 function updated(el, binding, vnode) {
-    if (!tooltips[vnode.ctx.uid]) return;
-    if (!binding.value) return remove(vnode.ctx.uid, el);
+    if (!tooltips[el.__pankow_id]) return;
+
+    // still have to update the value of the tooltip in case it is cleared
+    tooltips[el.__pankow_id].value = binding.value;
 
-    tooltips[vnode.ctx.uid].value = binding.value;
+    if (!binding.value) return remove(el.__pankow_id, el);
 
-    update(el, binding.modifiers, vnode.ctx.uid);
+    update(el, binding.modifiers, el.__pankow_id);
 }
 
 function beforeUnmount(el, binding, vnode) {
-    if (!tooltips[vnode.ctx.uid]) return;
+    if (!tooltips[el.__pankow_id]) return;
 
-    remove(vnode.ctx.uid, el);
-    delete tooltips[vnode.ctx.uid];
+    remove(el.__pankow_id, el);
+    delete tooltips[el.__pankow_id];
 }
 
 const tooltip = {