@cloudron/pankow 3.2.16 → 3.2.17

package/components/Menu_REMOTE_252415.vue

@@ -0,0 +1,319 @@
+<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();
+}
+
+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() {
+  isOpen.value = false;
+  container.value.style.maxHeight = 'unset';
+  container.value.style.bottom = 'unset';
+  container.value.style.top = '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';
+  }
+}
+
+defineExpose({
+  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 ..." 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>

package/components/MultiSelect.vue

@@ -170,7 +170,7 @@ onMounted(() => {
   border-style: solid;
   border-color: var(--pankow-input-border-color);
   background-color: var(--pankow-input-background-color);
-  padding: 5px 12px;
+  padding: var(--pankow-input-vertial-padding) max(12px, var(--pankow-input-horizontal-padding));
   border-radius: var(--pankow-border-radius);
   text-decoration: none;
   cursor: pointer;

package/components/SingleSelect.vue

@@ -179,7 +179,7 @@ onMounted(() => {
   border-width: 1px;
   border-style: solid;
   border-color: var(--pankow-input-border-color);
-  padding: 5px 12px;
+  padding: var(--pankow-input-vertial-padding) max(12px, var(--pankow-input-horizontal-padding));
   border-radius: var(--pankow-border-radius);
   background-color: var(--pankow-input-background-color);
   text-decoration: none;

package/components/TextInput.vue

@@ -1,5 +1,7 @@
 <script setup>
 
+import { useTemplateRef } from 'vue';
+
 const model = defineModel();
 const props = defineProps({
   placeholder: String,
@@ -8,11 +10,18 @@ const props = defineProps({
     default: false,
   },
 });
+const inputElement = useTemplateRef('inputElement');
+
+function focus() {
+  inputElement.value.focus();
+}
+
+defineExpose({ focus });
 
 </script>
 
 <template>
-  <input class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
+  <input ref="inputElement" class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
 </template>
 
 <style>
@@ -48,6 +57,7 @@ const props = defineProps({
 .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.2.16",
+  "version": "3.2.17",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -16,15 +16,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fontsource/inter": "^5.2.6",
-    "@fortawesome/fontawesome-free": "^7.0.0",
+    "@fontsource/inter": "^5.2.7",
+    "@fortawesome/fontawesome-free": "^7.0.1",
     "filesize": "^11.0.2",
-    "monaco-editor": "^0.52.2"
+    "monaco-editor": "^0.53.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.2",
-    "vite": "^7.1.3",
-    "vue": "^3.5.20"
+    "vite": "^7.1.5",
+    "vue": "^3.5.21"
   }
 }