@cloudron/pankow 3.2.15 → 3.2.17

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/Dialog.vue

@@ -109,7 +109,7 @@ defineExpose({ open, close });
         <div class="pankow-dialog-backdrop" @click="onDismiss" v-show="visible" :style="{ 'z-index': zIndex }"></div>
       </Transition>
       <Transition name="pankow-bounce-center-top">
-        <div ref="dialog" class="pankow-dialog"  v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
+        <div ref="dialog" class="pankow-dialog" v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
           <div class="pankow-dialog-header" v-show="title">
             {{ title }}
             <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
@@ -167,31 +167,31 @@ defineExpose({ open, close });
 
 .pankow-dialog-header {
   font-size: 20px;
-  padding: 20px;
+  padding: 15px;
   display: flex;
   justify-content: space-between;
 }
 
 .pankow-dialog-body {
-  padding: 0 20px;
+  padding: 0 15px;
   overflow: auto;
   transition: all 250ms;
 }
 
 .pankow-dialog-body-no-header {
-  padding: 20px;
+  padding: 15px;
   padding-bottom: 0;
 }
 
 .pankow-dialog-body-no-buttons {
-  padding-bottom: 20px;
+  padding-bottom: 15px;
 }
 
 .pankow-dialog-buttons {
   display: flex;
   gap: 6px;
-  padding: 20px;
+  padding: 15px;
   text-align: right;
 }
 
-</style>
+</style>

package/components/Menu.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { nextTick, useTemplateRef, computed, ref, onUnmounted } from 'vue';
+import { nextTick, useTemplateRef, computed, ref } from 'vue';
 
 import MenuItem from './MenuItem.vue';
 import MenuItemLink from './MenuItemLink.vue';
@@ -70,6 +70,7 @@ const props = defineProps({
 
 const openEventTimeStamp = ref(0);
 const forElement = ref(null);
+let prevFocusElement = null;
 const isOpen = ref(false);
 let pageX = 0;
 let targetBottom = 0;
@@ -145,6 +146,7 @@ async function open(event, element = null) {
   targetTop = element ? element.getBoundingClientRect().top : event.pageY;
   offsetY.value = element ? (element.getBoundingClientRect().height + 2) : 0; // offset in case we roll up
   forElement.value = element;
+  prevFocusElement = document.activeElement;
 
   if (!container.value) return;
 
@@ -162,10 +164,11 @@ 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 onBackdrop(event) {
+  close();
+  event.preventDefault();
 }
 
 function selectUp() {
@@ -209,9 +212,13 @@ function selectDown() {
 }
 
 function close() {
-  window.document.removeEventListener('click', blurEventHandler);
   isOpen.value = false;
   container.value.style.maxHeight = 'unset';
+
+  // restore focus
+  if (prevFocusElement) prevFocusElement.focus();
+  prevFocusElement = null;
+
   emit('close');
 }
 
@@ -267,10 +274,6 @@ function position() {
   }
 }
 
-onUnmounted(() => {
-  window.document.removeEventListener('click', blurEventHandler);
-});
-
 defineExpose({
   isOpen,
   open,
@@ -281,9 +284,10 @@ 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"/>
+        <TextInput placeholder="Filter ..." @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
         <component v-for="item in visibleItems" ref="itemElements" :is="item.type || (item.href ? MenuItemLink : MenuItem)" @activated="onItemActivated(item)" :item="item" :has-icons="hasIcons" />
         <MenuItem v-if="model.length === 0" :item="emptyItem"/>
       </div>
@@ -293,6 +297,16 @@ 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);

package/components/Menu_BACKUP_252296.vue

@@ -0,0 +1,336 @@
+<script setup>
+
+import { nextTick, useTemplateRef, computed, ref } from 'vue';
+
+import MenuItem from './MenuItem.vue';
+import MenuItemLink from './MenuItemLink.vue';
+import TextInput from './TextInput.vue';
+
+function getViewport() {
+  const win = window,
+    d = document,
+    e = d.documentElement,
+    g = d.getElementsByTagName('body')[0],
+    w = win.innerWidth || e.clientWidth || g.clientWidth,
+    h = win.innerHeight || e.clientHeight || g.clientHeight;
+
+  return {
+    width: w,
+    height: h
+  };
+}
+
+function getHiddenElementSize(element) {
+  if (element) {
+    const originalVisibility = element.style.visibility;
+    const originalDisplay = element.style.display;
+
+    element.style.visibility = 'hidden';
+    element.style.display = 'block';
+
+    element.clientHeight; // force reflow
+
+    const height = element.offsetHeight;
+    const width = element.offsetWidth;
+
+    element.style.display = originalDisplay;
+    element.style.visibility = originalVisibility;
+
+    return { height, width };
+  }
+  return { height: 0, width: 0 };
+}
+
+
+function getActiveElement(children) {
+  for (const child of children) {
+    if (child === document.activeElement) return child;
+  }
+  return null;
+}
+
+// outsideClickListener: null,
+const container = useTemplateRef('container');
+const itemElements = useTemplateRef('itemElements');
+
+const emit = defineEmits([ 'close' ]);
+
+const props = defineProps({
+  icon: String,
+  model: Array,
+  closeOnActivation: {
+    type: Boolean,
+    default: true,
+  },
+  searchThreshold: {
+    type: Number,
+    default: Infinity,
+  }
+});
+
+const openEventTimeStamp = ref(0);
+const forElement = ref(null);
+const isOpen = ref(false);
+let pageX = 0;
+let targetBottom = 0;
+let targetTop = 0;
+const offsetY = ref(0);
+const rollUp = ref(false);
+const searchString = ref('');
+const emptyItem = ref({
+  label: '',
+  disabled: true,
+});
+
+const hasIcons = computed(() => {
+  return !!props.model.find((item) => !!item.icon);
+});
+
+const visibleItems = computed(() => {
+  if (!searchString.value) return props.model;
+  const s = searchString.value.toLowerCase();
+  return props.model.filter((item) => item.label.toLowerCase().indexOf(s) !== -1);
+});
+
+// select menu item by .label
+function select(elem) {
+  let next = container.value.children[0];
+  while (true) {
+    if (!next) return;
+
+    if (next.innerText !== elem.label) {
+      next = next.nextElementSibling;
+      continue;
+    }
+
+    next.focus();
+    break;
+  }
+}
+
+let search = '';
+let debounceTimer = null;
+function onKeyDown(event) {
+  // only handle alphanumerics
+  if (!/^[a-zA-Z0-9]$/.test(event.key)) return;
+
+  const key = event.key.toLowerCase();
+
+  if (debounceTimer) clearTimeout(debounceTimer);
+  debounceTimer = setTimeout(() => search = '', 500);
+
+  search += key;
+
+  const found = visibleItems.value.find(elem => {
+    if (!elem.label) return false;
+    return elem.label.toLowerCase().indexOf(search) === 0;
+  });
+
+  if (found) select(found)
+}
+
+function onItemActivated(item) {
+  if (item.action instanceof Function) item.action(item);
+  if (props.closeOnActivation) close();
+}
+
+async function open(event, element = null) {
+  isOpen.value = true;
+  pageX = element ? element.getBoundingClientRect().left : event.pageX;
+  targetBottom = element ? element.getBoundingClientRect().bottom : event.pageY;
+  targetTop = element ? element.getBoundingClientRect().top : event.pageY;
+  offsetY.value = element ? (element.getBoundingClientRect().height + 2) : 0; // offset in case we roll up
+  forElement.value = element;
+
+  if (!container.value) return;
+
+  if (element) container.value.style.minWidth = element.getBoundingClientRect().width + 'px';
+
+  await nextTick();
+
+  position();
+
+  openEventTimeStamp.value = event.timeStamp;
+
+  event.preventDefault();
+
+  // if opened from a key action, immediately select first
+  if (event.type === 'keydown' && event.key === 'ArrowUp') selectUp();
+  else if (event.type === 'keydown') selectDown();
+  else container.value.focus();
+<<<<<<< HEAD
+
+  setTimeout(() => {
+    window.document.addEventListener('click', blurEventHandler);
+  }, 0);
+=======
+>>>>>>> parent of c42ecf7 (Use click events on document.body instead of a backdrop for menus)
+}
+
+function selectUp() {
+  if (!container.value.children[0]) return;
+
+  const active = getActiveElement(container.value.children);
+
+  if (!active) return container.value.lastElementChild.focus();
+
+  let prev = active;
+  while (true) {
+    prev = prev.previousElementSibling;
+    if (!prev) return;
+
+    if (prev.getAttribute('separator') === 'true') continue;
+    else if (prev.classList.contains('pankow-menu-item-disabled')) continue;
+
+    prev.focus();
+    break;
+  }
+}
+
+function selectDown() {
+  if (!container.value.children[0]) return;
+
+  const active = getActiveElement(container.value.children);
+
+  if (!active) return container.value.firstElementChild.focus();
+
+  let next = active;
+  while (true) {
+    next = next.nextElementSibling;
+    if (!next) return;
+
+    if (next.getAttribute('separator') === 'true') continue;
+    else if (next.classList.contains('pankow-menu-item-disabled')) continue;
+
+    next.focus();
+    break;
+  }
+}
+
+function onBackdrop(event) {
+  close();
+  event.preventDefault();
+}
+
+function close() {
+<<<<<<< HEAD
+  window.document.removeEventListener('click', blurEventHandler);
+=======
+>>>>>>> parent of c42ecf7 (Use click events on document.body instead of a backdrop for menus)
+  isOpen.value = false;
+  container.value.style.maxHeight = 'unset';
+  emit('close');
+}
+
+function position() {
+  if (!container.value) return;
+
+  const size = getHiddenElementSize(container.value);
+
+  let left = pageX;
+  let top = targetBottom + 1;
+  let width = container.value.offsetParent ? container.value.offsetWidth : size.width;
+  let height = container.value.offsetParent ? container.value.offsetHeight : size.height;
+  let viewport = getViewport();
+
+  let bottom = viewport.height - targetTop + 1;
+
+  //flip
+  if (left + width - document.body.scrollLeft > viewport.width) {
+    // if this is like a dropdown right align instead of flip
+    if (forElement.value) {
+      left = forElement.value.getBoundingClientRect().left + (forElement.value.getBoundingClientRect().width - width);
+    } else {
+      left -= width;
+    }
+  }
+
+  //flip
+  if (top + height - document.body.scrollTop > viewport.height) {
+    if (top - document.body.scrollTop > viewport.height/2) {
+      rollUp.value = true;
+    } else {
+      rollUp.value = false;
+    }
+  } else {
+    rollUp.value = false;
+  }
+
+  //fit
+  if (left < document.body.scrollLeft) {
+    left = document.body.scrollLeft;
+  }
+
+  container.value.style.left = left + 'px';
+  if (rollUp.value) {
+    container.value.style.top = 'unset';
+    container.value.style.bottom = bottom + 'px';
+    container.value.style.maxHeight = viewport.height - bottom + 'px';
+    container.value.style.height = 'auto';
+  } else {
+    container.value.style.top = top + 'px';
+    container.value.style.bottom = 'unset';
+    container.value.style.maxHeight = viewport.height - top + 'px';
+  }
+}
+
+<<<<<<< HEAD
+onUnmounted(() => {
+  window.document.removeEventListener('click', blurEventHandler);
+});
+
+=======
+>>>>>>> parent of c42ecf7 (Use click events on document.body instead of a backdrop for menus)
+defineExpose({
+  isOpen,
+  open,
+  close,
+});
+
+</script>
+
+<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 ..." @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
+        <component v-for="item in visibleItems" ref="itemElements" :is="item.type || (item.href ? MenuItemLink : MenuItem)" @activated="onItemActivated(item)" :item="item" :has-icons="hasIcons" />
+        <MenuItem v-if="model.length === 0" :item="emptyItem"/>
+      </div>
+    </Transition>
+  </teleport>
+</template>
+
+<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);
+  border-radius: var(--pankow-border-radius);
+  background-color: var(--pankow-input-background-color);
+  min-width: 120px;
+  z-index: 3001;
+  color: var(--pankow-color-dark);
+  overflow: auto;
+  /*max-height: 100%;*/
+  outline: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-menu {
+    color: var(--pankow-color-light-dark);
+  }
+}
+
+</style>