feat(SPA): media field type

web/src/composables/useEntryForm.ts

@@ -1,8 +1,10 @@
 import { computed, ref } from 'vue'
 import type { BuiltinField, ContentEntry } from '@/lib/contentTypes'
+import type { MediaMap, MediaSummary } from '@/lib/mediaField'
 import {
 	carriesDefault,
 	firstIssueKey,
+	initialImages,
 	initialValues,
 	valuesDiffer,
 	type EntryIssues,
@@ -13,6 +15,7 @@ import {
 export function useEntryForm(fields: () => BuiltinField[], creating: () => boolean) {
 	const values = ref<EntryValues>({})
 	const saved = ref<EntryValues>({})
+	const images = ref<MediaMap>({})
 	const issues = ref<EntryIssues>({})
 	const rejected = ref(false)
 
@@ -24,12 +27,27 @@ export function useEntryForm(fields: () => BuiltinField[], creating: () => boole
 		const next = initialValues(fields(), entry)
 		values.value = { ...next }
 		saved.value = { ...next }
+		images.value = initialImages(fields(), entry)
 		issues.value = {}
 		rejected.value = false
 	}
 
-	function setValue(key: string, value: unknown) {
+	function setImage(key: string, image: MediaSummary | null | undefined) {
+		if (image === undefined) {
+			return
+		}
+		const next = { ...images.value }
+		if (image === null) {
+			delete next[key]
+		} else {
+			next[key] = image
+		}
+		images.value = next
+	}
+
+	function setValue(key: string, value: unknown, image?: MediaSummary | null) {
 		values.value = { ...values.value, [key]: value }
+		setImage(key, image)
 		rejected.value = false
 		if (issues.value[key]) {
 			const rest = { ...issues.value }
@@ -53,6 +71,7 @@ export function useEntryForm(fields: () => BuiltinField[], creating: () => boole
 
 	return {
 		values,
+		images,
 		issues,
 		rejected,
 		dirty,