From 31ee71c0d1acacb186e20c969d75c26d0ea0d347 Mon Sep 17 00:00:00 2001
From: Shinigami <chrissi92@hotmail.de>
Date: Thu, 5 Jan 2023 13:38:22 +0100
Subject: [PATCH] refactor: convert CommonBlurhash to Vue SFC file (#795)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>
---
 components/common/CommonBlurhash.ts  | 45 ----------------------------
 components/common/CommonBlurhash.vue | 43 ++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 45 deletions(-)
 delete mode 100644 components/common/CommonBlurhash.ts
 create mode 100644 components/common/CommonBlurhash.vue

diff --git a/components/common/CommonBlurhash.ts b/components/common/CommonBlurhash.ts
deleted file mode 100644
index 7f8bcff2..00000000
--- a/components/common/CommonBlurhash.ts
+++ /dev/null
@@ -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 })
-  },
-})
diff --git a/components/common/CommonBlurhash.vue b/components/common/CommonBlurhash.vue
new file mode 100644
index 00000000..4602a1b8
--- /dev/null
+++ b/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>