@cloudron/pankow 3.5.0 → 3.5.2

package/components/Checkbox.vue

@@ -40,7 +40,6 @@ const internalId = uuidv4();
   display: inline-block;
   vertical-align: middle;
   cursor: pointer;
-  user-select: none;
   margin: 0;
   margin-left: 6px;
 }

package/components/MaskedInput.vue

@@ -8,6 +8,10 @@ const props = defineProps({
   required: {
     type: Boolean,
     default: false,
+  },
+  multiline: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -24,7 +28,7 @@ const displayValue = computed({
 });
 
 const isValid = computed(() => {
-  if (!props.required) return true;
+  if (!props.required) return false;
   if (model.value === null) return true; // treat masked as satisfying "required"
   return !!model.value;
 });
@@ -32,7 +36,8 @@ const isValid = computed(() => {
 </script>
 
 <template>
-  <input class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
+  <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>
 
 <style>

package/components/MultiSelect.vue

@@ -1,7 +1,6 @@
 <script setup>
 
 import { ref, useTemplateRef, onMounted, computed, watch } from 'vue';
-import Button from './Button.vue';
 import Menu from './Menu.vue';
 import Icon from './Icon.vue';
 
@@ -40,7 +39,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['select']);
+const emits = defineEmits(['select', 'close']);
 
 const model = defineModel();
 
@@ -117,6 +116,7 @@ const menuModel = computed(() => {
 
 function onMenuClosed() {
   elem.value.focus();
+  emits('close');
 }
 
 function onClick(event) {
@@ -134,11 +134,7 @@ function onOpen(event) {
 
 function onClose(event) {
   menu.value.close();
-}
-
-function onClosed() {
-  // restores the focus
-  elem.value.focus();
+  emits('close');
 }
 
 onMounted(() => {
@@ -149,6 +145,12 @@ onMounted(() => {
 
 <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">
+    <!-- native select for required and accessibility handling -->
+    <select v-model="selected" :required="$attrs['required']" 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>
     {{ buttonLabel }}
     <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />

package/components/Radiobutton.vue

@@ -53,7 +53,6 @@ export default {
 .pankow-radio-input-label {
   display: inline-block;
   cursor: pointer;
-  user-select: none;
   margin: 0;
   margin-left: 6px;
 }

package/components/SingleSelect.vue

@@ -162,8 +162,14 @@ onMounted(() => {
 
 <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)">
+    <!-- native select for required and accessibility handling -->
+    <select v-model="selectedKey" :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"/>
-    <span>
+    <span class="pankow-singleselect-label">
       <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
       {{ selected ? selected[optionLabel] : placeholder }}
     </span>
@@ -193,6 +199,7 @@ onMounted(() => {
   transition: background-color 250ms;
   min-width: 100px;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -216,4 +223,9 @@ onMounted(() => {
   border-color: var(--pankow-input-border-color);
 }
 
+.pankow-singleselect-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 </style>

package/components/TextInput.vue

@@ -56,8 +56,6 @@ defineExpose({ focus });
 
 .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.5.0",
+  "version": "3.5.2",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",