fix(docs): fix badge component (#2238)

site/docs/.vuepress/client.js

@@ -1,7 +1,9 @@
-import { defineClientConfig } from "@vuepress/client";
-import { usePageData } from "@vuepress/client";
 import oldContributorsData from "./oldContributorsData.json";
 
+import { usePageData } from "@vuepress/client";
+import { defineClientConfig } from "@vuepress/client";
+import CountTo from "vue-count-to/src/vue-countTo.vue";
+
 const addOldDocsContributors = () => {
   const page = usePageData();
   if (!page.value.git) return;
@@ -33,13 +35,18 @@ const addOldDocsContributors = () => {
 };
 
 export default defineClientConfig({
-  enhance({ router }) {
+  enhance({ router, app }) {
+    // register global components
+    app.component("CountTo", CountTo);
+
+    // add old docs contributors
     router.afterEach((to, from) => {
       if (to.fullPath !== from.fullPath) {
         addOldDocsContributors();
       }
     });
 
+    // baidu analytics
     router.beforeEach((to, from, next) => {
       if (typeof _hmt != "undefined") {
         if (to.path && to.fullPath !== from.fullPath) {

site/docs/.vuepress/config.js

@@ -113,7 +113,6 @@ module.exports = {
     }),
     activeHeaderLinksPlugin({
       headerLinkSelector: "div.right-menu-item > a",
-      delay: 0,
     }),
     docsearchPlugin({
       apiKey: "30c521836bfc8e97915576e11ac2cebc",

site/docs/.vuepress/styles/index.scss

@@ -1,5 +1,6 @@
 :root {
   --sidebar-width: 17rem;
+  scroll-behavior: smooth;
 }
 
 .site-name.can-hide {

site/docs/.vuepress/theme/components/Badge.vue

@@ -2,13 +2,12 @@
   <a class="my-badge" :href="URL" target="_blank">
     <component :is="comp" />
     &nbsp;
-    <span>{{ number }}</span>
+    <CountTo :startVal="0" :endVal="data" :duration="500" />
   </a>
 </template>
 
 <script setup>
 import { useThemeLocaleData } from "@vuepress/theme-default/lib/client/composables";
-import { ref } from "vue";
 
 const props = defineProps({
   comp: {
@@ -21,17 +20,6 @@ const props = defineProps({
   },
 });
 
-const number = ref(0);
-
-// add number to number until number is equal to data
-var t = setInterval(() => {
-  number.value += 234;
-  if (number.value >= props.data) {
-    number.value = props.data;
-    clearInterval(t);
-  }
-}, 1);
-
 const themeData = useThemeLocaleData();
 const repoURL = `https://github.com/${themeData.value.repo}`;
 const repoStarsURL = repoURL;

site/docs/.vuepress/theme/components/RightMenu.vue

@@ -63,7 +63,7 @@ watch(useRoute(), () => {
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 $rightMenuWidth: 230px;
 
 .theme-default-content {

site/package-lock.json

@@ -10,6 +10,7 @@
       "license": "ISC",
       "dependencies": {
         "node-fetch": "^2.6.7",
+        "vue-count-to": "^1.0.13",
         "xml-js": "^1.6.11"
       },
       "devDependencies": {
@@ -3036,6 +3037,11 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "node_modules/vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "node_modules/vue-demi": {
       "version": "0.13.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",
@@ -5435,6 +5441,11 @@
         "@vue/shared": "3.2.37"
       }
     },
+    "vue-count-to": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/vue-count-to/-/vue-count-to-1.0.13.tgz",
+      "integrity": "sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ=="
+    },
     "vue-demi": {
       "version": "0.13.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.6.tgz",

site/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "node-fetch": "^2.6.7",
+    "vue-count-to": "^1.0.13",
     "xml-js": "^1.6.11"
   }
 }