@cloudron/pankow 4.4.2 → 4.4.4

package/components/ClipboardAction.vue

@@ -1,15 +1,18 @@
 <script setup>
 
 import { copyToClipboard } from '../utils';
-import Button from './Button.vue';
 
 const props = defineProps({
   value: String,
   doneHint: String,
+  multiline: {
+    type: Boolean,
+    default: false
+  },
 });
 
 function onClipboard() {
-  copyToClipboard(props.value);
+  copyToClipboard(props.value, { multiline: props.multiline });
   window.pankow.notify({
     text: props.doneHint || 'Copied',
     type: 'success',

package/components/ClipboardButton.vue

@@ -6,10 +6,14 @@ import Button from './Button.vue';
 const props = defineProps({
   value: String,
   doneHint: String,
+  multiline: {
+    type: Boolean,
+    default: false
+  },
 });
 
 function onClipboard() {
-  copyToClipboard(props.value);
+  copyToClipboard(props.value, { multiline: props.multiline });
   window.pankow.notify({
     text: props.doneHint || 'Copied',
     type: 'success',

package/components/Switch.vue

@@ -69,6 +69,10 @@ function onChange(event) {
   transition: all 250ms;
 }
 
+.pankow-switch.pankow-switch-disabled span::before {
+  background-color: color-mix(in srgb, var(--pankow-text-color), transparent 60%);
+}
+
 .pankow-switch-input-label {
   margin-left: 8px;
   cursor: pointer;
@@ -87,6 +91,10 @@ input:checked + span::before {
   background-color: white;
 }
 
+.pankow-switch.pankow-switch-disabled > input:checked + span::before {
+  background-color: color-mix(in srgb, white, transparent 60%);
+}
+
 .pankow-switch input {
   display: none;
 }

package/components/VersionCheckBanner.vue

@@ -0,0 +1,80 @@
+<template>
+  <Transition name="pankow-version-banner">
+    <div v-if="mismatch" class="pankow-version-banner">
+      <span>A new version is available.</span>
+      <Button plain @click="reload">Reload</Button>
+      <Button plain tool @click="dismiss" aria-label="Dismiss">&#x2715;</Button>
+    </div>
+  </Transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import Button from './Button.vue';
+
+const mismatch = ref(false);
+
+function setMismatch() {
+  mismatch.value = true;
+}
+
+function reload() {
+  window.location.reload(true);
+}
+
+function dismiss() {
+  mismatch.value = false;
+}
+
+function checkFlag() {
+  if (window.__pankow_version_mismatch) setMismatch();
+}
+
+onMounted(() => {
+  if (window.__pankow_version_mismatch) setMismatch();
+  window.addEventListener('pankow:version-mismatch', checkFlag);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('pankow:version-mismatch', checkFlag);
+});
+</script>
+
+<style>
+.pankow-version-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 30002;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 24px;
+  background: var(--pankow-color-primary);
+  color: white;
+  font-family: var(--pankow-font-family, Inter, sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+.pankow-version-banner .pankow-button[plain] {
+  color: white;
+}
+
+.pankow-version-banner .pankow-button[plain]:hover {
+  color: white;
+}
+
+.pankow-version-banner-enter-active,
+.pankow-version-banner-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.pankow-version-banner-enter-from,
+.pankow-version-banner-leave-to {
+  transform: translateY(-100%);
+}
+</style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.2",
+  "version": "4.4.4",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",

package/plugin.js

@@ -5,8 +5,10 @@ import textOverflow from './text-overflow.js';
 import fetcher from './fetcher.js';
 import { setNotifyPosition } from './notifyState.js';
 import Notification from './components/Notification.vue';
+import VersionCheckBanner from './components/VersionCheckBanner.vue';
 
-const CONTAINER_ID = 'pankow-notification-root';
+const NOTIFICATION_CONTAINER_ID = 'pankow-notification-root';
+const VERSION_BANNER_CONTAINER_ID = 'pankow-version-banner-root';
 
 export default {
     install(app, options = {}) {
@@ -28,14 +30,25 @@ export default {
         }
 
         if (typeof document !== 'undefined' && !import.meta.env.SSR) {
-            const existing = document.getElementById(CONTAINER_ID);
-            if (existing) existing.remove();
+            const existingNotification = document.getElementById(NOTIFICATION_CONTAINER_ID);
+            if (existingNotification) existingNotification.remove();
 
-            const container = document.createElement('div');
-            container.id = CONTAINER_ID;
-            document.body.appendChild(container);
+            const notificationContainer = document.createElement('div');
+            notificationContainer.id = NOTIFICATION_CONTAINER_ID;
+            document.body.appendChild(notificationContainer);
 
-            createApp(Notification).mount(container);
+            createApp(Notification).mount(notificationContainer);
+        }
+
+        if (typeof document !== 'undefined' && !import.meta.env.SSR) {
+            const existingBanner = document.getElementById(VERSION_BANNER_CONTAINER_ID);
+            if (existingBanner) existingBanner.remove();
+
+            const bannerContainer = document.createElement('div');
+            bannerContainer.id = VERSION_BANNER_CONTAINER_ID;
+            document.body.appendChild(bannerContainer);
+
+            createApp(VersionCheckBanner).mount(bannerContainer);
         }
     }
 };

package/types/utils.d.ts

@@ -127,12 +127,15 @@ declare function getExtension(entry: {
     fileName: string;
 }): string;
 /**
- * Copies a string to the system clipboard using a temporary input element.
+ * Copies a string to the system clipboard using a temporary form element.
  * @param {string} value
+ * @param {{ multiline?: boolean }} [options] - When multiline is true, uses a textarea so newlines are preserved
  * @returns {void}
  * @deprecated Prefer the native `navigator.clipboard.writeText()` API.
  */
-declare function copyToClipboard(value: string): void;
+declare function copyToClipboard(value: string, options?: {
+    multiline?: boolean;
+}): void;
 /**
  * Parses the current page's URL query string into a key/value object.
  * @returns {Object<string, string>}

package/utils.js

@@ -332,13 +332,15 @@ function getExtension(entry) {
 }
 
 /**
- * Copies a string to the system clipboard using a temporary input element.
+ * Copies a string to the system clipboard using a temporary form element.
  * @param {string} value
+ * @param {{ multiline?: boolean }} [options] - When multiline is true, uses a textarea so newlines are preserved
  * @returns {void}
  * @deprecated Prefer the native `navigator.clipboard.writeText()` API.
  */
-function copyToClipboard(value) {
-    var elem = document.createElement('input');
+function copyToClipboard(value, options) {
+    var multiline = options && options.multiline;
+    var elem = document.createElement(multiline ? 'textarea' : 'input');
     elem.value = value;
     document.body.append(elem);
     elem.select();

package/vite-plugin.js

@@ -1,12 +1,44 @@
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { existsSync } from 'node:fs';
+import { existsSync, writeFileSync } from 'node:fs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
 const PANKOW_PACKAGE = '@cloudron/pankow';
 
-export default function pankowPlugin() {
+const versionCheckScript = `<script>
+(function () {
+    var meta = document.querySelector('meta[name="build-id"]');
+    if (!meta) return;
+
+    var id = meta.content;
+
+    function check() {
+        fetch('/build.json')
+            .then(function (r) { return r.ok ? r.json() : null; })
+            .then(function (d) {
+                if (d && d.buildId && d.buildId !== id) {
+                    window.__pankow_version_mismatch = true;
+                    window.dispatchEvent(new CustomEvent('pankow:version-mismatch'));
+                }
+            })
+            .catch(function () {});
+    }
+
+    setInterval(check, 30000);
+
+    document.addEventListener('visibilitychange', function () {
+        if (document.visibilityState === 'visible') check();
+    });
+
+    setTimeout(check, 5000);
+})();
+</script>`;
+
+export default function pankowPlugin({ versionCheck = false } = {}) {
+    let buildId = null;
+    let config = null;
+
     return {
         name: 'vite-plugin-pankow',
         config(config) {
@@ -21,6 +53,9 @@ export default function pankowPlugin() {
                 },
             };
         },
+        configResolved(resolvedConfig) {
+            config = resolvedConfig;
+        },
         configureServer(server) {
             const allow = server.config.server.fs.allow;
             if (Array.isArray(allow) && !allow.includes(__dirname)) {
@@ -36,5 +71,16 @@ export default function pankowPlugin() {
                 }
             }
         },
+        transformIndexHtml(html) {
+            if (!versionCheck) return html;
+            if (!buildId) buildId = Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8);
+            return html.replace('</head>', `<meta name="build-id" content="${buildId}">\n${versionCheckScript}\n</head>`);
+        },
+        closeBundle() {
+            if (!versionCheck || !buildId || !config) return;
+            const outDir = config.build.outDir || 'dist';
+            const outPath = resolve(config.root, outDir, 'build.json');
+            writeFileSync(outPath, JSON.stringify({ buildId }));
+        },
     };
 }