npm run format

src/components/utilities/Modal.vue

@@ -1,14 +1,14 @@
 <template>
   <Teleport to="body">
-  <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
-    <div class="modal-header" @mousedown="startDrag">
-      <slot name="modal-header"/>
-      <button @click="close"><img src="/assets/icons/close-button-white.svg"></button>
+    <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
+      <div class="modal-header" @mousedown="startDrag">
+        <slot name="modal-header" />
+        <button @click="close"><img src="/assets/icons/close-button-white.svg" /></button>
+      </div>
+      <div class="modal-body">
+        <slot name="modal-body" />
+      </div>
     </div>
-    <div class="modal-body">
-      <slot name="modal-body"/>
-    </div>
-  </div>
   </Teleport>
 </template>
 
@@ -20,64 +20,67 @@ const properties = defineProps({
     type: Boolean,
     default: false
   }
-});
+})
 
-watch(() => properties.isModalOpen, (value) => {
-  isModalOpenRef.value = value;
-});
+watch(
+  () => properties.isModalOpen,
+  (value) => {
+    isModalOpenRef.value = value
+  }
+)
 
-const isModalOpenRef = ref(properties.isModalOpen);
-const emit = defineEmits(["modal:close", "character:create"]);
+const isModalOpenRef = ref(properties.isModalOpen)
+const emit = defineEmits(['modal:close', 'character:create'])
 
-function close () {
-  emit('modal:close');
+function close() {
+  emit('modal:close')
 }
 
 // make modal draggable
-let startX = 0;
-let startY = 0;
-let initialX = 0;
-let initialY = 0;
-const x = ref(0);
-const y = ref(0);
-const isDragging = ref(false);
+let startX = 0
+let startY = 0
+let initialX = 0
+let initialY = 0
+const x = ref(0)
+const y = ref(0)
+const isDragging = ref(false)
 
 // set modal position center of the screen
 onMounted(() => {
-  x.value = (window.innerWidth / 2) - 150;
-  y.value = (window.innerHeight / 2) - 100;
-});
+  x.value = window.innerWidth / 2 - 150
+  y.value = window.innerHeight / 2 - 100
+})
 
 const startDrag = (event: MouseEvent) => {
-  isDragging.value = true;
-  startX = event.clientX;
-  startY = event.clientY;
-  initialX = x.value;
-  initialY = y.value;
-  event.preventDefault();
-};
+  isDragging.value = true
+  startX = event.clientX
+  startY = event.clientY
+  initialX = x.value
+  initialY = y.value
+  event.preventDefault()
+}
 
 const drag = (event: MouseEvent) => {
-  if (!isDragging.value) return;
-  const dx = event.clientX - startX;
-  const dy = event.clientY - startY;
-  x.value = initialX + dx;
-  y.value = initialY + dy;
-};
+  if (!isDragging.value) return
+  const dx = event.clientX - startX
+  const dy = event.clientY - startY
+  x.value = initialX + dx
+  y.value = initialY + dy
+}
 
 const stopDrag = () => {
-  isDragging.value = false;
-};
+  isDragging.value = false
+}
 
 onMounted(() => {
-  addEventListener('mousemove', drag);
-  addEventListener('mouseup', stopDrag);
-});
+  addEventListener('mousemove', drag)
+  addEventListener('mouseup', stopDrag)
+})
 
 onUnmounted(() => {
-  removeEventListener('mousemove', drag);
-  removeEventListener('mouseup', stopDrag);
-});
+  removeEventListener('mousemove', drag)
+  removeEventListener('mouseup', stopDrag)
+})
 </script>
 
 <style lang="scss">
@@ -185,4 +188,4 @@ onUnmounted(() => {
     }
   }
 }
-</style>
+</style>