@cloudron/pankow 4.4.1 → 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/SplitLayout.vue

@@ -2,6 +2,11 @@
 import { ref, computed, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
 
 const props = defineProps({
+    orientation: {
+        type: String,
+        default: 'horizontal'
+    },
+    // horizontal mode props
     leftWidth: {
         type: Number,
         default: 50
@@ -13,40 +18,88 @@ const props = defineProps({
     minRightWidth: {
         type: Number,
         default: 20
+    },
+    // vertical mode props
+    topHeight: {
+        type: Number,
+        default: 50
+    },
+    minTopHeight: {
+        type: Number,
+        default: 20
+    },
+    minBottomHeight: {
+        type: Number,
+        default: 20
+    },
+    opaque: {
+        type: Boolean,
+        default: false
     }
 });
 
-const emit = defineEmits(['update:leftWidth']);
+const emit = defineEmits(['update:leftWidth', 'update:topHeight']);
+
+const isHorizontal = computed(() => props.orientation === 'horizontal');
 
 const containerRef = useTemplateRef('container');
 const isDragging = ref(false);
-const dragStartX = ref(0);
-const dragStartWidth = ref(0);
-const currentLeftWidth = ref(props.leftWidth);
+const dragStartCoord = ref(0);
+const dragStartSize = ref(0);
+
+const currentFirstSize = ref(
+    isHorizontal.value ? props.leftWidth : props.topHeight
+);
 
 watch(() => props.leftWidth, (val) => {
+    if (!isDragging.value && isHorizontal.value) {
+        currentFirstSize.value = val;
+    }
+});
+
+watch(() => props.topHeight, (val) => {
+    if (!isDragging.value && !isHorizontal.value) {
+        currentFirstSize.value = val;
+    }
+});
+
+watch(() => props.orientation, () => {
     if (!isDragging.value) {
-        currentLeftWidth.value = val;
+        currentFirstSize.value = isHorizontal.value ? props.leftWidth : props.topHeight;
     }
 });
 
+const minFirst = computed(() =>
+    isHorizontal.value ? props.minLeftWidth : props.minTopHeight
+);
+
+const minSecond = computed(() =>
+    isHorizontal.value ? props.minRightWidth : props.minBottomHeight
+);
+
 function startDrag(e) {
     isDragging.value = true;
-    dragStartX.value = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
-    dragStartWidth.value = currentLeftWidth.value;
-    document.body.style.cursor = 'col-resize';
+    dragStartCoord.value = isHorizontal.value
+        ? (e.clientX ?? e.touches?.[0]?.clientX ?? 0)
+        : (e.clientY ?? e.touches?.[0]?.clientY ?? 0);
+    dragStartSize.value = currentFirstSize.value;
+    document.body.style.cursor = isHorizontal.value ? 'col-resize' : 'row-resize';
     document.body.style.userSelect = 'none';
     e.preventDefault();
 }
 
 function onDrag(e) {
     if (!isDragging.value || !containerRef.value) return;
-    const clientX = e.clientX ?? e.touches?.[0]?.clientX ?? 0;
-    const containerWidth = containerRef.value.getBoundingClientRect().width;
-    if (containerWidth === 0) return;
-    const delta = ((clientX - dragStartX.value) / containerWidth) * 100;
-    const newWidth = dragStartWidth.value + delta;
-    currentLeftWidth.value = Math.max(props.minLeftWidth, Math.min(100 - props.minRightWidth, newWidth));
+    const coord = isHorizontal.value
+        ? (e.clientX ?? e.touches?.[0]?.clientX ?? 0)
+        : (e.clientY ?? e.touches?.[0]?.clientY ?? 0);
+    const containerSize = isHorizontal.value
+        ? containerRef.value.getBoundingClientRect().width
+        : containerRef.value.getBoundingClientRect().height;
+    if (containerSize === 0) return;
+    const delta = ((coord - dragStartCoord.value) / containerSize) * 100;
+    const newSize = dragStartSize.value + delta;
+    currentFirstSize.value = Math.max(minFirst.value, Math.min(100 - minSecond.value, newSize));
 }
 
 function stopDrag() {
@@ -54,7 +107,11 @@ function stopDrag() {
     isDragging.value = false;
     document.body.style.cursor = '';
     document.body.style.userSelect = '';
-    emit('update:leftWidth', Math.round(currentLeftWidth.value));
+    if (isHorizontal.value) {
+        emit('update:leftWidth', Math.round(currentFirstSize.value));
+    } else {
+        emit('update:topHeight', Math.round(currentFirstSize.value));
+    }
 }
 
 onMounted(() => {
@@ -71,21 +128,35 @@ onUnmounted(() => {
     document.removeEventListener('touchend', stopDrag);
 });
 
-const leftStyle = computed(() => ({
-    flex: `0 0 ${currentLeftWidth.value}%`,
-    maxWidth: `${currentLeftWidth.value}%`
-}));
+const firstStyle = computed(() => {
+    const size = currentFirstSize.value;
+    return isHorizontal.value
+        ? { flex: `0 0 ${size}%`, maxWidth: `${size}%` }
+        : { flex: `0 0 ${size}%`, maxHeight: `${size}%` };
+});
 </script>
 
 <template>
-    <div ref="container" class="pankow-split-layout" :class="{ 'pankow-split-layout-dragging': isDragging }">
-        <div class="pankow-split-layout-left" :style="leftStyle">
+    <div
+        ref="container"
+        class="pankow-split-layout"
+        :class="{
+            'pankow-split-layout-dragging': isDragging,
+            'pankow-split-layout-vertical': !isHorizontal,
+            'pankow-split-layout-divider-opaque': opaque
+        }"
+    >
+        <div class="pankow-split-layout-first" :style="firstStyle">
             <slot name="left" />
         </div>
-        <div class="pankow-split-layout-divider" @mousedown="startDrag" @touchstart.prevent="startDrag">
+        <div
+            class="pankow-split-layout-divider"
+            @mousedown="startDrag"
+            @touchstart.prevent="startDrag"
+        >
             <div class="pankow-split-layout-handle"><span></span><span></span></div>
         </div>
-        <div class="pankow-split-layout-right">
+        <div class="pankow-split-layout-second">
             <slot name="right" />
         </div>
     </div>
@@ -100,15 +171,22 @@ const leftStyle = computed(() => ({
     overflow: hidden;
 }
 
-.pankow-split-layout-left {
-    height: 100%;
+.pankow-split-layout-vertical {
+    flex-direction: column;
+}
+
+.pankow-split-layout-first {
     min-width: 0;
     overflow: hidden;
 }
 
+.pankow-split-layout-vertical .pankow-split-layout-first {
+    height: auto;
+    min-height: 0;
+    min-width: 0;
+}
+
 .pankow-split-layout-divider {
-    width: 6px;
-    cursor: col-resize;
     background: transparent;
     position: relative;
     flex-shrink: 0;
@@ -117,6 +195,20 @@ const leftStyle = computed(() => ({
     justify-content: center;
 }
 
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-divider {
+    width: 6px;
+    cursor: col-resize;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-divider {
+    height: 6px;
+    cursor: row-resize;
+}
+
+.pankow-split-layout-divider-opaque .pankow-split-layout-divider {
+    background: var(--pankow-color-background);
+}
+
 .pankow-split-layout-divider:hover,
 .pankow-split-layout-dragging .pankow-split-layout-divider {
     background: var(--pankow-input-border-color);
@@ -128,13 +220,20 @@ const leftStyle = computed(() => ({
     left: 50%;
     transform: translate(-50%, -50%);
     display: flex;
-    flex-direction: column;
     gap: 2px;
     opacity: 0;
     transition: opacity 0.15s;
     pointer-events: none;
 }
 
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle {
+    flex-direction: column;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-handle {
+    flex-direction: row;
+}
+
 .pankow-split-layout-divider:hover .pankow-split-layout-handle,
 .pankow-split-layout-dragging .pankow-split-layout-handle {
     opacity: 0.5;
@@ -142,21 +241,34 @@ const leftStyle = computed(() => ({
 
 .pankow-split-layout-handle span {
     display: block;
-    width: 2px;
-    height: 16px;
     border-radius: 1px;
     background: var(--pankow-color-text);
 }
 
-.pankow-split-layout-right {
+.pankow-split-layout:not(.pankow-split-layout-vertical) .pankow-split-layout-handle span {
+    width: 2px;
+    height: 16px;
+}
+
+.pankow-split-layout-vertical .pankow-split-layout-handle span {
+    width: 16px;
+    height: 2px;
+}
+
+.pankow-split-layout-second {
     flex: 1;
-    height: 100%;
     min-width: 0;
     overflow: hidden;
 }
 
-.pankow-split-layout-dragging .pankow-split-layout-left,
-.pankow-split-layout-dragging .pankow-split-layout-right {
+.pankow-split-layout-vertical .pankow-split-layout-second {
+    height: auto;
+    min-height: 0;
+    min-width: 0;
+}
+
+.pankow-split-layout-dragging .pankow-split-layout-first,
+.pankow-split-layout-dragging .pankow-split-layout-second {
     pointer-events: none;
 }
 </style>

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.1",
+  "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 }));
+        },
     };
 }