23

draggable-panels/src/fauto/components/Resizer.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (e: 'resize', delta: number): void
+}>()
+
+const isDragging = ref(false)
+const startX = ref(0)
+
+const onMouseDown = (e: MouseEvent) => {
+  isDragging.value = true
+  startX.value = e.clientX
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+  document.body.style.cursor = 'col-resize'
+  document.body.style.userSelect = 'none'
+}
+
+const onMouseMove = (e: MouseEvent) => {
+  if (!isDragging.value) return
+  const delta = e.clientX - startX.value
+  startX.value = e.clientX
+  emit('resize', delta)
+}
+
+const onMouseUp = () => {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.body.style.cursor = ''
+  document.body.style.userSelect = ''
+}
+</script>
+
+<template>
+  <div 
+    class="resizer" 
+    :class="{ dragging: isDragging }"
+    @mousedown="onMouseDown"
+  ></div>
+</template>
+
+<style scoped>
+.resizer {
+  width: 4px;
+  background: #181818;
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: background 0.2s;
+}
+
+.resizer:hover,
+.resizer.dragging {
+  background: #007acc;
+}
+</style>