MetaImages.vue

<template>
  <FormGroup
    :label="t('showMeta.logo')"
    :errors="logoId.errors"
    :is-saving="logoId.isSaving"
    custom-control
  >
    <template #default="attrs">
      <div>
        <ImagePicker v-model="logoId.value" v-bind="attrs" />
      </div>
    </template>
  </FormGroup>

  <FormGroup
    :label="t('showMeta.image')"
    :errors="imageId.errors"
    :is-saving="imageId.isSaving"
    custom-control
  >
    <template #default="attrs">
      <div>
        <ImagePicker v-model="imageId.value" v-bind="attrs" />
      </div>
    </template>
  </FormGroup>
</template>

<script lang="ts" setup>
import { useI18n } from '@/i18n'
import { useShowStore } from '@/stores'
import { Show } from '@/types'
import ImagePicker from '@/components/images/ImagePicker.vue'
import FormGroup from '@/components/generic/FormGroup.vue'
import { useAPIObjectFieldCopy } from '@/form'

const props = defineProps<{
  show: Show
}>()

const showStore = useShowStore()
const { t } = useI18n()
const logoId = useAPIObjectFieldCopy(showStore, () => props.show, 'logoId', { debounce: 0 })
const imageId = useAPIObjectFieldCopy(showStore, () => props.show, 'imageId', { debounce: 0 })
</script>