popup move handle + resize

src/components/ui/BasePopup.vue

@@ -4,7 +4,7 @@
     class="settings-popup"
     :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
-    <div class="popup-header">
+    <div class="popup-header" @mousedown="startDrag">
       <div class="header-left">
         <slot name="header-left" />
       </div>
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onBeforeUnmount } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { usePopupPosition } from '../../composables/usePopupPosition';
 import { initColoris } from '../../composables/useColoris';
@@ -111,6 +111,37 @@ const inheritanceLocked = ref(true);
 
 const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
 
+// Drag handling
+let dragOffset = { x: 0, y: 0 };
+
+const startDrag = (e) => {
+  // Don't drag when clicking the close button
+  if (e.target.closest('.close-btn')) return;
+  dragOffset = {
+    x: e.clientX - position.value.x,
+    y: e.clientY - position.value.y,
+  };
+  document.addEventListener('mousemove', onDrag);
+  document.addEventListener('mouseup', stopDrag);
+};
+
+const onDrag = (e) => {
+  position.value = {
+    x: e.clientX - dragOffset.x,
+    y: e.clientY - dragOffset.y,
+  };
+};
+
+const stopDrag = () => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+};
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onDrag);
+  document.removeEventListener('mouseup', stopDrag);
+});
+
 const highlightedCss = computed(() => {
   if (!props.displayCss) return '';
   return hljs.highlight(props.displayCss, { language: 'css' }).value;