@cloudron/pankow 3.4.2 → 3.5.1

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

@@ -0,0 +1,84 @@
+<script setup>
+
+import { computed } from 'vue';
+
+const model = defineModel({ type: [String, null], default: null });
+
+const props = defineProps({
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  multiline: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const maskText = String.fromCharCode(0x25CF).repeat(8);
+
+const displayValue = computed({
+  get() {
+    return model.value === null ? maskText : model.value;
+  },
+  set(v) {
+    if (model.value === null && v === maskText) return;
+    model.value = v;
+  },
+});
+
+const isValid = computed(() => {
+  if (!props.required) return false;
+  if (model.value === null) return true; // treat masked as satisfying "required"
+  return !!model.value;
+});
+
+</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>
+
+<style>
+
+.pankow-masked-input {
+  display: inline-block;
+  font-size: 14px;
+  color: var(--pankow-text-color);
+  background-color: var(--pankow-input-background-color);
+  padding: var(--pankow-input-vertial-padding) var(--pankow-input-horizontal-padding);
+  border-radius: var(--pankow-border-radius);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--pankow-input-border-color);
+  transition: border-color 250ms;
+}
+
+.pankow-form-group.has-error .pankow-masked-input,
+.pankow-masked-input.has-error {
+  color: var(--pankow-text-color);
+  border-color: var(--pankow-color-danger) !important;
+}
+
+.pankow-masked-input:hover {
+  border-color: var(--pankow-input-border-color-hover);
+}
+
+.pankow-masked-input:focus {
+  border-color: var(--pankow-input-border-color-focus);
+  outline: none;
+}
+
+.pankow-masked-input[readonly] {
+  cursor: not-allowed;
+  border-color: var(--pankow-input-border-color) !important;
+  background-color: #f5f5f5;
+}
+
+.pankow-masked-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+</style>

package/components/MultiSelect.vue

@@ -149,6 +149,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,6 +162,12 @@ 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>
       <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />

package/index.js

@@ -18,6 +18,7 @@ import FormGroup from './components/FormGroup.vue';
 import Icon from './components/Icon.vue';
 import InputDialog from './components/InputDialog.vue';
 import MainLayout from './components/MainLayout.vue';
+import MaskedInput from './components/MaskedInput.vue';
 import Menu from './components/Menu.vue';
 import MenuItem from './components/MenuItem.vue';
 import SingleSelect from './components/SingleSelect.vue';
@@ -63,6 +64,7 @@ export {
     Icon,
     InputDialog,
     MainLayout,
+    MaskedInput,
     Menu,
     MenuItem,
     SingleSelect,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.4.2",
+  "version": "3.5.1",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",

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, 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 };
+export { BottomBar, Breadcrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, Checkbox, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, MainLayout, MaskedInput, 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 };