@cloudron/pankow 3.4.1 → 3.5.0

package/components/Checkbox.vue

@@ -31,7 +31,7 @@ const internalId = uuidv4();
 
 .pankow-checkbox {
   display: flex;
-  align-items: center;
+  align-items: end; /* this gives better alignment for the text wrt checkbox */
   white-space: nowrap;
   margin: 4px 0;
 }

package/components/Dialog.vue

@@ -112,7 +112,6 @@ defineExpose({ open, close });
         <div ref="dialog" class="pankow-dialog" v-bind="$attrs" :class="{ 'pankow-dialog-center': center }" v-show="visible" @keydown.esc="onDismiss" tabindex="0" :style="mergedStyle">
           <div class="pankow-dialog-header" v-show="title">
             {{ title }}
-            <Icon v-show="showX" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
           </div>
           <div class="pankow-dialog-body" ref="dialogBody" :class="{ 'pankow-dialog-body-no-header': !title, 'pankow-dialog-body-no-buttons': !(rejectLabel || confirmLabel) }">
             <slot></slot>
@@ -123,6 +122,7 @@ defineExpose({ open, close });
             <Button :[rejectStyle]="!!rejectStyle" @click="onReject" v-show="rejectLabel" :disabled="!rejectActive">{{ rejectLabel }}</Button>
             <Button :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
           </div>
+          <Icon v-if="showX" class="pankow-dialog-x-close" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
         </div>
       </Transition>
     </div>
@@ -159,6 +159,13 @@ defineExpose({ open, close });
   outline: none;
 }
 
+.pankow-dialog-x-close {
+  position: absolute;
+  font-size: 20px;
+  top: 15px;
+  right: 15px;
+}
+
 .pankow-dialog-center {
   top: 50%;
   transform: translateX(-50%) translateY(-50%);

package/components/FormGroup.vue

@@ -28,4 +28,8 @@ const props = defineProps({
   margin: 6px 0;
 }
 
+.pankow-form-group > div[description]:first-of-type {
+  margin-bottom: 6px;
+}
+
 </style>

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/components/MenuItem.vue

@@ -44,7 +44,8 @@ function onActivated() {
 <template>
   <div class="pankow-menu-item" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
     <Checkbox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
-    <span :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
+    <span v-if="!item.separator" :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
+    <div class="pankow-menu-item-separator-line" v-if="item.separator"></div>
   </div>
 </template>
 
@@ -89,10 +90,25 @@ function onActivated() {
 }
 
 .pankow-menu-item[separator] {
-  background-color: #c3c3c3;
+  color: #666;
   padding: 0;
   margin: 5px 13px;
+  font-size: 12px;
+  font-weight: bold;
+  gap: 5px;
+}
+
+.pankow-menu-item[separator]:focus,
+.pankow-menu-item[separator]:hover {
+  color: #666;
+  cursor: unset;
+  background-color: unset;
+}
+
+.pankow-menu-item-separator-line {
   height: 1px;
+  background-color: #c3c3c3;
+  flex-grow: 1;
 }
 
 .pankow-menu-item-with-icons {

package/components/SingleSelect.vue

@@ -56,7 +56,9 @@ const menuModel = computed(() => {
       label: item[props.optionLabel],
       disabled: item.disabled,
       icon: item.icon,
+      separator: item.separator,
       action: () => {
+        if (item.separator) return;
         if (selected.value === item) return;
 
         let index;

package/components/TableView.vue

@@ -1,3 +1,94 @@
+<script setup>
+
+import { onMounted, ref, watchEffect } from  'vue';
+import ProgressBar from './ProgressBar.vue';
+import Icon from './Icon.vue';
+
+const emits = defineEmits(['row-click']);
+
+const props = defineProps({
+  model: Array,
+  busy: false,
+  placeholder: 'empty',
+  columns: Object,
+  hover: {
+    type: Boolean,
+    default: true
+  },
+  defaultSortBy: String,
+  defaultSortOrder: {
+    type: String,
+    default: 'asc',
+    validator(value, props) {
+      return [ 'asc', 'desc' ].includes(value);
+    }
+  }
+});
+
+const SORT_ORDER = {
+  ASC: 'asc',
+  DESC: 'desc',
+};
+
+const sortOrder = ref(SORT_ORDER.ASC);
+const sortBy = ref(null);
+const sortedItems =  ref([]);
+
+watchEffect(() => {
+  sort(props.model);
+});
+
+const finalBusy = ref(false);
+let busyTimeout;
+
+watchEffect(() => {
+  if (props.busy) {
+    busyTimeout = setTimeout(() => { finalBusy.value = true; }, 1000);
+  } else {
+    clearTimeout(busyTimeout);
+    finalBusy.value = false;
+  }
+});
+
+function sort() {
+  sortedItems.value = props.model.sort((a, b) => {
+    let sort = 0;
+
+    if (!props.columns[sortBy.value]) return 0;
+    if (!props.columns[sortBy.value].sort) return 0;
+
+    if (typeof props.columns[sortBy.value].sort === 'function') {
+      sort = props.columns[sortBy.value].sort(a[sortBy.value], b[sortBy.value], a, b);
+    } else {
+      if (a[sortBy.value] < b[sortBy.value]) sort = -1;
+      else sort = 1;
+    }
+
+    return sort *= (sortOrder.value === SORT_ORDER.DESC ? -1 : 1);
+  });
+}
+
+function toggleSort(key) {
+  if (!props.columns[key].sort) return;
+
+  if (sortBy.value === key) sortOrder.value = sortOrder.value === SORT_ORDER.ASC ? SORT_ORDER.DESC : SORT_ORDER.ASC;
+  else sortBy.value = key;
+
+  sort();
+}
+
+function onRowClick(item) {
+  emits('row-click', item);
+}
+
+onMounted(() => {
+  sortBy.value = props.defaultSortBy;
+  sortOrder.value = props.defaultSortOrder;
+  sort(props.model);
+});
+
+</script>
+
 <template>
   <div class="pankow-table-scroll-wrapper">
     <div class="pankow-table-wrapper">
@@ -12,7 +103,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-if="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><ProgressBar mode="indeterminate" :show-label="false" :slim="true"/></td></tr>
+          <tr v-if="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><ProgressBar mode="indeterminate" :show-label="false" :slim="true" v-show="finalBusy"/></td></tr>
           <tr v-else-if="!busy && sortedItems.length === 0"><td :colspan="Object.keys(columns).length" class="pankow-table-placeholder">{{ placeholder }}</td></tr>
           <tr v-else class="pankow-table-row" :class="{ 'pankow-table-row-with-hover': hover }" v-for="item in sortedItems" @click="onRowClick(item)">
             <td class="pankow-table-cell" v-for="column in Object.keys(columns)" :style="{ width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }" :class="{ 'pankow-table-cell-hide-mobile': columns[column].hideMobile, 'pankow-table-cell-nowrap': columns[column].nowrap }">
@@ -26,93 +117,6 @@
   </div>
 </template>
 
-<script>
-
-import ProgressBar from './ProgressBar.vue';
-import Icon from './Icon.vue';
-
-const SORT_ORDER = {
-  ASC: 'asc',
-  DESC: 'desc',
-};
-
-export default {
-  name: 'TableView',
-  emits: ['row-click'],
-  components: {
-    Icon,
-    ProgressBar,
-  },
-  data() {
-    return {
-      SORT_ORDER,
-      sortOrder: SORT_ORDER.ASC,
-      sortBy: null,
-      sortedItems: Array
-    }
-  },
-  props: {
-    model: Array,
-    busy: false,
-    placeholder: 'empty',
-    columns: Object,
-    hover: {
-      type: Boolean,
-      default: true
-    },
-    defaultSortBy: String,
-    defaultSortOrder: {
-      type: String,
-      default: SORT_ORDER.ASC,
-      validator(value, props) {
-        return [ SORT_ORDER.ASC, SORT_ORDER.DESC ].includes(value);
-      }
-    }
-  },
-  watch: {
-    model(newModel, oldModel) {
-      this.sort(newModel);
-    }
-  },
-  mounted() {
-    this.sortBy = this.defaultSortBy;
-    this.sortOrder = this.defaultSortOrder;
-    this.sort(this.model);
-  },
-  methods: {
-    sort() {
-      this.sortedItems = this.model.sort((a, b) => {
-        let sort = 0;
-
-        if (!this.columns[this.sortBy]) return 0;
-        if (!this.columns[this.sortBy].sort) return 0;
-
-        if (typeof this.columns[this.sortBy].sort === 'function') {
-          sort = this.columns[this.sortBy].sort(a[this.sortBy], b[this.sortBy], a, b);
-        } else {
-          if (a[this.sortBy] < b[this.sortBy]) sort = -1;
-          else sort = 1;
-        }
-
-        return sort *= (this.sortOrder === SORT_ORDER.DESC ? -1 : 1);
-      });
-    },
-    toggleSort(key) {
-      if (!this.columns[key].sort) return;
-
-      if (this.sortBy === key) this.sortOrder = this.sortOrder === SORT_ORDER.ASC ? SORT_ORDER.DESC : SORT_ORDER.ASC;
-      else this.sortBy = key;
-
-      this.sort();
-    },
-    onRowClick(item) {
-      this.$emit('row-click', item);
-    }
-  }
-};
-
-</script>
-
 <style>
 
 .pankow-table-scroll-wrapper {

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.1",
+  "version": "3.5.0",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -17,14 +17,14 @@
   "license": "ISC",
   "dependencies": {
     "@fontsource/inter": "^5.2.8",
-    "@fortawesome/fontawesome-free": "^7.0.1",
+    "@fortawesome/fontawesome-free": "^7.1.0",
     "filesize": "^11.0.13",
-    "monaco-editor": "^0.53.0"
+    "monaco-editor": "^0.54.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.1.7",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
     "vue": "^3.5.22"
   }
 }

package/style.css

@@ -94,7 +94,7 @@ input {
     --pankow-input-border-color-hover: #ced4da;
 
     --pankow-color-background: #1b1e21;
-    --pankow-color-background-hover: var(--pankow-color-dark);
+    --pankow-color-background-hover: #1f2326;
 
     --pankow-dialog-background-color: #32383e;
     --pankow-dialog-backdrop-color: rgba(0,0,0,.7);
@@ -164,7 +164,6 @@ select:focus {
 textarea {
   font-size: 14px;
   color: var(--pankow-text-color);
-  margin: 6px 0;
   background-color: var(--pankow-input-background-color);
   padding: 6px;
   border-radius: var(--pankow-border-radius);

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 };