@cloudron/pankow 3.5.7 → 3.5.10

package/components/Dialog.vue

@@ -64,7 +64,7 @@ async function open() {
 
   // try to focus some form elements else just the dialog
   await nextTick();
-  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
   focusElement.focus();
 }
 

package/components/EmailInput.vue

@@ -1,18 +1,27 @@
 <script setup>
 
+import { useTemplateRef } from 'vue';
+
 const model = defineModel();
 const props = defineProps({
   placeholder: String,
   readonly: {
     type: Boolean,
-    default: false
+    default: false,
   },
 });
+const inputElement = useTemplateRef('inputElement');
+
+function focus() {
+  inputElement.value.focus();
+}
+
+defineExpose({ focus });
 
 </script>
 
 <template>
-  <input class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', $event.target.value)"/>
+  <input ref="inputElement" class="pankow-text-input" type="email" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
 </template>
 
 <style>

package/components/FileUploader.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="file-uploader" v-show="uploadInProgress">
-    <div class="label">{{ tr('filemanager.uploader.uploading') }} {{ activeFile ? activeFile.name : '' }} <span style="float: right">{{ prettyUploadSpeed }}</span></div>
+  <div class="pankow-file-uploader" v-show="uploadInProgress">
+    <div class="pankow-file-uploader-label-and-speed-container"><div class="pankow-file-uploader-label">{{ tr('filemanager.uploader.uploading') }} {{ activeFile ? activeFile.name : '' }}</div><div class="pankow-file-uploader-speed">{{ prettyUploadSpeed }}</div></div>
     <div style="display: flex;">
       <ProgressBar :value="parseInt((this.uploadedSize * 100) / this.size) || 0" style="flex-grow: 1"></ProgressBar>
       <Button danger small tool @click="onCancelUpload" icon="fa-solid fa-xmark"></Button>
@@ -195,10 +195,27 @@ export default {
 
 <style>
 
-.file-uploader {
+.pankow-file-uploader {
   width: 100%;
   padding: 10px;
   background-color: var(--pankow-color-background);
 }
 
+.pankow-file-uploader-label-and-speed-container {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 5px;
+}
+
+.pankow-file-uploader-label {
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.pankow-file-uploader-speed {
+  white-space: nowrap;
+}
+
 </style>

package/components/MaskedInput.vue

@@ -36,8 +36,12 @@ const isValid = computed(() => {
 </script>
 
 <template>
-  <input v-if="!multiline" class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
-  <textarea v-else :rows="rows" :cols="cols" :required="isValid" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>
+  <template v-if="!multiline">
+    <input class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
+  </template>
+  <template v-else>
+    <textarea :required="isValid" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>
+  </template>
 </template>
 
 <style>

package/components/Menu.vue

@@ -90,7 +90,34 @@ const hasIcons = computed(() => {
 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);
+  let results = [];
+
+  let group = null;
+  let filteredGroupItems = [];
+
+  for (let item of props.model) {
+    if (item.separator) {
+      if (group && filteredGroupItems.length) {
+        results.push(group);
+        results = results.concat(filteredGroupItems);
+      }
+
+      group = item;
+      filteredGroupItems = [];
+
+      continue;
+    }
+
+    if (group && group.label?.toLowerCase().indexOf(s) !== -1) filteredGroupItems.push(item);
+    else if (item.label.toLowerCase().indexOf(s) !== -1) filteredGroupItems.push(item);
+  }
+
+  // add remaining group and filtered items (also matches if no group ever set)
+  if (group && filteredGroupItems.length) results.push(group);
+  if (filteredGroupItems.length) results = results.concat(filteredGroupItems);
+
+  return results;
+  // return props.model.filter((item) => item.label.toLowerCase().indexOf(s) !== -1);
 });
 
 // select menu item by .label

package/components/MultiSelect.vue

@@ -47,6 +47,7 @@ let selected = ref([]);
 
 const elem = useTemplateRef('elem');
 const menu = useTemplateRef('menu');
+const nativeSelect = useTemplateRef('nativeSelect');
 
 watch(model, (newValue, oldValue) => {
   selected.value = newValue;
@@ -63,7 +64,7 @@ const menuModel = computed(() => {
     if (item.separator) {
       return {
         separator: true,
-        label: '',
+        label: item[props.optionLabel],
       };
     } else {
       return {
@@ -82,6 +83,11 @@ const menuModel = computed(() => {
 
           model.value = selected.value;
           emits('select', selected.value);
+
+          // let the browser know about the changes
+          nativeSelect.value.value = selected.value;
+          nativeSelect.value.dispatchEvent(new Event('input', { bubbles: true }));
+          nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
         }
       };
     }
@@ -114,11 +120,6 @@ const menuModel = computed(() => {
   return ret;
 });
 
-function onMenuClosed() {
-  elem.value.focus();
-  emits('close');
-}
-
 function onClick(event) {
   if (props.disabled) return;
 
@@ -132,9 +133,13 @@ function onOpen(event) {
   menu.value.open(event, elem.value);
 }
 
-function onClose(event) {
-  menu.value.close();
-  emits('close');
+function onClose(event = null) {
+  if (menu.value.isOpen) {
+    elem.value.focus();
+    if (event) event.stopPropagation();
+    menu.value.close();
+    emits('close');
+  }
 }
 
 onMounted(() => {
@@ -144,14 +149,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="pankow-multiselect" :class="{ 'pankow-multiselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop="onOpen" @keydown.up.stop="onOpen" @keydown.esc.stop="onClose">
+  <div class="pankow-multiselect" :class="{ 'pankow-multiselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop="onOpen" @keydown.up.stop="onOpen" @keydown.esc="onClose">
     <!-- native select for required and accessibility handling -->
-    <select v-model="selected" :required="$attrs['required']" style="display: none">
+    <select ref="nativeSelect" :required="$attrs['required']" multiple style="display: none">
       <option value=""></option>
       <option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ optionKey }} - {{ item[optionLabel] }}</option>
     </select>
 
-    <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onMenuClosed" :search-threshold="searchThreshold"></Menu>
+    <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onClose" :search-threshold="searchThreshold"></Menu>
     {{ buttonLabel }}
     <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>

package/components/PasswordInput.vue

@@ -67,11 +67,17 @@ function toggleReveal() {
   outline: none;
 }
 
-.pankow-password-input:disabled {
+.pankow-password-input[readonly],
+.pankow-password-input[disabled] {
   cursor: not-allowed;
-  opacity: 0.5;
+  background-color: var(--pankow-input-readonly-background-color);
 }
 
+.pankow-password-input[disabled]:hover {
+  border-color: var(--pankow-input-border-color);
+}
+
+
 .pankow-password-reveal {
   display: inline-block;
   position: absolute;

package/components/SingleSelect.vue

@@ -32,7 +32,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['select']);
+const emits = defineEmits(['select', 'close']);
 
 const model = defineModel();
 const selected = ref(null);
@@ -92,10 +92,6 @@ function selectIndex(index) {
   nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
 }
 
-function onMenuClosed() {
-  elem.value.focus();
-}
-
 function onClick(event) {
   if (props.disabled) return;
 
@@ -109,8 +105,13 @@ function onOpen(event) {
   menu.value.open(event, elem.value);
 }
 
-function onClose(event) {
-  menu.value.close();
+function onClose(event = null) {
+  if (menu.value.isOpen) {
+    if (event) event.stopPropagation();
+    elem.value.focus();
+    menu.value.close();
+    emits('close');
+  }
 }
 
 function onClosed() {
@@ -169,14 +170,14 @@ watchEffect(handleDefaultSelect);
 </script>
 
 <template>
-  <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc.stop="onClose" @keydown.stop="onKeyDown($event)">
+  <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc="onClose" @keydown.stop="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
     <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>
       <option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ item[optionLabel] }}</option>
     </select>
 
-    <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"/>
+    <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onClose"/>
     <span class="pankow-singleselect-label">
       <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
       {{ selected ? selected[optionLabel] : placeholder }}

package/components/Switch.vue

@@ -14,8 +14,8 @@ const internalId = uuidv4();
 
 const emit = defineEmits(['change']);
 
-function onChange() {
-  emit('change', model.value);
+function onChange(event) {
+  emit('change', model.value); // this contains the value after the checkbox has already toggled
 }
 
 </script>

package/components/TextInput.vue

@@ -1,5 +1,7 @@
 <script setup>
 
+// Until we support input type as prop, make sure EmailInput.vue matches the features here
+
 import { useTemplateRef } from 'vue';
 
 const model = defineModel();
@@ -54,13 +56,14 @@ defineExpose({ focus });
   outline: none;
 }
 
+.pankow-text-input[disabled],
 .pankow-text-input[readonly] {
   cursor: not-allowed;
+  background-color: var(--pankow-input-readonly-background-color);
 }
 
-.pankow-text-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.pankow-text-input[disabled]:hover {
+  border-color: var(--pankow-input-border-color);
 }
 
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.7",
+  "version": "3.5.10",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -22,9 +22,9 @@
     "monaco-editor": "^0.54.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue": "^6.0.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.2",
-    "vue": "^3.5.24"
+    "vite": "^7.2.4",
+    "vue": "^3.5.25"
   }
 }

package/style.css

@@ -49,6 +49,7 @@
   --pankow-input-vertial-padding: 6px;
   --pankow-input-horizontal-padding: max(7px, var(--pankow-border-radius));
   --pankow-input-background-color: white;
+  --pankow-input-readonly-background-color: #f5f5f5;
   --pankow-input-border-color: #ced4da;
   --pankow-input-border-color-hover: var(--pankow-color-dark);
   --pankow-input-border-color-focus: var(--pankow-color-primary-hover);
@@ -92,6 +93,7 @@ input {
     --pankow-input-background-color: #1b1e21;
     --pankow-input-border-color: #1b1e21;
     --pankow-input-border-color-hover: #ced4da;
+    --pankow-input-readonly-background-color: #000000;
 
     --pankow-color-background: #1b1e21;
     --pankow-color-background-hover: #1f2326;
@@ -181,6 +183,16 @@ textarea:focus {
   outline: none;
 }
 
+textarea[disabled],
+textarea[readonly] {
+  cursor: not-allowed;
+  background-color: var(--pankow-input-readonly-background-color);
+}
+
+textarea[disabled]:hover {
+  border-color: var(--pankow-input-border-color);
+}
+
 @media (max-width: 576px) {
   .pankow-no-mobile {
     display: none !important;

package/components/CircleChart.vue

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