From b64daa5a58c9c458d7e8e60258d844ccabd4e4aa Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 31 Dec 2022 20:36:49 +0900
Subject: :art:

---
 packages/frontend/src/components/MkNumber.vue | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 packages/frontend/src/components/MkNumber.vue

(limited to 'packages/frontend/src/components/MkNumber.vue')

diff --git a/packages/frontend/src/components/MkNumber.vue b/packages/frontend/src/components/MkNumber.vue
new file mode 100644
index 0000000000..f54ec764f9
--- /dev/null
+++ b/packages/frontend/src/components/MkNumber.vue
@@ -0,0 +1,23 @@
+<template>
+<span>{{ number(tweened.number.toFixed(0)) }}</span>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue';
+import gsap from 'gsap';
+import number from '@/filters/number';
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const tweened = reactive({
+	number: 0,
+});
+
+watch(() => props.value, (n) => {
+	gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 });
+}, {
+	immediate: true,
+});
+</script>
-- 
cgit v1.2.3-freya