@cloudron/pankow 3.5.16 → 3.5.18

package/components/Checkbox.vue

@@ -17,7 +17,7 @@ const internalId = uuidv4();
 
 <template>
   <span class="pankow-checkbox">
-    <input :id="id || internalId" class="pankow-checkbox-input" type="checkbox" v-model="model" :disabled="disabled" @input="$emit('update:modelValue', $event.target.checked)"/>
+    <input :id="id || internalId" class="pankow-checkbox-input" type="checkbox" v-model="model" :disabled="disabled" :required="$attrs['required']" @input="$emit('update:modelValue', $event.target.checked)"/>
     <slot>
       <label :for="id || internalId" class="pankow-checkbox-input-label">
         {{ label }}

package/components/MultiSelect.vue

@@ -85,7 +85,8 @@ const menuModel = computed(() => {
           emits('select', selected.value);
 
           // let the browser know about the changes
-          nativeSelect.value.value = selected.value;
+          // multi selects work different than single, we set the value of the first selected item only to react to required
+          nativeSelect.value.value = selected.value.length ? selected.value[0] : null;
           nativeSelect.value.dispatchEvent(new Event('input', { bubbles: true }));
           nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
         }
@@ -120,6 +121,10 @@ const menuModel = computed(() => {
   return ret;
 });
 
+function isSelected(item) {
+  return selected.value.indexOf(props.optionKey ? item[props.optionKey] : item) !== -1;
+}
+
 function onClick(event) {
   if (props.disabled) return;
 
@@ -133,12 +138,16 @@ function onOpen(event) {
   menu.value.open(event, elem.value);
 }
 
-function onClose(event = null) {
+function onClose() {
+  elem.value.focus();
+  emits('close');
+}
+
+function onEscape(event) {
   if (menu.value.isOpen) {
-    elem.value.focus();
-    if (event) event.stopPropagation();
+    event.stopPropagation();
     menu.value.close();
-    emits('close');
+    onClose();
   }
 }
 
@@ -149,11 +158,11 @@ 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="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="onEscape">
     <!-- native select for required and accessibility handling -->
     <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>
+      <option v-for="item in options" :value="optionKey ? item[optionKey] : item" :selected="isSelected(item) ? true : null">{{ optionKey }} - {{ item[optionLabel] }}</option>
     </select>
 
     <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onClose" :search-threshold="searchThreshold"></Menu>

package/components/PasswordInput.vue

@@ -37,7 +37,7 @@ function toggleReveal() {
 <style>
 
 .pankow-password {
-  display: flex;
+  display: inline-flex;
   white-space: nowrap;
   position: relative;
 }

package/components/SingleSelect.vue

@@ -107,7 +107,6 @@ function onOpen(event) {
 
 function onClose(event = null) {
   if (menu.value.isOpen) {
-    if (event) event.stopPropagation();
     elem.value.focus();
     menu.value.close();
     emits('close');
@@ -154,6 +153,8 @@ function onKeyDown(event) {
   });
 
   if (found !== -1) selectIndex(found);
+
+  event.stopPropagation();
 }
 
 function handleDefaultSelect() {
@@ -170,7 +171,7 @@ 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="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="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
     <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.16",
+  "version": "3.5.18",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",
     "typescript": "^5.9.3",
-    "vite": "^7.2.4",
+    "vite": "^7.2.7",
     "vue": "^3.5.25"
   }
 }