@cloudron/pankow 3.6.5 → 3.6.7

package/components/DirectoryView.vue

@@ -725,7 +725,7 @@ export default {
   padding: 10px;
   padding-top: 20px;
   display: flex;
-  font-weight: bold;
+  font-weight: var(--pankow-font-weight-bold);
 }
 
 .directory-view-body-container {

package/components/MenuItem.vue

@@ -94,7 +94,7 @@ function onActivated() {
   padding: 0;
   margin: 5px 13px;
   font-size: 12px;
-  font-weight: bold;
+  font-weight: var(--pankow-font-weight-bold);
   gap: 5px;
 }
 

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/index.js

@@ -1,4 +1,7 @@
-import '@fontsource/inter';
+
+import "@fontsource/inter/400.css";
+import "@fontsource/inter/500.css";
+
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import './style.css';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.6.5",
+  "version": "3.6.7",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue": "^6.0.4",
     "highlight.js": "^11.11.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",

package/style.css

@@ -8,6 +8,9 @@
 
 :root {
   --font-family: 'Inter';
+  --pankow-font-family: var(--font-family);
+  --pankow-font-weight-normal: 400;
+  --pankow-font-weight-bold: 500;
 
   --pankow-body-background-color: white;
 
@@ -78,6 +81,10 @@ html, body {
   overflow: hidden;
 }
 
+b {
+  font-weight: var(--pankow-font-weight-bold);
+}
+
 input {
   accent-color: var(--pankow-color-primary);
 }
@@ -132,7 +139,7 @@ code {
 
 label {
   display: block;
-  font-weight: bold;
+  font-weight: var(--pankow-font-weight-bold);
   margin-top: 10px;
   margin-bottom: 6px;
 }

package/tooltip.js

@@ -75,9 +75,9 @@ function update(target, modifiers, key) {
 
 function mounted(el, binding, vnode) {
     // generate running unique id
-    vnode.__pankow_id = id++;
+    el.__pankow_id = id++;
 
-    const key = vnode.__pankow_id;
+    const key = el.__pankow_id;
     tooltips[key] = {
         element: null,
         value: binding.value
@@ -113,19 +113,21 @@ function mounted(el, binding, vnode) {
 }
 
 function updated(el, binding, vnode) {
-    if (!tooltips[vnode.__pankow_id]) return;
-    if (!binding.value) return remove(vnode.__pankow_id, el);
+    if (!tooltips[el.__pankow_id]) return;
 
-    tooltips[vnode.__pankow_id].value = binding.value;
+    // still have to update the value of the tooltip in case it is cleared
+    tooltips[el.__pankow_id].value = binding.value;
 
-    update(el, binding.modifiers, vnode.__pankow_id);
+    if (!binding.value) return remove(el.__pankow_id, el);
+
+    update(el, binding.modifiers, el.__pankow_id);
 }
 
 function beforeUnmount(el, binding, vnode) {
-    if (!tooltips[vnode.__pankow_id]) return;
+    if (!tooltips[el.__pankow_id]) return;
 
-    remove(vnode.__pankow_id, el);
-    delete tooltips[vnode.__pankow_id];
+    remove(el.__pankow_id, el);
+    delete tooltips[el.__pankow_id];
 }
 
 const tooltip = {