@cloudron/pankow 3.2.10 → 3.2.11

package/components/Menu.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { nextTick, useTemplateRef, computed, ref } from 'vue';
+import { nextTick, useTemplateRef, computed, ref, onUnmounted } from 'vue';
 
 import MenuItem from './MenuItem.vue';
 import MenuItemLink from './MenuItemLink.vue';
@@ -134,6 +134,10 @@ function onItemActivated(item) {
   if (props.closeOnActivation) close();
 }
 
+function blurEventHandler() {
+  close();
+}
+
 async function open(event, element = null) {
   isOpen.value = true;
   pageX = element ? element.getBoundingClientRect().left : event.pageX;
@@ -158,6 +162,10 @@ async function open(event, element = null) {
   if (event.type === 'keydown' && event.key === 'ArrowUp') selectUp();
   else if (event.type === 'keydown') selectDown();
   else container.value.focus();
+
+  setTimeout(() => {
+    window.document.addEventListener('click', blurEventHandler);
+  }, 0);
 }
 
 function selectUp() {
@@ -200,16 +208,10 @@ function selectDown() {
   }
 }
 
-function onBackdrop(event) {
-  close();
-  event.preventDefault();
-}
-
 function close() {
+  window.document.removeEventListener('click', blurEventHandler);
   isOpen.value = false;
   container.value.style.maxHeight = 'unset';
-  container.value.style.bottom = 'unset';
-  container.value.style.top = 'unset';
   emit('close');
 }
 
@@ -265,7 +267,12 @@ function position() {
   }
 }
 
+onUnmounted(() => {
+  window.document.removeEventListener('click', blurEventHandler);
+});
+
 defineExpose({
+  isOpen,
   open,
   close,
 });
@@ -274,7 +281,6 @@ defineExpose({
 
 <template>
   <teleport to="#app">
-    <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
     <Transition :name="rollUp ? 'pankow-roll-up' : 'pankow-roll-down'">
       <div class="pankow-menu" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown">
         <TextInput placeholder="Filter ..." style="border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
@@ -287,16 +293,6 @@ defineExpose({
 
 <style>
 
-.pankow-menu-backdrop {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  left: 0px;
-  top: 0px;
-  z-index: 3001;
-  background-color: transparent;
-}
-
 .pankow-menu {
   position: fixed;
   box-shadow: var(--pankow-menu-shadow);
@@ -306,7 +302,6 @@ defineExpose({
   z-index: 3001;
   color: var(--pankow-color-dark);
   overflow: auto;
-  /*max-height: 100%;*/
   outline: none;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.10",
+  "version": "3.2.11",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.2",
-    "vite": "^7.1.2",
-    "vue": "^3.5.18"
+    "vite": "^7.1.3",
+    "vue": "^3.5.19"
   }
 }