@cloudron/pankow 3.5.9 → 3.5.10

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/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/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();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.9",
+  "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

@@ -183,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;