@cloudron/pankow 4.1.4 → 4.1.6

package/components/InputDialog.vue

@@ -16,10 +16,12 @@ const rejectLabel = ref('No');
 const rejectStyle = ref('');
 const isPrompt = ref(false);
 const isMultiValue = ref(false);
+const autoCloseOnConfirm = ref(true);
 const value = ref([]);
 const required = ref([]);
 const placeholder = ref('');
 const internalId = ref(uuidv4());
+const confirmBusy = ref(false);
 
 const dialog = useTemplateRef('dialog');
 
@@ -46,6 +48,8 @@ function reset() {
   rejectStyle.value = '';
   isPrompt.value = false;
   isMultiValue.value = false;
+  autoCloseOnConfirm.value = true;
+  confirmBusy.value = false;
 }
 
 function info(options) {
@@ -81,6 +85,8 @@ function confirm(options) {
   if (options.confirmStyle) confirmStyle.value = options.confirmStyle;
   if (options.rejectStyle) rejectStyle.value = options.rejectStyle;
 
+  autoCloseOnConfirm.value = !!options.autoCloseOnConfirm;
+
   dialog.value.open();
 
   return new Promise((resolve, reject) => {
@@ -117,28 +123,41 @@ function prompt(options) {
   });
 }
 
+function close() {
+  dialog.value.close();
+  confirmBusy.value = false;
+}
+
 function onConfirmed() {
   if (!isFormValid.value) return;
 
-  resolver(isPrompt.value ? (isMultiValue.value ? value.value : value.value[0]) : true);
-  dialog.value.close();
+  const result = isPrompt.value ? (isMultiValue.value ? value.value : value.value[0]) : true;
+
+  resolver(result);
+
+  if (!result || autoCloseOnConfirm.value) {
+    dialog.value.close();
+  } else {
+    confirmBusy.value = true;
+  }
 }
 
 function onRejected() {
+  close();
   resolver(isPrompt.value ? null : false);
-  dialog.value.close();
 }
 
 defineExpose({
   info,
   confirm,
   prompt,
+  close,
 });
 
 </script>
 
 <template>
-  <Dialog ref="dialog" :title="title" :confirm-active="isFormValid" :confirm-label="confirmLabel" :rejectLabel="rejectLabel" :rejectStyle="rejectStyle" :confirmStyle="confirmStyle" @confirm="onConfirmed()" @close="onRejected()" :z-index="2003">
+  <Dialog ref="dialog" :title="title" :confirm-active="isFormValid" :confirm-busy="confirmBusy" :confirm-label="confirmLabel" :rejectLabel="rejectLabel" :rejectStyle="rejectStyle" :confirmStyle="confirmStyle" @confirm="onConfirmed()" @close="onRejected()" :z-index="2003">
     <div v-if="isPrompt" class="pankow-input-dialog-prompt" v-for="(msg, index) in message">
       <label :for="internalId+index" v-html="msg"></label>
       <PasswordInput :id="internalId+index" v-if="type[index] === 'password'" v-model="value[index]" :placeholder="placeholder[index]" @keydown.enter="onConfirmed()"/>

package/components/LoginView.vue

@@ -0,0 +1,142 @@
+<script setup>
+
+import Button from  './Button.vue';
+
+defineEmits(['login']);
+
+defineProps({
+  iconUrl: {
+    type: String,
+    default: '',
+  },
+  title: {
+    type: String,
+    default: 'Title',
+  },
+  message: {
+    type: String,
+    default: 'Message',
+  },
+  footer: {
+    type: String,
+    default: 'Footer',
+  },
+  loginLabel: {
+    type: String,
+    default: 'Login',
+  },
+});
+
+</script>
+
+<template>
+  <div class="pankow-login-view">
+    <div class="pankow-login-view-root">
+      <div class="pankow-login-view-left pankow-no-mobile">
+        <img class="pankow-login-view-icon" width="128" height="128" :src="iconUrl" :alt="title" />
+      </div>
+
+      <div class="pankow-login-view-right">
+        <div class="pankow-login-view-mobile-container">
+          <img class="pankow-login-view-icon" width="128" height="128" :src="iconUrl" :alt="title" />
+        </div>
+        <h1 class="pankow-login-view-title">{{ title }}</h1>
+        <h2 class="pankow-login-view-message" v-show="message">{{ message }}</h2>
+        <Button id="loginSubmitButton" @click="$emit('login')">{{ loginLabel }}</Button>
+        <div class="pankow-login-view-footer" v-show="footer">{{ footer }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+.pankow-login-view {
+  height: 100%;
+}
+
+.pankow-login-view-root {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+}
+
+.pankow-login-view-left {
+  background: linear-gradient(90deg,rgb(74, 173, 245) 0%,var(--pankow-color-primary) 100%);
+  flex-basis: 30%;
+  justify-content: center;
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+}
+
+.pankow-login-view-left .pankow-login-view-icon {
+  margin-bottom: 20px;
+}
+
+.pankow-login-view-title {
+  font-family: var(--pankow-font-family);
+  font-weight: 700;
+  font-size: 28px;
+  margin-bottom: 15px;
+}
+
+.pankow-login-view-message {
+  font-family: var(--pankow-font-family);
+  font-weight: 400;
+  font-size: 16px;
+  margin-top: 5px;
+  margin-bottom: 30px;
+}
+
+.pankow-login-view-footer {
+  font-size: 12px;
+  padding: 5px;
+  position: absolute;
+  bottom: 5px;
+}
+
+.pankow-login-view-right {
+  display: flex;
+  align-self: stretch;
+  flex-direction: column;
+  padding: 40px;
+  white-space: nowrap;
+  justify-content: center;
+}
+
+.pankow-login-view-right {
+  max-width: 400px;
+}
+
+.pankow-login-view-mobile-container {
+  display: none;
+}
+
+@media (max-width: 576px) {
+  .pankow-login-view-mobile-container {
+    display: block;
+    text-align: center;
+  }
+
+  .pankow-login-view-right {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    max-width: unset;
+    padding-left: 20px;
+    padding-right: 20px;
+    justify-content: start;
+    flex-basis: unset;
+    text-align: center;
+    gap: 2rem;
+  }
+
+  .pankow-login-view-right {
+    max-width: unset;
+    text-align: left;
+  }
+}
+
+</style>

package/components/SingleSelect.vue

@@ -10,6 +10,7 @@ const props = defineProps({
     type: String,
     default: 'Select'
   },
+  id: String,
   optionLabel: {
     type: String,
     default: 'label'
@@ -173,7 +174,7 @@ watchEffect(handleDefaultSelect);
 <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="onKeyDown($event)">
     <!-- native select for required and accessibility handling -->
-    <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
+    <select v-model="selectedKey" :id="id" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>
       <option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ item[optionLabel] }}</option>
     </select>

package/index.js

@@ -21,6 +21,7 @@ import FileUploader from './components/FileUploader.vue';
 import FormGroup from './components/FormGroup.vue';
 import Icon from './components/Icon.vue';
 import InputDialog from './components/InputDialog.vue';
+import LoginView from './components/LoginView.vue';
 import MainLayout from './components/MainLayout.vue';
 import MaskedInput from './components/MaskedInput.vue';
 import Menu from './components/Menu.vue';
@@ -69,6 +70,7 @@ export {
     InputGroup,
     Icon,
     InputDialog,
+    LoginView,
     MainLayout,
     MaskedInput,
     Menu,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.1.4",
+  "version": "4.1.6",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -30,11 +30,11 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@vitejs/plugin-vue": "^6.0.5",
     "highlight.js": "^11.11.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vue": "^3.5.29",
-    "vue-router": "^5.0.3"
+    "vite": "^8.0.1",
+    "vue": "^3.5.30",
+    "vue-router": "^5.0.4"
   }
 }

package/stats.js

@@ -0,0 +1,89 @@
+/**
+ * Lists all collections in the Cloudron MongoDB database and displays their sizes.
+ * Uses: CLOUDRON_MONGODB_URL, or CLOUDRON_MONGODB_HOST/PORT/DATABASE/USERNAME/PASSWORD
+ *
+ * Run: node stats.js
+ */
+
+import { MongoClient } from 'mongodb';
+
+function formatBytes(bytes) {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+}
+
+function getConnectionUrl() {
+  const url = process.env.CLOUDRON_MONGODB_URL;
+  if (url) return url;
+
+  const host = process.env.CLOUDRON_MONGODB_HOST;
+  const port = process.env.CLOUDRON_MONGODB_PORT;
+  const database = process.env.CLOUDRON_MONGODB_DATABASE;
+  const username = process.env.CLOUDRON_MONGODB_USERNAME;
+  const password = process.env.CLOUDRON_MONGODB_PASSWORD;
+
+  if (!host || !database) {
+    throw new Error(
+      'Set CLOUDRON_MONGODB_URL or CLOUDRON_MONGODB_HOST and CLOUDRON_MONGODB_DATABASE (and optionally USERNAME, PASSWORD, PORT)'
+    );
+  }
+
+  const auth = username && password ? `${encodeURIComponent(username)}:${encodeURIComponent(password)}@` : '';
+  const portPart = port ? `:${port}` : '';
+  return `mongodb://${auth}${host}${portPart}/${database}`;
+}
+
+async function main() {
+  const uri = getConnectionUrl();
+  const client = new MongoClient(uri);
+
+  try {
+    await client.connect();
+    const db = client.db(); // uses database from URI
+    const dbName = db.databaseName;
+
+    const collections = await db.listCollections().toArray();
+    if (collections.length === 0) {
+      console.log(`Database "${dbName}" has no collections.\n`);
+      return;
+    }
+
+    console.log(`Database: ${dbName}\n`);
+    console.log('Collection                    | Size (data)   | Storage size  | Index size');
+    console.log('-'.repeat(75));
+
+    let totalSize = 0;
+    let totalStorageSize = 0;
+    let totalIndexSize = 0;
+
+    for (const { name } of collections) {
+      const stats = await db.command({ collStats: name });
+      const size = stats.size ?? 0;
+      const storageSize = stats.storageSize ?? 0;
+      const indexSize = stats.totalIndexSize ?? 0;
+
+      totalSize += size;
+      totalStorageSize += storageSize;
+      totalIndexSize += indexSize;
+
+      console.log(
+        `${name.padEnd(28)} | ${formatBytes(size).padStart(13)} | ${formatBytes(storageSize).padStart(13)} | ${formatBytes(indexSize)}`
+      );
+    }
+
+    console.log('-'.repeat(75));
+    console.log(
+      `${'TOTAL'.padEnd(28)} | ${formatBytes(totalSize).padStart(13)} | ${formatBytes(totalStorageSize).padStart(13)} | ${formatBytes(totalIndexSize)}`
+    );
+  } finally {
+    await client.close();
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/style.css

@@ -14,9 +14,14 @@
 
   --pankow-body-background-color: white;
 
-  --pankow-text-color: #333;
-  --pankow-text-color-alt: #333;
+  --pankow-color-text: #333;
+  --pankow-color-text-secondary: #666;
+
+  /* old use above */
   --pankow-text-color-white: white;
+  --pankow-text-color: var(--pankow-color-text);
+  --pankow-text-color-alt: var(--pankow-color-text-secondary);
+  --pankow-text-secondary: var(--pankow-color-text-secondary);
 
   --pankow-color-dark: #495057;
   --pankow-color-dark-secondary: #495057;
@@ -93,8 +98,9 @@ input {
   :root {
     --pankow-body-background-color: black;
 
-    --pankow-text-color: #ced4da;
-    --pankow-text-color-alt: #495057;
+    --pankow-color-text: #ced4da;
+    --pankow-color-text-secondary: #495057;
+
     --pankow-text-color-white: #ced4da;
 
     --pankow-input-background-color: #1b1e21;

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, DateTimeInput, 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, TreeView, fetcher, gestures, tooltip, fallbackImage, utils };
+export { BottomBar, Breadcrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, Checkbox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, Spinner, Switch, TableView, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils };

package/viewers/ImageViewer.vue

@@ -22,10 +22,6 @@
 import { getFileTypeGroup } from '../utils.js';
 import Button from '../components/Button.vue';
 
-function defaultDownloadHandler() {
-  console.warn('Missing downloadHandler for ImageViewer');
-}
-
 let touchDist = 0;
 let startY = 0;
 const dismissDistanceThreshold = 150;
@@ -37,7 +33,7 @@ export default {
     props: {
       downloadHandler: {
         type: Function,
-        default: defaultDownloadHandler
+        default: null
       },
       navigationHandler: {
         type: Function,
@@ -62,7 +58,7 @@ export default {
       };
     },
     computed: {
-      hasDownloadHandler() { return this.downloadHandler !== defaultDownloadHandler }
+      hasDownloadHandler() { return typeof this.downloadHandler === 'function' }
     },
     methods: {
       getFileTypeGroup,