@cloudron/pankow 3.4.2 → 3.5.0

package/components/MaskedInput.vue

@@ -0,0 +1,79 @@
+<script setup>
+
+import { computed } from 'vue';
+
+const model = defineModel({ type: [String, null], default: null });
+
+const props = defineProps({
+  required: {
+    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 true;
+  if (model.value === null) return true; // treat masked as satisfying "required"
+  return !!model.value;
+});
+
+</script>
+
+<template>
+  <input class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
+</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/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.0",
   "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 };