feat: image variants per image

web/src/components/MediaPicker.vue

@@ -4,7 +4,9 @@ import { t } from '@/i18n'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
 import MediaThumb from '@/components/MediaThumb.vue'
+import VariantPickerField from '@/components/variants/VariantPickerField.vue'
 import type { LibraryStatus } from '@/composables/useLibraryList'
+import type { ImageVariant } from '@/composables/useImageVariants'
 import type { MediaItem } from '@/composables/useMedia'
 import { accessibleName, formatDimensions, formatSize } from '@/lib/mediaFormat'
 
@@ -34,6 +36,8 @@ const props = defineProps<{
 	firstNewId: number | null
 	inArticleIds: number[]
 	selected: MediaItem | null
+	variants?: ImageVariant[]
+	variantsReady?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -45,6 +49,7 @@ const emit = defineEmits<{
 }>()
 
 const alt = defineModel<string>('alt', { default: '' })
+const variant = defineModel<string>('variant', { default: '' })
 
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const grid = ref<HTMLElement | null>(null)
@@ -323,6 +328,12 @@ onBeforeUnmount(clearDebounce)
 					>
 				</div>
 			</div>
+			<VariantPickerField
+				v-model:variant="variant"
+				:image="selected"
+				:variants="variants ?? []"
+				:ready="variantsReady ?? false"
+			/>
 			<UFormField
 				:label="t('Alt text (optional)')"
 				help="Describes the image for people who use a screen reader, and shows if it doesn't load. Leave it empty if the image is only decoration."