types: use more precise typings for event handlers, update peer deps for echarts

CHANGELOG.md

@@ -1,3 +1,8 @@
+## 6.5.0
+
+* Use more precise typings for all event params.
+* Updated peer deps for `echarts` to `^5.4.1`.
+
 ## 6.4.1
 
 * Improve typings for mouse event params.

README.md

@@ -227,7 +227,7 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -247,7 +247,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.0"></script>
 ```
 <!-- vue2Scripts:end -->
 

README.zh-Hans.md

@@ -225,7 +225,7 @@ import "echarts";
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.0"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -245,7 +245,7 @@ app.component('v-chart', VueECharts)
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue@2.7.5"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
-<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.4.1"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue-echarts@6.5.0"></script>
 ```
 <!-- vue2Scripts:end -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.4.1",
+  "version": "6.5.0",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <justice360@gmail.com>",
   "scripts": {
@@ -40,7 +40,7 @@
     "@vue/eslint-config-typescript": "^10.0.0",
     "comment-mark": "^1.0.0",
     "core-js": "^3.23.0",
-    "echarts": "^5.3.2",
+    "echarts": "^5.4.1",
     "echarts-liquidfill": "^3.1.0",
     "eslint": "^7.20.0",
     "eslint-plugin-prettier": "^3.3.1",
@@ -67,7 +67,7 @@
   },
   "peerDependencies": {
     "@vue/composition-api": "^1.0.5",
-    "echarts": "^5.1.2",
+    "echarts": "^5.4.1",
     "vue": "^2.6.12 || ^3.1.1"
   },
   "jsdelivr": "dist/index.umd.min.js",

pnpm-lock.yaml

@@ -15,7 +15,7 @@ specifiers:
   '@vue/eslint-config-typescript': ^10.0.0
   comment-mark: ^1.0.0
   core-js: ^3.23.0
-  echarts: ^5.3.2
+  echarts: ^5.4.1
   echarts-liquidfill: ^3.1.0
   eslint: ^7.20.0
   eslint-plugin-prettier: ^3.3.1
@@ -60,8 +60,8 @@ devDependencies:
   '@vue/eslint-config-typescript': 10.0.0_yzev4ryi2uowr3tzgilgj3i2em
   comment-mark: 1.1.1
   core-js: 3.23.3
-  echarts: 5.3.3
+  echarts: 5.4.1
-  echarts-liquidfill: 3.1.0_echarts@5.3.3
+  echarts-liquidfill: 3.1.0_echarts@5.4.1
   eslint: 7.32.0
   eslint-plugin-prettier: 3.4.1_fqyzhpusvewbsl54pqqbxqaegm
   eslint-plugin-vue: 8.7.1_eslint@7.32.0
@@ -3925,19 +3925,19 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: true
 
-  /echarts-liquidfill/3.1.0_echarts@5.3.3:
+  /echarts-liquidfill/3.1.0_echarts@5.4.1:
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
     peerDependencies:
       echarts: ^5.0.1
     dependencies:
-      echarts: 5.3.3
+      echarts: 5.4.1
     dev: true
 
-  /echarts/5.3.3:
+  /echarts/5.4.1:
-    resolution: {integrity: sha512-BRw2serInRwO5SIwRviZ6Xgm5Lb7irgz+sLiFMmy/HOaf4SQ+7oYqxKzRHAKp4xHQ05AuHw1xvoQWJjDQq/FGw==}
+    resolution: {integrity: sha512-9ltS3M2JB0w2EhcYjCdmtrJ+6haZcW6acBolMGIuf01Hql1yrIV01L1aRj7jsaaIULJslEP9Z3vKlEmnJaWJVQ==}
     dependencies:
       tslib: 2.3.0
-      zrender: 5.3.2
+      zrender: 5.4.1
     dev: true
 
   /ee-first/1.1.1:
@@ -7831,8 +7831,8 @@ packages:
       strip-indent: 2.0.0
     dev: true
 
-  /zrender/5.3.2:
+  /zrender/5.4.1:
-    resolution: {integrity: sha512-8IiYdfwHj2rx0UeIGZGGU4WEVSDEdeVCaIg/fomejg1Xu6OifAL1GVzIPHg2D+MyUkbNgPWji90t0a8IDk+39w==}
+    resolution: {integrity: sha512-M4Z05BHWtajY2241EmMPHglDQAJ1UyHQcYsxDNzD9XLSkPDqMq4bB28v9Pb4mvHnVQ0GxyTklZ/69xCFP6RXBA==}
     dependencies:
       tslib: 2.3.0
     dev: true

src/types.ts

@@ -1,4 +1,9 @@
-import { init, type SetOptionOpts } from "echarts/core";
+import {
+  init,
+  type SetOptionOpts,
+  type ECElementEvent,
+  type ElementEvent
+} from "echarts/core";
 import type { Ref } from "vue";
 
 export type Injection<T> = T | null | Ref<T | null> | { value: T | null };
@@ -20,17 +25,28 @@ export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
 
-type EChartsMouseEventName =
+type ElementEventName =
   | "click"
   | "dblclick"
+  | "mousewheel"
+  | "mouseout"
+  | "mouseover"
+  | "mouseup"
   | "mousedown"
   | "mousemove"
-  | "mouseup"
+  | "contextmenu"
-  | "mouseover"
+  | "drag"
-  | "mouseout"
+  | "dragstart"
-  | "globalout"
+  | "dragend"
-  | "contextmenu";
+  | "dragenter"
-type EChartsOtherEventName =
+  | "dragleave"
+  | "dragover"
+  | "drop"
+  | "globalout";
+
+type ZRenderEventName = `zr:${ElementEventName}`;
+
+type OtherEventName =
   | "highlight"
   | "downplay"
   | "selectchanged"
@@ -57,46 +73,22 @@ type EChartsOtherEventName =
   | "brush"
   | "brushEnd"
   | "brushselected"
-  | "globalcursortaken"
+  | "globalcursortaken";
-  | "rendered"
-  | "finished";
-type ZRenderEventName =
-  | "click"
-  | "dblclick"
-  | "mousewheel"
-  | "mouseout"
-  | "mouseover"
-  | "mouseup"
-  | "mousedown"
-  | "mousemove"
-  | "contextmenu"
-  | "drag"
-  | "dragstart"
-  | "dragend"
-  | "dragenter"
-  | "dragleave"
-  | "dragover"
-  | "drop"
-  | "globalout";
-type OtherEventName = EChartsOtherEventName | `zr:${ZRenderEventName}`;
 
-// See https://echarts.apache.org/en/api.html#events.Mouse%20events
+type ElementEmits = {
-interface MouseEventParams {
+  [key in ElementEventName]: (params: ECElementEvent) => boolean;
-  componentType: string;
+};
-  seriesType: string;
-  seriesIndex: number;
-  seriesName: string;
-  name: string;
-  dataIndex: number;
-  color: string;
-}
 
-type MouseEmits = {
+type ZRenderEmits = {
-  [k in EChartsMouseEventName]: (params: MouseEventParams) => boolean;
+  [key in ZRenderEventName]: (params: ElementEvent) => boolean;
 };
 
 type OtherEmits = {
   [key in OtherEventName]: null;
 };
 
-export type Emits = MouseEmits & OtherEmits;
+export type Emits = ElementEmits &
+  OtherEmits & {
+    rendered: (params: { elapsedTime: number }) => boolean;
+    finished: () => boolean;
+  } & ZRenderEmits;