@cloudron/pankow 4.1.15 → 4.2.1

package/components/ButtonGroup.vue

@@ -18,8 +18,8 @@
   border-radius: 0;
   margin-left: 0;
   margin-right: 0;
-  border-left-width: 0.5px;
-  border-right-width: 0.5px;
+  border-left-width: 1px;
+  border-right-width: 0;
 }
 
 .pankow-button-group > .pankow-button:first-child {

package/components/Dialog.vue

@@ -62,13 +62,16 @@ const mergedStyle = computed(() => {
 const visible = ref(false);
 const dialog = useTemplateRef('dialog');
 const dialogBody = useTemplateRef('dialogBody');
+const confirmButton = useTemplateRef('confirmButton');
 
 async function open() {
   visible.value = true;
 
-  // try to focus some form elements else just the dialog
+  // try to focus some form elements, else confirm button, else just the dialog
   await nextTick();
-  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])')
+    || confirmButton.value?.$el
+    || dialog.value;
   focusElement.focus();
 }
 
@@ -125,7 +128,7 @@ defineExpose({ open, close });
             <Button :[alternateStyle]="!!alternateStyle" @click="onAlternateAction" v-show="alternateLabel" :loading="alternateBusy" :disabled="alternateBusy || !alternateActive">{{ alternateLabel }}</Button>
             <div style="flex-grow: 1;"></div>
             <Button :[rejectStyle]="!!rejectStyle" @click="onReject" v-show="rejectLabel" :disabled="!rejectActive">{{ rejectLabel }}</Button>
-            <Button :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
+            <Button ref="confirmButton" :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
           </div>
           <Icon v-if="showX" class="pankow-dialog-x-close" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
         </div>

package/components/InputGroup.vue

@@ -12,6 +12,7 @@
 .pankow-input-group {
   display: flex;
   flex-direction: row;
+  min-width: 0;
 }
 
 .pankow-input-group > * {

package/components/MainLayout.vue

@@ -31,6 +31,7 @@ const props = defineProps({
 .pankow-main-layout-outer {
   width: 100%;
   height: 100%;
+  min-width: 0;
 }
 
 .pankow-main-layout-container {
@@ -39,6 +40,7 @@ const props = defineProps({
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
+  min-width: 0;
 }
 
 .pankow-main-layout-header {
@@ -48,8 +50,10 @@ const props = defineProps({
 .pankow-main-layout-body {
   width: 100%;
   flex-grow: 1;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   min-height: 2em;
+  min-width: 0;
 }
 
 .pankow-main-layout-footer {

package/components/MultiSelect.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Number,
     default: Infinity,
   },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  },
 });
 
 const emits = defineEmits(['select', 'close']);
@@ -167,7 +171,7 @@ onMounted(() => {
 
     <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onClose" :search-threshold="searchThreshold"></Menu>
     {{ buttonLabel }}
-    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+    <Icon v-show="showDropdown" icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>
 </template>
 

package/components/SingleSelect.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: Number,
     default: Infinity,
   },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  },
 });
 
 const emits = defineEmits(['select', 'close']);
@@ -181,10 +185,10 @@ watchEffect(handleDefaultSelect);
 
     <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onClose"/>
     <span class="pankow-singleselect-label">
-      <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
-      {{ selected ? selected[optionLabel] : placeholder }}
+      <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" class="pankow-singleselect-label-icon" />
+      <span class="pankow-singleselect-label-text">{{ selected ? selected[optionLabel] : placeholder }}</span>
     </span>
-    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+    <Icon v-show="showDropdown" icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>
 </template>
 
@@ -208,8 +212,8 @@ watchEffect(handleDefaultSelect);
   text-decoration: none;
   cursor: pointer;
   transition: background-color 250ms;
-  min-width: 100px;
-  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
 }
 
@@ -235,8 +239,29 @@ watchEffect(handleDefaultSelect);
 }
 
 .pankow-singleselect-label {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-align: start;
+}
+
+.pankow-singleselect-label-icon {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.pankow-singleselect-label-text {
+  min-width: 0;
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pankow-singleselect > .pankow-button-icon-right-with-text {
+  flex-shrink: 0;
 }
 
 </style>

package/components/SplitLayout.vue

@@ -0,0 +1,162 @@
+<script setup>
+import { ref, computed, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
+
+const props = defineProps({
+    leftWidth: {
+        type: Number,
+        default: 50
+    },
+    minLeftWidth: {
+        type: Number,
+        default: 20
+    },
+    minRightWidth: {
+        type: Number,
+        default: 20
+    }
+});
+
+const emit = defineEmits(['update:leftWidth']);
+
+const containerRef = useTemplateRef('container');
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartWidth = ref(0);
+const currentLeftWidth = ref(props.leftWidth);
+
+watch(() => props.leftWidth, (val) => {
+    if (!isDragging.value) {
+        currentLeftWidth.value = val;
+    }
+});
+
+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';
+    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));
+}
+
+function stopDrag() {
+    if (!isDragging.value) return;
+    isDragging.value = false;
+    document.body.style.cursor = '';
+    document.body.style.userSelect = '';
+    emit('update:leftWidth', Math.round(currentLeftWidth.value));
+}
+
+onMounted(() => {
+    document.addEventListener('mousemove', onDrag);
+    document.addEventListener('mouseup', stopDrag);
+    document.addEventListener('touchmove', onDrag, { passive: false });
+    document.addEventListener('touchend', stopDrag);
+});
+
+onUnmounted(() => {
+    document.removeEventListener('mousemove', onDrag);
+    document.removeEventListener('mouseup', stopDrag);
+    document.removeEventListener('touchmove', onDrag);
+    document.removeEventListener('touchend', stopDrag);
+});
+
+const leftStyle = computed(() => ({
+    flex: `0 0 ${currentLeftWidth.value}%`,
+    maxWidth: `${currentLeftWidth.value}%`
+}));
+</script>
+
+<template>
+    <div ref="container" class="pankow-split-layout" :class="{ 'pankow-split-layout-dragging': isDragging }">
+        <div class="pankow-split-layout-left" :style="leftStyle">
+            <slot name="left" />
+        </div>
+        <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">
+            <slot name="right" />
+        </div>
+    </div>
+</template>
+
+<style>
+.pankow-split-layout {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.pankow-split-layout-left {
+    height: 100%;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.pankow-split-layout-divider {
+    width: 6px;
+    cursor: col-resize;
+    background: transparent;
+    position: relative;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pankow-split-layout-divider:hover,
+.pankow-split-layout-dragging .pankow-split-layout-divider {
+    background: var(--pankow-input-border-color);
+}
+
+.pankow-split-layout-handle {
+    position: absolute;
+    top: 50%;
+    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-divider:hover .pankow-split-layout-handle,
+.pankow-split-layout-dragging .pankow-split-layout-handle {
+    opacity: 0.5;
+}
+
+.pankow-split-layout-handle span {
+    display: block;
+    width: 2px;
+    height: 16px;
+    border-radius: 1px;
+    background: var(--pankow-color-text);
+}
+
+.pankow-split-layout-right {
+    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 {
+    pointer-events: none;
+}
+</style>

package/components/TableView.vue

@@ -174,7 +174,6 @@ onMounted(() => {
   font-size: 14px;
   padding: 5px;
   user-select: none;
-  border-bottom: 1px solid var(--pankow-color-light-dark);
   white-space: nowrap;
   font-weight: var(--pankow-font-weight-bold);
 }

package/components/TopBar.vue

@@ -45,24 +45,28 @@ const props = defineProps({
   display: flex;
   justify-content: space-between;
   padding: 5px 10px;
+  min-width: 0;
 }
 
 .pankow-top-bar-left {
   display: flex;
   margin: auto 0px;
   align-items: center;
+  min-width: 0;
 }
 
 .pankow-top-bar-center {
   display: flex;
   margin: auto 0px;
   align-items: center;
+  min-width: 0;
 }
 
 .pankow-top-bar-right {
   display: flex;
   margin: auto 0px;
   align-items: center;
+  min-width: 0;
 }
 
 .pankow-top-bar-grow {

package/fetcher.js

@@ -5,6 +5,18 @@ const globalOptions = {
     errorHook: null,
 };
 
+/**
+ * Low-level HTTP helper. `options` is merged into the native `fetch()` init object
+ * (after {@link globalOptions}), so you may pass e.g. `{ signal: abortController.signal }`
+ * to cancel the request.
+ *
+ * @param {string} uri
+ * @param {string} method
+ * @param {Object} headers
+ * @param {Object} query  Plain key/value map serialized as the URL query string
+ * @param {Object|FormData|null} body
+ * @param {RequestInit} [options]  Extra fetch options; `signal` is supported for cancellation
+ */
 async function request(uri, method, headers, query, body, options) {
     let response, responseBody;
 
@@ -52,22 +64,27 @@ async function request(uri, method, headers, query, body, options) {
     return { status: response.status, body: responseBody };
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function head(uri, query = {}, options = {}) {
     return await request(uri, 'HEAD', {}, query, null, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function get(uri, query = {}, options = {}) {
     return await request(uri, 'GET', {}, query, null, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function post(uri, body, query = {}, options = {}) {
     return await request(uri, 'POST', {}, query, body, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function put(uri, body, query = {}, options = {}) {
     return await request(uri, 'PUT', {}, query, body, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function del(uri, body, query = {}, options = {}) {
     return await request(uri, 'DELETE', {}, query, body, options);
 }

package/index.js

@@ -36,6 +36,7 @@ import Popover from './components/Popover.vue';
 import ProgressBar from './components/ProgressBar.vue';
 import Radiobutton from './components/Radiobutton.vue';
 import SideBar from './components/SideBar.vue';
+import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
 import Switch from './components/Switch.vue';
 import TableView from './components/TableView.vue';
@@ -85,6 +86,7 @@ export {
     ProgressBar,
     Radiobutton,
     SideBar,
+    SplitLayout,
     Spinner,
     Switch,
     TableView,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.1.15",
+  "version": "4.2.1",
   "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.6",
+    "@vitejs/plugin-vue": "^6.0.7",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6"
+    "vite": "^8.0.16",
+    "vue": "^3.5.38",
+    "vue-router": "^5.1.0"
   }
 }

package/types/fetcher.d.ts

@@ -13,23 +13,28 @@ declare namespace globalOptions {
     let redirect: string;
     let errorHook: null;
 }
-declare function head(uri: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function head(uri: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function get(uri: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function get(uri: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function post(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function post(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function put(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function put(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function del(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function del(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;

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, 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, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils };