typo fix

src/components/utilities/assetManager/partials/sprite/SpriteDetails.vue

@@ -63,7 +63,6 @@
               <input v-model.number="action.frameHeight" class="input-cyan" type="number" step="any" name="frame-height" placeholder="Frame height" />
             </div>
             <div class="w-full flex mb-5 gap-2">
-<!--              Component with images in base64 format, ordered -->
               <SpriteActionsInput v-model="action.images" />
             </div>
           </form>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap gap-3">
     <div v-for="(image, index) in images" :key="image.id" class="min-h-24 min-w-24 p-3 bg-gray-50 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
-      <img :src="image.base64" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
+      <img :src="image.url || image.base64" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
       <button @click.stop="deleteImage(image.id)" class="absolute top-1 right-1 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -19,14 +19,10 @@
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
-
-interface ImageItem {
-  id: string
-  base64: string
-}
+import type { SpriteActionImage } from '@/types'
 
 interface Props {
-  modelValue: ImageItem[]
+  modelValue: SpriteActionImage[]
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,10 +30,10 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: ImageItem[]): void
+  (e: 'update:modelValue', value: SpriteActionImage[]): void
 }>()
 
-const images = ref<ImageItem[]>(props.modelValue)
+const images = ref<SpriteActionImage[]>(props.modelValue)
 const fileInput = ref<HTMLInputElement | null>(null)
 const draggedIndex = ref<number | null>(null)
 
@@ -72,9 +68,11 @@ const handleFiles = (files: FileList) => {
       const reader = new FileReader()
       reader.onload = (e) => {
         if (typeof e.target?.result === 'string') {
-          const newImage: ImageItem = {
+          const newImage: SpriteActionImage = {
             id: Date.now().toString() + Math.random().toString(36).substring(2, 15),
-            base64: e.target.result
+            base64: e.target.result,
+            url: '',
+            file: file
           }
           updateImages([...images.value, newImage])
         }
@@ -84,7 +82,7 @@ const handleFiles = (files: FileList) => {
   })
 }
 
-const updateImages = (newImages: ImageItem[]) => {
+const updateImages = (newImages: SpriteActionImage[]) => {
   images.value = newImages
   emit('update:modelValue', newImages)
 }

src/types.ts

@@ -152,7 +152,7 @@ export type Sprite = {
   name: string
   createdAt: Date
   updatedAt: Date
-  spriteActions: spriteAction[]
+  spriteActions: SpriteAction[]
   characterTypes: CharacterType[]
 }