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 生态的相关依赖至最新版本。 ```
halo-dev · May 22, 2024 · ce5757a · ce5757a
1 parent ea98ae5
commit ce5757a
Show file tree

Hide file tree

Showing 20 changed files with 626 additions and 779 deletions.
diff --git a/ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue b/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;

diff --git a/ui/package.json b/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"
  }

diff --git a/ui/packages/components/package.json b/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"
  }
 }
diff --git a/ui/packages/components/src/components/alert/Alert.vue b/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";
-
-const TypeIcons: Record<Type, Component> = {
- success: IconCheckboxCircle,
- info: IconInformation,
- default: IconInformation,
- warning: IconErrorWarning,
- error: IconCloseCircle,
+import type { FunctionalComponent, Raw } from "vue";
+import type { SVGAttributes } from "vue";
+
+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(

diff --git a/ui/packages/components/src/components/dropdown/Dropdown.vue b/ui/packages/components/src/components/dropdown/Dropdown.vue
@@ -1,13 +1,17 @@
 <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";
 
 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 />

diff --git a/ui/packages/components/src/components/dropdown/index.ts b/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";
diff --git a/ui/packages/components/src/components/tooltip/index.ts b/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";
diff --git a/ui/packages/components/vite.config.ts b/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,
  ],

diff --git a/ui/packages/editor/package.json b/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"
  }
 }
diff --git a/ui/packages/editor/src/components/block/BlockActionButton.vue b/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<{

diff --git a/ui/packages/editor/src/components/block/BlockActionInput.vue b/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<{

diff --git a/ui/packages/editor/src/components/bubble/BubbleItem.vue b/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

diff --git a/ui/packages/editor/src/components/toolbar/ToolbarItem.vue b/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";
 

diff --git a/ui/packages/editor/src/extensions/link/LinkBubbleButton.vue b/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";

diff --git a/ui/packages/shared/package.json b/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:*"

diff --git a/ui/packages/shared/vite.config.ts b/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,
  }),
  ],