refactor inputimage to use src only

src/components/InputImage.vue

@@ -17,19 +17,19 @@ import type { EditingRow } from 'src/types/editing'
 
 const store = useAppStore()
 
+const props = defineProps<{
+  src: string
+}>()
 const emit = defineEmits<{
   (e: 'saved', val: string): void
   (e: 'canceled'): void
 }>()
-const row = defineModel<EditingRow | null>('row')
 const filePath = ref(store.currentInventory.filePath.replace('.json', '/'))
 const currentSrc = ref('')
 const renderedSrc = computed(() => {
   return currentSrc.value
     ? currentSrc.value
-    : !!row.value && !!row.value.data[row.value.field] && !!(row.value.data[row.value.field]).src
+    : props.src
-      ? (row.value.data[row.value.field]).src
-      : ''
 })
 const currentBlob = ref<Blob>()
 
@@ -54,12 +54,6 @@ const onBrowseForImage = async (e: Event) => {
   }
 }
 
-const onCancel = (e: Event) => {
-  e.preventDefault()
-  emit('canceled')
-  reset()
-}
-
 function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void, outputFormat: string) {
   const image = new Image()
   image.onload = function() {
@@ -76,16 +70,15 @@ function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void,
   image.src = url
 }
 
-const reset = () => {
+const onCancel = (e: Event) => {
-  row.value = null
+  e.preventDefault()
-  currentSrc.value = ''
+  emit('canceled')
 }
 
 const onSave = async (e: Event) => {
   e.preventDefault()
   convertToDataUrlViaCanvas(currentSrc.value, (val) => {
     emit('saved', val)
-    reset()
   }, currentBlob.value!.type)
 }
 </script>

src/views/Editor/DataEditor.vue

@@ -39,6 +39,11 @@ const editingRows = ref<DataRow[]>([])
 const expandedRows = ref<DataRow[]>([])
 const editingImage = ref(false)
 const editingImageRow = ref(null as EditingRow | null)
+const editingImageSrc = computed(() => (
+  editingImageRow.value && !!editingImageRow.value.data[editingImageRow.value.field] && !!(editingImageRow.value.data[editingImageRow.value.field]).src
+    ? (editingImageRow.value.data[editingImageRow.value.field]).src
+    : ''
+))
 const editingRow = ref(false)
 const editingRowData = ref(null as EditingRow | null)
 const columnsByKey = computed(() => Object.assign({}, ...props.columns.map(c => ({[c.name]: c}))))
@@ -145,7 +150,7 @@ Dialog(
   header='Edit Image'
 )
   InputImage(
-    v-model:row='editingImageRow'
+    :src='editingImageSrc'
     @saved='onSaveImage'
     @canceled='onCancelImage'
   )