@cloudron/pankow 3.2.18 → 3.2.20

package/components/Button.vue

@@ -92,8 +92,8 @@ function onClick(event) {
 }
 
 .pankow-button[small] {
-  font-size: 12px;
-  padding: 3px 6px;
+  font-size: 11px;
+  padding: 2px 6px;
 }
 
 .pankow-button[large] {

package/components/ClipboardAction.vue

@@ -0,0 +1,35 @@
+<script setup>
+
+import { copyToClipboard } from '../utils';
+import Button from './Button.vue';
+
+const props = defineProps({
+  value: String,
+  doneHint: String,
+});
+
+function onClipboard() {
+  copyToClipboard(props.value);
+  window.pankow.notify({
+    text: props.doneHint || 'Copied',
+    type: 'success',
+  });
+}
+
+</script>
+
+<template>
+  <i class="pankow-clipboard-action fa-solid fa-copy" @click="onClipboard()"></i>
+</template>
+
+<style>
+
+.pankow-clipboard-action {
+  cursor: copy;
+}
+
+.pankow-clipboard-action:hover {
+  color: var(--pankow-color-dark);
+}
+
+</style>

package/components/ClipboardButton.vue

@@ -19,7 +19,7 @@ function onClipboard() {
 </script>
 
 <template>
-  <Button class="pankow-clipboard-button" icon="fa-solid fa-clipboard" tool @click="onClipboard()" style=""></Button>
+  <Button class="pankow-clipboard-button" secondary icon="fa-solid fa-copy" tool @click="onClipboard()" style=""></Button>
 </template>
 
 <style>

package/components/MultiSelect.vue

@@ -176,6 +176,7 @@ onMounted(() => {
   cursor: pointer;
   transition: background-color 250ms;
   min-width: 100px;
+  white-space: nowrap;
 }
 
 @media (prefers-color-scheme: dark) {

package/components/ProgressBar.vue

@@ -87,7 +87,7 @@ const normalizedValue = computed(() => {
 .pankow-progress-bar-indeterminate {
   width: 100%;
   height: 6px;
-  display: inline-block;
+  display: block;
   position: relative;
   background: rgba(255, 255, 255, 0.15);
   overflow: hidden;

package/index.js

@@ -7,6 +7,7 @@ import BottomBar from './components/BottomBar.vue';
 import Breadcrumb from './components/Breadcrumb.vue';
 import Button from './components/Button.vue';
 import ButtonGroup from './components/ButtonGroup.vue';
+import ClipboardAction from './components/ClipboardAction.vue';
 import ClipboardButton from './components/ClipboardButton.vue';
 import Checkbox from './components/Checkbox.vue';
 import Dialog from './components/Dialog.vue';
@@ -50,6 +51,7 @@ export {
     Breadcrumb,
     Button,
     ButtonGroup,
+    ClipboardAction,
     ClipboardButton,
     Checkbox,
     Dialog,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.18",
+  "version": "3.2.20",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -18,13 +18,13 @@
   "dependencies": {
     "@fontsource/inter": "^5.2.8",
     "@fortawesome/fontawesome-free": "^7.0.1",
-    "filesize": "^11.0.2",
+    "filesize": "^11.0.13",
     "monaco-editor": "^0.53.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.2",
-    "vite": "^7.1.6",
+    "vite": "^7.1.7",
     "vue": "^3.5.21"
   }
 }

package/types/index.d.ts

@@ -3,4 +3,4 @@ import gestures from './gestures.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
 import utils from './utils.js';
-export { BottomBar, Breadcrumb, Button, ButtonGroup, ClipboardButton, Checkbox, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, MainLayout, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, Spinner, Switch, TableView, TabView, TagInput, TextInput, TextInputRaw, TopBar, fetcher, gestures, tooltip, fallbackImage, utils };
+export { BottomBar, Breadcrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, Checkbox, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, MainLayout, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, Spinner, Switch, TableView, TabView, TagInput, TextInput, TextInputRaw, TopBar, fetcher, gestures, tooltip, fallbackImage, utils };

package/components/Menu_BACKUP_252296.vue

@@ -1,336 +0,0 @@
-<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>