refactor: migrate to nuxt compatibilityVersion: 4 (#3298)

components/common/CommonInputImage.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import type { FileWithHandle } from 'browser-fs-access'
-import { fileOpen } from 'browser-fs-access'
-
-const {
-  original,
-  allowedFileTypes = ['image/jpeg', 'image/png'],
-  allowedFileSize = 1024 * 1024 * 5, // 5 MB
-} = defineProps<{
-  /** The image src before change */
-  original?: string
-  /** Allowed file types */
-  allowedFileTypes?: string[]
-  /** Allowed file size */
-  allowedFileSize?: number
-  imgClass?: string
-  loading?: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: 'pick', value: FileWithHandle): void
-  (event: 'error', code: number, message: string): void
-}>()
-
-const file = defineModel<FileWithHandle | null>()
-
-const { t } = useI18n()
-
-const defaultImage = computed(() => original || '')
-/** Preview of selected images */
-const previewImage = ref('')
-/** The current images on display */
-const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
-
-async function pickImage() {
-  if (import.meta.server)
-    return
-  const image = await fileOpen({
-    description: 'Image',
-    mimeTypes: allowedFileTypes,
-  })
-
-  if (!allowedFileTypes.includes(image.type)) {
-    emit('error', 1, t('error.unsupported_file_format'))
-    return
-  }
-  else if (image.size > allowedFileSize) {
-    emit('error', 2, t('error.file_size_cannot_exceed_n_mb', [5]))
-    return
-  }
-
-  file.value = image
-  emit('pick', file.value)
-}
-
-watch(file, (image, _, onCleanup) => {
-  let expired = false
-  onCleanup(() => expired = true)
-
-  if (!image) {
-    previewImage.value = ''
-    return
-  }
-  const reader = new FileReader()
-  reader.readAsDataURL(image)
-  reader.onload = (evt) => {
-    if (expired)
-      return
-    previewImage.value = evt.target?.result as string
-  }
-})
-</script>
-
-<template>
-  <label
-    class="bg-slate-500/10 focus-within:(outline outline-primary)"
-    relative
-    flex justify-center items-center
-    cursor-pointer
-    of-hidden
-    @click="pickImage"
-  >
-    <img
-      v-if="imageSrc"
-      :src="imageSrc"
-      :class="imgClass || ''"
-      object-cover
-      w-full
-      h-full
-    >
-    <span absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
-      <span block i-ri:upload-line />
-    </span>
-
-    <span
-      v-if="loading"
-      absolute inset-0
-      bg="black/30" text-white
-      flex justify-center items-center
-    >
-      <span class="animate-spin animate-duration-[2.5s] preserve-3d">
-        <span block i-ri:loader-4-line text-4xl />
-      </span>
-    </span>
-  </label>
-</template>