feat: show view size while dragging split pane

src/SplitPane.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, inject, reactive, ref, toRef } from 'vue'
+import { computed, inject, reactive, ref, toRef, onMounted } from 'vue'
 import { injectKeyStore } from './types'
 
 const props = defineProps<{ layout?: 'horizontal' | 'vertical' }>()
 const isVertical = computed(() => props.layout === 'vertical')
 
 const container = ref()
+const rightView = ref()
 
 // mobile only
 const store = inject(injectKeyStore)!
@@ -14,6 +15,8 @@ const showOutput = toRef(store, 'showOutput')
 const state = reactive({
   dragging: false,
   split: 50,
+  viewHeight: 0,
+  viewWidth: 0,
 })
 
 const boundSplit = computed(() => {
@@ -38,12 +41,20 @@ function dragMove(e: MouseEvent) {
       : container.value.offsetWidth
     const dp = position - startPosition
     state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
+
+    state.viewHeight = rightView.value.offsetHeight - 38
+    state.viewWidth = rightView.value.offsetWidth
   }
 }
 
 function dragEnd() {
   state.dragging = false
 }
+
+onMounted(() => {
+  state.viewHeight = rightView.value.offsetHeight - 38
+  state.viewWidth = rightView.value.offsetWidth
+})
 </script>
 
 <template>
@@ -67,9 +78,13 @@ function dragEnd() {
       <div class="dragger" @mousedown.prevent="dragStart" />
     </div>
     <div
+      ref="rightView"
       class="right"
       :style="{ [isVertical ? 'height' : 'width']: 100 - boundSplit + '%' }"
     >
+      <div class="view-size" v-show="state.dragging">
+        {{ `${state.viewWidth}px x ${state.viewHeight}px` }}
+      </div>
       <slot name="right" />
     </div>
 
@@ -97,6 +112,14 @@ function dragEnd() {
   position: relative;
   height: 100%;
 }
+.view-size {
+  position: absolute;
+  top: 40px;
+  left: 10px;
+  font-size: 12px;
+  color: var(--text-light);
+  z-index: 100;
+}
 .left {
   border-right: 1px solid var(--border);
 }