feat: add basic types for events

Author: Justineo

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 6.3.2
+
+* Added basic types for events (only event names).
+
 ## 6.3.1
 
 * Revert the style change to prevent tooltips from being clipped.

README.md

@@ -308,9 +308,9 @@ Drop `<script>` inside your HTML file and access the component via `window.VueEC
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].37"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -328,9 +328,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue2Scripts:end -->
 

README.zh-Hans.md

@@ -307,9 +307,9 @@ export default {
 
 <!-- vue3Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].45"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].37"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue3Scripts:end -->
 
@@ -327,9 +327,9 @@ app.component('v-chart', VueECharts)
 
 <!-- vue2Scripts:start -->
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].14"></script>
-<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1"></script>
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].5"></script>
+<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2"></script>
 ```
 <!-- vue2Scripts:end -->
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-echarts",
-  "version": "6.3.1",
+  "version": "6.3.2",
   "description": "Vue.js component for Apache ECharts.",
   "author": "GU Yiling <[email protected]>",
   "scripts": {

src/ECharts.ts

@@ -27,7 +27,8 @@ import type {
   InitOptions,
   InitOptionsInjection,
   UpdateOptions,
-  UpdateOptionsInjection
+  UpdateOptionsInjection,
+  Emits
 } from "./types";
 import {
   usePublicAPI,
@@ -66,6 +67,7 @@ export default defineComponent({
     ...autoresizeProps,
     ...loadingProps
   },
+  emits: [] as unknown as Emits,
   inheritAttrs: false,
   setup(props, { attrs }) {
     const root = shallowRef<HTMLElement>();

src/index.vue2.d.ts

@@ -1,6 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-types */
 import type { Ref, DefineComponent } from "vue-demi";
-import type { Option, InitOptions, UpdateOptions, EChartsType } from "./types";
+import type {
+  Option,
+  InitOptions,
+  UpdateOptions,
+  EChartsType,
+  Emits
+} from "./types";
 
 declare const LOADING_OPTIONS_KEY = "ecLoadingOptions";
 declare const THEME_KEY = "ecTheme";
@@ -47,7 +53,10 @@ declare const Chart: DefineComponent<
   },
   {},
   {},
-  ChartMethods
+  ChartMethods,
+  {},
+  {},
+  Emits
 >;
 
 export default Chart;

src/types.ts

@@ -19,3 +19,65 @@ type ZRenderType = ReturnType<EChartsType["getZr"]>;
 export type EventTarget = EChartsType | ZRenderType;
 type SetOptionType = EChartsType["setOption"];
 export type Option = Parameters<SetOptionType>[0];
+
+type EChartsEventName =
+  | "click"
+  | "dblclick"
+  | "mousedown"
+  | "mousemove"
+  | "mouseup"
+  | "mouseover"
+  | "mouseout"
+  | "globalout"
+  | "contextmenu"
+  | "highlight"
+  | "downplay"
+  | "selectchanged"
+  | "legendselectchanged"
+  | "legendselected"
+  | "legendunselected"
+  | "legendselectall"
+  | "legendinverseselect"
+  | "legendscroll"
+  | "datazoom"
+  | "datarangeselected"
+  | "graphroam"
+  | "georoam"
+  | "treeroam"
+  | "timelinechanged"
+  | "timelineplaychanged"
+  | "restore"
+  | "dataviewchanged"
+  | "magictypechanged"
+  | "geoselectchanged"
+  | "geoselected"
+  | "geounselected"
+  | "axisareaselected"
+  | "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 EventName = EChartsEventName | `zr:${ZRenderEventName}`;
+export type Emits = {
+  [key in EventName]: null;
+};