chore: bump up vue-related version (#5965)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

#### What this PR does / why we need it:

升级 Vue 生态的相关依赖，以及修复编译 packages 时的异常日志问题。

#### Does this PR introduce a user-facing change?

```release-note
升级 Vue 生态的相关依赖至最新版本。
```

ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -118,7 +118,7 @@ const { data: setting } = useQuery<Setting>({
 
 provide<Ref<Setting | undefined>>("setting", setting);
 
-const handleTabChange = (id: string) => {
+const handleTabChange = (id: string | number) => {
   const tab = tabs.value.find((item) => item.id === id);
   if (tab) {
     activeTab.value = tab.id;

ui/package.json

@@ -71,18 +71,18 @@
     "@uppy/status-bar": "^3.2.5",
     "@uppy/vue": "^1.1.0",
     "@uppy/xhr-upload": "^3.6.0",
-    "@vueuse/components": "^10.3.0",
-    "@vueuse/core": "^10.3.0",
-    "@vueuse/integrations": "^10.5.0",
-    "@vueuse/router": "^10.3.0",
-    "@vueuse/shared": "^10.3.0",
+    "@vueuse/components": "^10.9.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/integrations": "^10.9.0",
+    "@vueuse/router": "^10.9.0",
+    "@vueuse/shared": "^10.9.0",
     "axios": "^1.6.7",
     "codemirror": "^6.0.1",
     "colorjs.io": "^0.4.3",
     "cropperjs": "^1.5.13",
     "dayjs": "^1.11.7",
     "emoji-mart": "^5.3.3",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "fuse.js": "^6.6.2",
     "jsencrypt": "^3.3.2",
     "lodash-es": "^4.17.21",
@@ -95,18 +95,18 @@
     "qs": "^6.11.1",
     "short-unique-id": "^5.0.2",
     "transliteration": "^2.3.5",
-    "vue": "^3.4.19",
+    "vue": "^3.4.27",
     "vue-demi": "^0.14.7",
     "vue-draggable-plus": "^0.4.1",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-i18n": "^9.9.1",
-    "vue-router": "^4.2.5"
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.3.2"
   },
   "devDependencies": {
     "@changesets/cli": "^2.25.2",
     "@iconify-json/mdi": "^1.1.50",
     "@iconify-json/vscode-icons": "^1.1.22",
-    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.0",
@@ -120,10 +120,10 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/ui": "^0.34.1",
-    "@vue/compiler-sfc": "^3.4.19",
+    "@vue/compiler-sfc": "^3.4.27",
     "@vue/eslint-config-prettier": "^7.1.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.14",
     "c8": "^7.12.0",
@@ -153,7 +153,7 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-static-copy": "^1.0.4",
-    "vite-plugin-vue-devtools": "^7.1.3",
+    "vite-plugin-vue-devtools": "^7.2.1",
     "vitest": "^0.34.1",
     "vue-tsc": "^1.8.27"
   }

ui/packages/components/package.json

@@ -58,11 +58,11 @@
     "react-dom": "^18.2.0",
     "storybook": "^7.6.3",
     "unplugin-icons": "^0.14.15",
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   },
   "exports": {
     ".": {
@@ -72,6 +72,6 @@
     "./dist/style.css": "./dist/style.css"
   },
   "dependencies": {
-    "floating-vue": "2.0.0-beta.24"
+    "floating-vue": "^5.2.2"
   }
 }

ui/packages/components/src/components/alert/Alert.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import type { Component } from "vue";
-import { computed } from "vue";
+import { computed, markRaw } from "vue";
 import type { Type } from "./interface";
 import {
   IconCheckboxCircle,
@@ -9,13 +8,15 @@ import {
   IconErrorWarning,
   IconInformation,
 } from "../../icons/icons";
+import type { FunctionalComponent, Raw } from "vue";
+import type { SVGAttributes } from "vue";
 
-const TypeIcons: Record<Type, Component> = {
-  success: IconCheckboxCircle,
-  info: IconInformation,
-  default: IconInformation,
-  warning: IconErrorWarning,
-  error: IconCloseCircle,
+const TypeIcons: Record<Type, Raw<FunctionalComponent<SVGAttributes>>> = {
+  success: markRaw(IconCheckboxCircle),
+  info: markRaw(IconInformation),
+  default: markRaw(IconInformation),
+  warning: markRaw(IconErrorWarning),
+  error: markRaw(IconCloseCircle),
 };
 
 const props = withDefaults(

ui/packages/components/src/components/dropdown/Dropdown.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import { Dropdown as FloatingDropdown, type Placement } from "floating-vue";
+import {
+  Dropdown as FloatingDropdown,
+  type Placement,
+  type TriggerEvent,
+} from "floating-vue";
 import "floating-vue/dist/style.css";
 import { provide, ref } from "vue";
 import { DropdownContextInjectionKey } from "./symbols";
@@ -7,7 +11,7 @@ import { DropdownContextInjectionKey } from "./symbols";
 withDefaults(
   defineProps<{
     placement?: Placement;
-    triggers?: string[];
+    triggers?: TriggerEvent[];
     classes?: string[];
   }>(),
   {
@@ -41,7 +45,7 @@ defineExpose({
     ref="dropdownRef"
     :placement="placement"
     :triggers="triggers"
-    :dispose-timeout="null"
+    :dispose-timeout="0"
     @show="emit('show')"
   >
     <slot />

ui/packages/components/src/components/dropdown/index.ts

@@ -1,5 +1,6 @@
 export { default as VDropdown } from "./Dropdown.vue";
 export { default as VDropdownItem } from "./DropdownItem.vue";
 export { default as VDropdownDivider } from "./DropdownDivider.vue";
-export { VClosePopper } from "floating-vue";
+// VClosePopper is deprecated, please use vClosePopper from "@halo-dev/components" instead
+export { vClosePopper as VClosePopper, vClosePopper } from "floating-vue";
 export * from "./symbols";

ui/packages/components/src/components/tooltip/index.ts

@@ -1,2 +1,3 @@
-export { VTooltip } from "floating-vue";
+// VTooltip is deprecated, please use vTooltip from "@halo-dev/components" instead
+export { vTooltip, vTooltip as VTooltip } from "floating-vue";
 import "./style.css";

ui/packages/components/vite.config.ts

@@ -13,9 +13,9 @@ export default defineConfig({
     VueJsx(),
     Icons({ compiler: "vue3" }),
     Dts({
-      tsConfigFilePath: "./tsconfig.app.json",
+      tsconfigPath: "./tsconfig.app.json",
       entryRoot: "./src",
-      outputDir: "./dist",
+      outDir: "./dist",
       insertTypesEntry: true,
     }) as Plugin,
   ],

ui/packages/editor/package.json

@@ -79,7 +79,7 @@
     "@tiptap/pm": "^2.4.0",
     "@tiptap/suggestion": "^2.4.0",
     "@tiptap/vue-3": "^2.4.0",
-    "floating-vue": "2.0.0-beta.24",
+    "floating-vue": "^5.2.2",
     "github-markdown-css": "^5.2.0",
     "highlight.js": "11.8.0",
     "linkifyjs": "^4.1.3",
@@ -91,9 +91,9 @@
     "@iconify/json": "^2.2.117",
     "@types/linkifyjs": "^2.1.7",
     "release-it": "^16.1.5",
-    "vite-plugin-dts": "^3.7.3"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.19"
+    "vue": "^3.4.27"
   }
 }

ui/packages/editor/src/components/block/BlockActionButton.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VTooltip } from "floating-vue";
+import { vTooltip } from "floating-vue";
 
 withDefaults(
   defineProps<{

ui/packages/editor/src/components/block/BlockActionInput.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import { VTooltip } from "floating-vue";
+import { vTooltip } from "floating-vue";
 
 const props = withDefaults(
   defineProps<{

ui/packages/editor/src/components/bubble/BubbleItem.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VTooltip, Dropdown as VDropdown } from "floating-vue";
+import { vTooltip, Dropdown as VDropdown } from "floating-vue";
 import type { Editor } from "@/tiptap/vue-3";
 import { ref, type Component } from "vue";
 
@@ -44,7 +44,7 @@ const handleBubbleItemClick = (editor: Editor) => {
     class="inline-flex"
     :triggers="[]"
     :auto-hide="true"
-    :shown="componentRef"
+    :shown="!!componentRef"
     :distance="10"
   >
     <button

ui/packages/editor/src/components/toolbar/ToolbarItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Component } from "vue";
-import { VTooltip } from "floating-vue";
+import { vTooltip } from "floating-vue";
 import MdiMenuDown from "~icons/mdi/menu-down";
 import type { ToolbarItem } from "@/types";
 

ui/packages/editor/src/extensions/link/LinkBubbleButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, type Component } from "vue";
-import { VTooltip, Dropdown as VDropdown } from "floating-vue";
+import { vTooltip, Dropdown as VDropdown } from "floating-vue";
 import MdiLinkVariant from "~icons/mdi/link-variant";
 import { i18n } from "@/locales";
 import { type Editor } from "@/tiptap/vue-3";

ui/packages/shared/package.json

@@ -38,11 +38,11 @@
   "homepage": "https://github.com/halo-dev/halo/tree/main/ui/packages/shared#readme",
   "license": "MIT",
   "devDependencies": {
-    "vite-plugin-dts": "^2.3.0"
+    "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2"
   },
   "dependencies": {
     "@halo-dev/api-client": "workspace:*"

ui/packages/shared/vite.config.ts

@@ -11,9 +11,9 @@ export default defineConfig({
     Vue(),
     VueJsx(),
     Dts({
-      tsConfigFilePath: "./tsconfig.app.json",
+      tsconfigPath: "./tsconfig.app.json",
       entryRoot: "./src",
-      outputDir: "./dist",
+      outDir: "./dist",
       insertTypesEntry: true,
     }),
   ],

ui/src/components/editor/DefaultEditor.vue

@@ -273,7 +273,7 @@ onMounted(() => {
       UiExtensionAudio.configure({
         uploadAudio: props.uploadImage,
       }),
-      ExtensionCharacterCount as AnyExtension,
+      ExtensionCharacterCount,
       ExtensionFontSize,
       ExtensionColor,
       ExtensionIndent,

ui/src/setup/setupComponents.ts

@@ -1,5 +1,5 @@
 import { defineAsyncComponent, type App } from "vue";
-import { VClosePopper, VLoading, VTooltip } from "@halo-dev/components";
+import { vClosePopper, VLoading, vTooltip } from "@halo-dev/components";
 import { Dropdown } from "floating-vue";
 import "floating-vue/dist/style.css";
 // @ts-ignore
@@ -22,8 +22,8 @@ export function setupComponents(app: App) {
     })
   );
 
-  app.directive("tooltip", VTooltip);
-  app.directive("close-popper", VClosePopper);
+  app.directive("tooltip", vTooltip);
+  app.directive("close-popper", vClosePopper);
   // @deprecated
   // Will be removed in the future, please use the VDropdown component from @halo-dev/components.
   app.component("FloatingDropdown", Dropdown);

ui/src/vite/config-builder.ts

@@ -93,6 +93,7 @@ export function createViteConfig(options: Options) {
               "jsencrypt",
               "overlayscrollbars",
               "overlayscrollbars-vue",
+              "floating-vue",
             ],
           },
         },