refactor: convert CommonBlurhash to Vue SFC file (#795)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

components/common/CommonBlurhash.ts

@@ -1,45 +0,0 @@
-import { decode } from 'blurhash'
-
-export default defineComponent({
-  inheritAttrs: false,
-  props: {
-    blurhash: {
-      type: String,
-      required: true,
-    },
-    src: {
-      type: String,
-      required: true,
-    },
-    srcset: {
-      type: String,
-      required: false,
-    },
-  },
-  setup(props, { attrs }) {
-    const placeholderSrc = ref<string>()
-    const isLoaded = ref(false)
-
-    onMounted(() => {
-      const img = document.createElement('img')
-      img.onload = () => {
-        isLoaded.value = true
-      }
-      img.src = props.src
-      if (props.srcset)
-        img.srcset = props.srcset
-      setTimeout(() => {
-        isLoaded.value = true
-      }, 3_000)
-
-      if (props.blurhash) {
-        const pixels = decode(props.blurhash, 32, 32)
-        placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
-      }
-    })
-
-    return () => isLoaded.value || !placeholderSrc.value
-      ? h('img', { ...attrs, src: props.src, srcset: props.srcset })
-      : h('img', { ...attrs, src: placeholderSrc.value })
-  },
-})

components/common/CommonBlurhash.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { decode } from 'blurhash'
+
+const { blurhash, src, srcset } = defineProps<{
+  blurhash: string
+  src: string
+  srcset?: string
+}>()
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const placeholderSrc = ref<string>()
+const isLoaded = ref(false)
+
+onMounted(() => {
+  const img = document.createElement('img')
+
+  img.onload = () => {
+    isLoaded.value = true
+  }
+
+  img.src = src
+
+  if (srcset)
+    img.srcset = srcset
+
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 3_000)
+
+  if (blurhash) {
+    const pixels = decode(blurhash, 32, 32)
+    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
+  }
+})
+</script>
+
+<template>
+  <img v-if="isLoaded || !placeholderSrc" v-bind="$attrs" :src="src" :srcset="srcset">
+  <img v-else v-bind="$attrs" :src="placeholderSrc">
+</template>