@cloudron/pankow 4.2.1 → 4.2.2

package/components/TableViewActionBar.vue

@@ -0,0 +1,110 @@
+<script setup>
+
+import { computed, useTemplateRef, ref } from 'vue';
+import Menu from './Menu.vue';
+import Button from './Button.vue';
+import ButtonGroup from './ButtonGroup.vue';
+
+const props = defineProps({
+  actions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const quickActions = computed(() => {
+  if (window.innerWidth <= 576) return [];
+
+  const visibleActions = props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator);
+  if (visibleActions.length <= 2) return visibleActions;
+
+  return visibleActions.filter(a => a.quickAction);
+});
+
+const visibleActionCount = computed(() => {
+  return props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator).length;
+});
+
+const isMenuOpen = ref(false);
+
+const menuElement = useTemplateRef('menuElement');
+function onMenu(event) {
+  isMenuOpen.value = true;
+  menuElement.value.open(event, event.currentTarget);
+}
+
+</script>
+
+<template>
+  <div class="pankow-table-view-action-bar" :class="{ 'is-menu-open': isMenuOpen }">
+    <Menu ref="menuElement" :model="actions" @close="isMenuOpen = false" />
+    <ButtonGroup class="pankow-table-view-action-bar-quick-actions">
+      <Button tool v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action && quickAction.action()" :href="quickAction.href || null" :target="quickAction.target || null" v-tooltip.top="quickAction.label"/>
+      <Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length"/>
+    </ButtonGroup>
+    <Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0" class="pankow-table-view-action-bar-menu-trigger"/>
+  </div>
+</template>
+
+<style scoped>
+
+.pankow-table-view-action-bar {
+  display: flex;
+  gap: 5px;
+  justify-content: end;
+  min-height: 31px;
+  align-items: center;
+  min-width: 55px;
+}
+
+.pankow-table-view-action-bar-menu-trigger {
+  display: none;
+}
+
+.pankow-table-view-action-bar-quick-actions {
+  display: block;
+}
+
+.pankow-table-view-action-bar .pankow-table-view-action-bar-quick-actions .pankow-button {
+  background-color: var(--pankow-input-background-color);
+  color: var(--pankow-color-text);
+  border: 1px solid transparent;
+}
+
+.pankow-table-view-action-bar .pankow-table-view-action-bar-quick-actions .pankow-button:hover {
+  color: var(--pankow-color-primary);
+}
+
+@media (hover: hover) {
+  .pankow-table-view-action-bar-quick-actions {
+    display: none;
+  }
+
+  .pankow-table-view-action-bar-menu-trigger {
+    display: block;
+  }
+
+  .pankow-table-row-with-hover:hover .pankow-table-view-action-bar-quick-actions {
+    display: block;
+  }
+
+  .pankow-table-row-with-hover:hover .pankow-table-view-action-bar-menu-trigger {
+    display: none;
+  }
+}
+
+@media (hover: none) {
+  .pankow-table-view-action-bar-quick-actions {
+    display: block;
+  }
+
+  .pankow-table-view-action-bar-menu-trigger {
+    display: none;
+  }
+}
+
+.pankow-table-view-action-bar.is-menu-open .pankow-table-view-action-bar-menu-trigger {
+  display: block !important;
+}
+
+</style>

package/index.js

@@ -40,6 +40,7 @@ import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
 import Switch from './components/Switch.vue';
 import TableView from './components/TableView.vue';
+import TableViewActionBar from './components/TableViewActionBar.vue';
 import TabView from './components/TabView.vue';
 import TagInput from './components/TagInput.vue';
 import TextInput from './components/TextInput.vue';
@@ -90,6 +91,7 @@ export {
     Spinner,
     Switch,
     TableView,
+    TableViewActionBar,
     TabView,
     TagInput,
     TextInput,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.2.1",
+  "version": "4.2.2",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -23,8 +23,8 @@
   "license": "ISC",
   "dependencies": {
     "@fontsource/inter": "^5.2.8",
-    "@fortawesome/fontawesome-free": "^7.2.0",
-    "filesize": "^11.0.17",
+    "@fortawesome/fontawesome-free": "^7.3.0",
+    "filesize": "^11.0.19",
     "monaco-editor": "^0.55.1",
     "online-3d-viewer": "^0.18.0"
   },
@@ -33,8 +33,8 @@
     "@vitejs/plugin-vue": "^6.0.7",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vue": "^3.5.38",
+    "vite": "^8.1.0",
+    "vue": "^3.5.39",
     "vue-router": "^5.1.0"
   }
 }

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, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, SplitLayout, 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, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils };

package/stats.js

@@ -1,89 +0,0 @@
-/**
- * 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);
-});