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/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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/[email protected]"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></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 <[email protected]>",
   "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",

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"
-  | "mouseover"
-  | "mouseout"
-  | "globalout"
-  | "contextmenu";
-type EChartsOtherEventName =
+  | "contextmenu"
+  | "drag"
+  | "dragstart"
+  | "dragend"
+  | "dragenter"
+  | "dragleave"
+  | "dragover"
+  | "drop"
+  | "globalout";
+
+type ZRenderEventName = `zr:${ElementEventName}`;
+
+type OtherEventName =
   | "highlight"
   | "downplay"
   | "selectchanged"
@@ -57,46 +73,22 @@ type EChartsOtherEventName =
   | "brush"
   | "brushEnd"
   | "brushselected"
-  | "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}`;
+  | "globalcursortaken";
 
-// See https://echarts.apache.org/en/api.html#events.Mouse%20events
-interface MouseEventParams {
-  componentType: string;
-  seriesType: string;
-  seriesIndex: number;
-  seriesName: string;
-  name: string;
-  dataIndex: number;
-  color: string;
-}
+type ElementEmits = {
+  [key in ElementEventName]: (params: ECElementEvent) => boolean;
+};
 
-type MouseEmits = {
-  [k in EChartsMouseEventName]: (params: MouseEventParams) => boolean;
+type ZRenderEmits = {
+  [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;