Updated modal bg styles to correct values, started working on map object setting modal

src/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue

@@ -17,7 +17,7 @@
         </button>
       </div>
 
-      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
+      <Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" bg-style="none" @modal:close="closeOffsetModal">
         <template #modalHeader>
           <h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
         </template>

src/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
+  <Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" bg-style="none" @modal:close="closeModal">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
     </template>

src/components/gameMaster/mapEditor/partials/CreateMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="300" :modal-height="420" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Create new map</h3>
     </template>

src/components/gameMaster/mapEditor/partials/MapList.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" :bg-style="'none'">
+  <Modal ref="modalRef" :is-resizable="false" :modal-width="300" :modal-height="360" bg-style="none">
     <template #modalHeader>
       <h3 class="text-lg text-white">Maps</h3>
     </template>

src/components/gameMaster/mapEditor/partials/MapSettings.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" :modal-width="600" :modal-height="430" :bg-style="'none'">
+  <Modal ref="modalRef" :modal-width="600" :modal-height="430" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Map settings</h3>
     </template>

src/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue

@@ -4,17 +4,46 @@
       <button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
         <img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
       </button>
-      <button @mousedown.stop @click="handleDelete" class="btn-indigo py-1.5 px-4">
+      <button @mousedown.stop @click="showMapObjectSettings = true" class="btn-indigo py-1.5 px-4">
         <img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" alt="Delete" />
       </button>
       <button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
       <button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
     </div>
   </div>
+
+  <Modal :is-modal-open="showMapObjectSettings" :modal-height="320" bg-style="none">
+    <template #modalHeader>
+      <h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
+    </template>
+    <template #modalBody>
+      <div class="m-4">
+        <form method="post" @submit.prevent="" class="inline">
+          <div class="gap-2.5 flex flex-wrap">
+            <div class="form-field-full">
+              <label for="name">Name</label>
+              <input class="input-field" v-model="mapObjectName" name="name" id="name" />
+            </div>
+            <div class="form-field-half">
+              <label for="originX">Origin X</label>
+              <input class="input-field" v-model="mapObjectOriginX" name="originX" id="originX" type="number" />
+            </div>
+            <div class="form-field-half">
+              <label for="originY">Origin Y</label>
+              <input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" />
+            </div>
+          </div>
+          <button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
+        </form>
+      </div>
+    </template>
+  </Modal>
 </template>
 
 <script setup lang="ts">
 import type { Map as MapT, PlacedMapObject } from '@/application/types'
+import Modal from '@/components/utilities/Modal.vue'
+import { ref } from 'vue'
 
 const props = defineProps<{
   placedMapObject: PlacedMapObject
@@ -23,6 +52,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['move', 'rotate', 'delete'])
 
+const showMapObjectSettings = ref(false)
+const mapObjectName = ref('')
+const mapObjectOriginX = ref(0)
+const mapObjectOriginY = ref(0)
+
 const handleMove = () => {
   emit('move', props.placedMapObject.id, props.map)
 }

src/components/gameMaster/mapEditor/partials/TeleportModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" :bg-style="'none'">
+  <Modal ref="modalRef" @modal:close="() => mapEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false" bg-style="none">
     <template #modalHeader>
       <h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
     </template>