[O] Upgrade Dependencies

.eslintrc-auto-import.json

@@ -63,6 +63,13 @@
     "ExtractDefaultPropTypes": true,
     "ExtractPropTypes": true,
     "ExtractPublicPropTypes": true,
-    "WritableComputedRef": true
+    "WritableComputedRef": true,
+    "DirectiveBinding": true,
+    "MaybeRef": true,
+    "MaybeRefOrGetter": true,
+    "onWatcherCleanup": true,
+    "useId": true,
+    "useModel": true,
+    "useTemplateRef": true
   }
 }

package.json

@@ -6,63 +6,63 @@
   "scripts": {
     "dev": "vite",
     "serve": "vite",
-    "build": "vue-tsc --noEmit && yarn lint && vite build",
+    "build": "yarn lint && vite build",
     "gen-meta": "node --no-warnings --loader ts-node/esm/transpile-only tools/gen_meta.ts",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "preview": "vite preview"
   },
   "dependencies": {
     "@andreekeberg/imagedata": "^1.0.2",
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@vuepic/vue-datepicker": "^9.0.3",
+    "@fortawesome/fontawesome-free": "^6.7.1",
+    "@vuepic/vue-datepicker": "^10.0.0",
     "blurhash": "^2.0.5",
-    "element-plus": "^2.7.1",
-    "katex": "^0.16.10",
+    "element-plus": "^2.9.0",
+    "katex": "^0.16.15",
     "lxgw-wenkai-webfont": "^1.7.0",
     "moment": "^2.30.1",
-    "sweetalert2": "11.10.8",
-    "tg-blog": "1.1.7",
+    "sweetalert2": "^11.14.5",
+    "tg-blog": "^1.1.7",
     "url-join": "^5.0.0",
     "uwufier": "^1.1.0",
-    "uwuifier": "^4.0.5",
-    "vue": "^3.4.23",
-    "vue-router": "^4.3.2"
+    "uwuifier": "^4.2.2",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@iconify-json/ep": "^1.1.15",
-    "@iconify-json/fa6-solid": "^1.1.21",
-    "@iconify/vue": "^4.1.2",
+    "@iconify-json/ep": "^1.2.1",
+    "@iconify-json/fa6-solid": "^1.2.2",
+    "@iconify/vue": "^4.2.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/gtag.js": "^0.0.19",
-    "@types/katex": "^0",
-    "@types/marked": "^4.3.2",
-    "@types/node": "^20.12.7",
+    "@types/gtag.js": "^0.0.20",
+    "@types/katex": "^0.16.7",
+    "@types/marked": "^6.0.0",
+    "@types/node": "^22.10.2",
     "@types/url-join": "^4.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "autocorrect-node": "^2.9.0",
+    "autocorrect-node": "^2.13.0",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.25.0",
-    "finalhandler": "^1.2.0",
+    "finalhandler": "^1.3.1",
     "fs-extra": "^11.2.0",
     "html-to-text": "^9.0.5",
     "http-terminator": "^3.2.0",
     "markdown-yaml-metadata-parser": "^3.0.0",
-    "marked": "^4.3.0",
-    "puppeteer": "^22.6.5",
+    "marked": "^15.0.3",
+    "puppeteer": "^23.10.3",
     "replace-in-files": "^3.0.0",
-    "sass": "^1.75.0",
-    "serve-static": "^1.15.0",
-    "subset-font": "^2.3.0",
+    "sass": "^1.82.0",
+    "serve-static": "^1.16.2",
+    "subset-font": "^2.4.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-icons": "^0.18.5",
-    "unplugin-vue-components": "^0.26.0",
-    "vite": "^5.2.10",
+    "unplugin-auto-import": "^0.18.6",
+    "unplugin-icons": "^0.21.0",
+    "unplugin-vue-components": "^0.27.5",
+    "vite": "^5.4.10",
     "vue-facing-decorator": "^3.0.4",
     "vue-tsc": "^2.0.14"
   }

src/App.vue

@@ -74,22 +74,22 @@ export default class App extends Vue {
 
 <!-- Global Style -->
 <style lang="sass">
-@import "css/animations"
-@import "css/global"
-@import "css/fonts/font-custom.scss"
-@import "css/fonts/BackIcon.css"
-@import "css/colors"
-@import "css/markdown"
+@use "css/animations"
+@use "css/global"
+@use "css/fonts/font-custom.scss"
+@use "css/fonts/BackIcon.css"
+@use "css/colors"
+@use "css/markdown"
 
 *
     transition: all 0.25s cubic-bezier(0.35, 0, 0.72, 0.22)
 
 #app
-    font-family: $font
+    font-family: font-custom.$font
     -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
     text-align: center
-    color: $color-text-main
+    color: colors.$color-text-main
 
     // Max width and center
     max-width: 900px
@@ -101,45 +101,45 @@ export default class App extends Vue {
     height: 100vh
 
     &[data-lang="en"]
-        font-family: $font-en
+        font-family: font-custom.$font-en
 
 [data-theme="dark"]
     body
         background: #181825
 
     #app
-        color: $color-text-dark-main
+        color: colors.$color-text-dark-main
 </style>
 
 <!-- Scoped Style -->
 <style lang="sass" scoped>
-@import "css/colors"
+@use "css/colors"
 
 // Title
 #title
-    background-color: $color-bg-5
+    background-color: colors.$color-bg-5
     min-height: 250px
     height: fit-content
 
     #title-txt
         font-size: x-large
 
     #title-sub
-        color: $color-text-light
+        color: colors.$color-text-light
 
 // Navigation bar
 #nav
-    background-color: $color-bg-6
+    background-color: colors.$color-bg-6
     min-height: 40px
 
     a
         text-decoration: none
         margin: 15px
         font-size: 15px
-        color: $color-text-main
+        color: colors.$color-text-main
 
         &.router-link-exact-active
-            color: $color-text-special
+            color: colors.$color-text-special
 
 .kawaii
     width: 100%
@@ -151,28 +151,28 @@ export default class App extends Vue {
 #router
     flex: 3
     padding: 20px 0 100px
-    background-color: $color-bg-4
+    background-color: colors.$color-bg-4
 
 .router-link
     position: relative
     z-index: 100
 
 [data-theme="dark"]
     #title
-        background-color: $color-bg-dark-5
+        background-color: colors.$color-bg-dark-5
 
         #title-sub
-            color: $color-text-dark-light
+            color: colors.$color-text-dark-light
 
     #nav
-        background-color: $color-bg-dark-6
+        background-color: colors.$color-bg-dark-6
 
         a
-            color: $color-text-dark-main
+            color: colors.$color-text-dark-main
 
             &.router-link-exact-active
-                color: $color-text-dark-special
+                color: colors.$color-text-dark-special
 
     #router
-        background-color: $color-bg-dark-4
+        background-color: colors.$color-bg-dark-4
 </style>

src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -35,6 +36,7 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -53,7 +55,10 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useModel: typeof import('vue')['useModel']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -62,6 +67,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components.d.ts

@@ -1,10 +1,10 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     BackupButtons: typeof import('./components/buttons/BackupButtons.vue')['default']

src/components/Balloon.vue

@@ -40,7 +40,7 @@ export default class Balloon extends Vue {
 </script>
 
 <style lang="sass">
-@import '@/css/animations'
+@use '@/css/animations'
 
 .balloon
     position: fixed

src/components/Banner.vue

@@ -22,16 +22,16 @@ export default class Banner extends Vue {
 </template>
 
 <style lang="scss">
-@import "@/css/colors";
+@use "@/css/colors";
 
 .banner {
     width: 90%;
     margin: 10px auto;
     min-height: 100px;
     display: block;
-    background: $color-bg-5;
+    background: colors.$color-bg-5;
     border-radius: 30px;
-    border-color: $color-text-light;
+    border-color: colors.$color-text-light;
     border-style: solid;
     border-width: 2px;
     height: fit-content;
@@ -58,13 +58,13 @@ export default class Banner extends Vue {
         vertical-align: top;
 
         h3 {
-            color: $color-text-main;
+            color: colors.$color-text-main;
             margin: 5px;
             font-size: 1.4rem;
         }
 
         p {
-            color: $color-text-light;
+            color: colors.$color-text-light;
             margin: 5px;
             font-size: 1rem;
         }
@@ -73,16 +73,16 @@ export default class Banner extends Vue {
 
 [data-theme="dark"] {
     .banner {
-        border-color: $color-text-dark-light;
-        background: $color-bg-dark-5;
+        border-color: colors.$color-text-dark-light;
+        background: colors.$color-bg-dark-5;
 
         .content {
             h3 {
-                color: $color-text-dark-main;
+                color: colors.$color-text-dark-main;
             }
 
             p {
-                color: $color-text-dark-light;
+                color: colors.$color-text-dark-light;
             }
         }
     }

src/components/BlurBlock.vue

@@ -47,13 +47,13 @@ export default class BlurBlock extends Vue {
 </template>
 
 <style lang="scss">
-@import '../css/colors.sass';
-@import '../css/markdown.sass';
-@import '../css/global.sass';
-@import '../css/motion.scss';
+@use '../css/colors.sass';
+@use '../css/markdown.sass';
+@use '../css/global.sass';
+@use '../css/motion.scss';
 
 .blur {
     @extend .markdown-content;
-    transition: all 1s $ease-out-cric;
+    transition: all 1s motion.$ease-out-cric;
 }
 </style>

src/components/CapDownQuote.vue

@@ -17,7 +17,7 @@ export default class CapDownQuote extends Vue {
 
 <style lang="scss">
 @use 'sass:math';
-@import "@/css/fonts/font-custom";
+@use "@/css/fonts/font-custom";
 
 .cd {
     margin: 1rem auto;