fix: type errors (#802)

components/common/CommonBlurhash.vue

@@ -2,7 +2,7 @@
 import { decode } from 'blurhash'
 
 const { blurhash, src, srcset } = defineProps<{
-  blurhash: string
+  blurhash?: string | null | undefined
   src: string
   srcset?: string
 }>()
@@ -11,8 +11,13 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const placeholderSrc = ref<string>()
 const isLoaded = ref(false)
+const placeholderSrc = $computed(() => {
+  if (!blurhash)
+    return ''
+  const pixels = decode(blurhash, 32, 32)
+  return getDataUrlFromArr(pixels, 32, 32)
+})
 
 onMounted(() => {
   const img = document.createElement('img')
@@ -29,11 +34,6 @@ onMounted(() => {
   setTimeout(() => {
     isLoaded.value = true
   }, 3_000)
-
-  if (blurhash) {
-    const pixels = decode(blurhash, 32, 32)
-    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
-  }
 })
 </script>
 

components/common/CommonCropImage.vue

@@ -5,7 +5,7 @@ import 'vue-advanced-cropper/dist/style.css'
 
 export interface Props {
   /** Images to be cropped */
-  modelValue?: File
+  modelValue?: File | null
   /** Crop frame aspect ratio (width/height), default 1/1 */
   stencilAspectRatio?: number
   /** The ratio of the longest edge of the cut box to the length of the cut screen, default 0.9, not more than 1 */

components/common/CommonInputImage.vue

@@ -3,7 +3,7 @@ import { fileOpen } from 'browser-fs-access'
 import type { FileWithHandle } from 'browser-fs-access'
 
 const props = withDefaults(defineProps<{
-  modelValue?: FileWithHandle
+  modelValue?: FileWithHandle | null
   /** The image src before change */
   original?: string
   /** Allowed file types */