Upgrade the Vue version to 3.4+ / 升级 Vue 的版本至 3.4+

docs/package.json

@@ -12,7 +12,7 @@
     "@docsearch/js": "^3.1.0",
     "@element-plus/icons-vue": "^2.3.1",
     "@element-plus/metadata": "workspace:*",
-    "@vue/shared": "^3.2.37",
+    "@vue/shared": "^3.4.27",
     "@vueuse/core": "^9.1.0",
     "axios": "^0.27.2",
     "clipboard-copy": "^4.0.1",
@@ -21,7 +21,7 @@
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
     "prism-theme-vars": "^0.2.3",
-    "vue": "^3.2.37"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
     "@crowdin/cli": "^3.7.10",

internal/build/package.json

@@ -12,7 +12,7 @@
     "stub": "unbuild --stub"
   },
   "peerDependencies": {
-    "vue": "^3.2.25"
+    "vue": ">=3.2.25"
   },
   "dependencies": {
     "@element-plus/build-constants": "workspace:*",
@@ -40,6 +40,6 @@
     "@esbuild-kit/cjs-loader": "^2.2.1",
     "@pnpm/types": "^8.4.0",
     "unbuild": "^0.7.4",
-    "vue": "^3.2.37"
+    "vue": "^3.4.27"
   }
 }

package.json

@@ -41,7 +41,7 @@
     "postinstall": "pnpm stub && concurrently \"pnpm gen:version\" \"pnpm run -C internal/metadata dev\""
   },
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   },
   "dependencies": {
     "@element-plus/components": "workspace:*",
@@ -57,7 +57,7 @@
     "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
     "@types/lodash": "^4.14.182",
     "@types/lodash-es": "^4.17.6",
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^10.9.0",
     "async-validator": "^4.2.5",
     "dayjs": "^1.11.3",
     "escape-html": "^1.0.3",
@@ -79,15 +79,15 @@
     "@pnpm/types": "^8.4.0",
     "@types/fs-extra": "^9.0.13",
     "@types/gulp": "^4.0.9",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^18.19.25",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.12.11",
     "@types/sass": "^1.43.1",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vitest/coverage-v8": "^1.6.0",
     "@vitest/ui": "1.6.0",
-    "@vue/test-utils": "^2.0.0",
-    "@vue/tsconfig": "^0.1.3",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.5.1",
     "c8": "^7.11.3",
     "chalk": "^5.0.1",
     "concurrently": "^7.2.2",
@@ -99,9 +99,9 @@
     "eslint-define-config": "^1.5.1",
     "expect-type": "^0.13.0",
     "fast-glob": "^3.2.11",
-    "happy-dom": "^14.3.3",
+    "happy-dom": "^14.11.0",
     "husky": "^9.0.11",
-    "jsdom": "16.4.0",
+    "jsdom": "24.0.0",
     "lint-staged": "^13.0.3",
     "npm-run-all2": "^5.0.0",
     "prettier": "^2.7.1",
@@ -110,15 +110,15 @@
     "rimraf": "^3.0.2",
     "sass": "^1.53.0",
     "ts-morph": "^14.0.0",
-    "tsx": "^4.7.1",
+    "tsx": "^4.10.4",
     "type-fest": "^2.14.0",
-    "typescript": "^4.7.4",
+    "typescript": "^5.4.5",
     "unplugin-element-plus": "^0.4.0",
     "unplugin-vue-macros": "^2.7.11",
     "vitest": "1.6.0",
-    "vue": "^3.2.37",
-    "vue-router": "^4.0.16",
-    "vue-tsc": "^0.38.2"
+    "vue": "^3.4.27",
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.0.16"
   },
   "engines": {
     "node": ">= 18"

packages/components/form/src/constants.ts

@@ -3,5 +3,5 @@ import type { FormContext, FormItemContext } from './types'
 
 export const formContextKey: InjectionKey<FormContext> =
   Symbol('formContextKey')
-export const formItemContextKey: InjectionKey<FormItemContext> =
+export const formItemContextKey: InjectionKey<FormItemContext | undefined> =
   Symbol('formItemContextKey')

packages/components/package.json

@@ -7,7 +7,7 @@
   "unpkg": "index.js",
   "jsdelivr": "index.js",
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   },
   "types": "index.d.ts",
   "sideEffects": false,

packages/components/upload/src/upload.vue

@@ -55,6 +55,7 @@ import UploadList from './upload-list.vue'
 import UploadContent from './upload-content.vue'
 import { useHandlers } from './use-handlers'
 import { uploadProps } from './upload'
+import type { UploadContext } from './constants'
 
 import type {
   UploadContentInstance,
@@ -101,7 +102,7 @@ onBeforeUnmount(() => {
 
 provide(uploadContextKey, {
   accept: toRef(props, 'accept'),
-})
+} as UploadContext)
 
 defineExpose({
   /** @description cancel upload request */

packages/directives/package.json

@@ -8,7 +8,7 @@
   "unpkg": "index.js",
   "jsdelivr": "index.js",
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/element-plus/package.json

@@ -77,7 +77,7 @@
     "lib/components/*/style/*"
   ],
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.1",
@@ -99,7 +99,7 @@
   "devDependencies": {
     "@types/node": "*",
     "csstype": "^2.6.20",
-    "vue": "^3.2.37",
+    "vue": "^3.4.27",
     "vue-router": "^4.0.16"
   },
   "vetur": {

packages/hooks/package.json

@@ -9,7 +9,7 @@
   "jsdelivr": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   },
   "gitHead": "c69724230befa8fede0e6b9c37fb0b7e39fd7cdd"
 }

packages/hooks/use-forward-ref/index.ts

@@ -18,7 +18,7 @@ export const useForwardRef = <T>(forwardRef: Ref<T | null>) => {
 
   provide(FORWARD_REF_INJECTION_KEY, {
     setForwardRef,
-  })
+  } as ForwardRefInjectionContext)
 }
 
 export const useForwardRefDirective = (

packages/utils/arrays.ts

@@ -5,7 +5,7 @@ type Many<T> = T | ReadonlyArray<T>
 /** like `_.castArray`, except falsy value returns empty array. */
 export const castArray = <T>(arr: Many<T>): T[] => {
   if (!arr && (arr as any) !== 0) return []
-  return Array.isArray(arr) ? arr : [arr]
+  return (Array.isArray(arr) ? arr : [arr]) as T[]
 }
 
 // TODO: remove import alias

packages/utils/objects.ts

@@ -2,8 +2,10 @@ import { get, set } from 'lodash-unified'
 import type { Entries } from 'type-fest'
 import type { Arrayable } from '.'
 
-export const keysOf = <T>(arr: T) => Object.keys(arr) as Array<keyof T>
-export const entriesOf = <T>(arr: T) => Object.entries(arr) as Entries<T>
+export const keysOf = <T extends Record<string, any>>(arr: T) =>
+  Object.keys(arr) as Array<keyof T>
+export const entriesOf = <T extends Record<string, any>>(arr: T) =>
+  Object.entries(arr) as Entries<T>
 export { hasOwn } from '@vue/shared'
 
 export const getProp = <T = any>(

packages/utils/package.json

@@ -4,6 +4,6 @@
   "license": "MIT",
   "main": "index.ts",
   "peerDependencies": {
-    "vue": "^3.2.0"
+    "vue": ">=3.2.0"
   }
 }

packages/utils/vue/install.ts

@@ -7,7 +7,7 @@ export const withInstall = <T, E extends Record<string, any>>(
   main: T,
   extra?: E
 ) => {
-  ;(main as SFCWithInstall<T>).install = (app): void => {
+  ;(main as SFCWithInstall<T>).install = (app: App): void => {
     for (const comp of [main, ...Object.values(extra ?? {})]) {
       app.component(comp.name, comp)
     }

play/package.json

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
-    "vue": "^3.2.37"
+    "vue": "^3.4.27"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",