ImagePicker.vue

<template>
  <ImagePreview
    :url="image?.image ?? null"
    class="tw-inline-flex tw-h-64 tw-max-w-full tw-min-w-[320px] tw-bg-gray-700 tw-rounded tw-flex-1"
    v-bind="attrs"
  >
    <div
      class="tw-absolute tw-inset-0 tw-flex tw-items-end tw-text-white tw-bg-gradient-to-b tw-from-0% tw-to-100% tw-from-transparent tw-to-black/80"
    >
      <div v-if="!disabled" class="tw-flex tw-items-stretch tw-m-3 tw-gap-3">
        <button
          type="button"
          class="btn btn-sm tw-text-white tw-backdrop-blur tw-bg-black/30 tw-ring-0 hocus:tw-bg-aura-primary/25"
          @click="showPicker = true"
        >
          <icon-carbon-image-search class="tw-w-6 tw-h-6" />
          {{ t('imagePicker.chooseAnImage') }}
        </button>
        <button
          v-if="modelValue"
          type="button"
          class="btn btn-sm tw-text-white tw-ring-0 hocus:tw-bg-aura-primary/25"
          @click="localImageId = null"
        >
          {{ t('imagePicker.reset') }}
        </button>
      </div>
    </div>
  </ImagePreview>

  <ImagePickerDialog v-model="localImageId" :is-open="showPicker" @show="showPicker = $event" />
</template>

<script lang="ts" setup>
import { computed, ref, useAttrs } from 'vue'
import { useI18n } from '@/i18n'
import { useCopy } from '@/form'
import { useImage } from '@/stores/images'
import ImagePickerDialog from './ImagePickerDialog.vue'
import ImagePreview from './ImagePreview.vue'

const props = defineProps<{
  modelValue: number | null
  disabled?: boolean
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', imageId: number | null): void
}>()
const attrs = useAttrs()
const { t } = useI18n()
const showPicker = ref(false)
const localImageId = useCopy<number | null>(() => props.modelValue, {
  save: (value) => emit('update:modelValue', value),
})
const image = useImage(computed(() => props.modelValue))
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
  compatConfig: {
    MODE: 3,
  },
}
</script>