@cloudron/pankow 4.4.2 → 4.4.3

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/VersionCheckBanner.vue

@@ -0,0 +1,99 @@
+<template>
+    <Transition name="pankow-version-banner">
+        <div v-if="mismatch" class="pankow-version-banner">
+            <span>A new version is available.</span>
+            <button class="pankow-version-banner-reload" @click="reload">Reload</button>
+            <button class="pankow-version-banner-close" @click="dismiss" aria-label="Dismiss">&#x2715;</button>
+        </div>
+    </Transition>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from '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-reload {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.4);
+    color: white;
+    padding: 4px 12px;
+    border-radius: var(--pankow-border-radius, 4px);
+    cursor: pointer;
+    font: inherit;
+}
+
+.pankow-version-banner-reload:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+.pankow-version-banner-close {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    font-size: 14px;
+    padding: 0 4px;
+    line-height: 1;
+}
+
+.pankow-version-banner-close: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.3",
   "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;
+            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 }));
+        },
     };
 }