@cloudron/pankow 4.4.1 → 4.4.2

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/package.json

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