From 29ff9bc52a5c1d48dbea019aa3a4a5b3b3b6e20a Mon Sep 17 00:00:00 2001
From: Yue JIN <yjin@nustarnuclear.com>
Date: Thu, 29 Feb 2024 14:52:27 +0800
Subject: [PATCH] feat: support native listener in Vue 3

---
 README.md      | 24 ++++++++++++++++++++++++
 src/ECharts.ts | 20 +++++++++++++++++---
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 51d5c16..b17ca92 100644
--- a/README.md
+++ b/README.md
@@ -464,6 +464,30 @@ Vue-ECharts support the following events:
 
 See supported events [here →](https://echarts.apache.org/en/api.html#events)
 
+#### Native DOM Events
+
+<details open>
+<summary>Vue 3</summary>
+
+```vue
+<template>
+  <v-chart @native:click="handleClick" />
+</template>
+```
+
+</details>
+
+<details open>
+<summary>Vue 2</summary>
+
+```vue
+<template>
+  <v-chart @click.native="handleClick" />
+</template>
+```
+
+</details>
+
 ## CSP: `style-src` or `style-src-elem`
 
 If you are applying a CSP to prevent inline `<style>` injection, you need to use files from `dist/csp` directory and include `dist/csp/style.css` into your app manually.
diff --git a/src/ECharts.ts b/src/ECharts.ts
index 9063140..f46c380 100644
--- a/src/ECharts.ts
+++ b/src/ECharts.ts
@@ -37,7 +37,7 @@ import {
   useLoading,
   loadingProps
 } from "./composables";
-import { omitOn, unwrapInjected } from "./utils";
+import { isOn, omitOn, unwrapInjected } from "./utils";
 import { register, TAG_NAME, type EChartsElement } from "./wc";
 import "./style.css";
 
@@ -95,6 +95,7 @@ export default defineComponent({
       () => props.updateOptions || unwrapInjected(defaultUpdateOptions, {})
     );
     const nonEventAttrs = computed(() => omitOn(attrs));
+    const nativeEventAttrs: Record<string, unknown> = {};
 
     // @ts-expect-error listeners for Vue 2 compatibility
     const listeners = getCurrentInstance().proxy.$listeners;
@@ -119,12 +120,22 @@ export default defineComponent({
         realListeners = {};
 
         Object.keys(attrs)
-          .filter(key => key.indexOf("on") === 0 && key.length > 2)
+          .filter(key => isOn(key))
           .forEach(key => {
             // onClick    -> c + lick
             // onZr:click -> z + r:click
             let event = key.charAt(2).toLowerCase() + key.slice(3);
 
+            // Collect native events
+            if (event.startsWith("native:")) {
+              // native:click -> onClick
+              const nativeKey =
+                "on" + event.charAt(7).toUpperCase() + event.slice(8);
+
+              nativeEventAttrs[nativeKey] = attrs[key];
+              return;
+            }
+
             // clickOnce    -> ~click
             // zr:clickOnce -> ~zr:click
             if (event.substring(event.length - 4) === "Once") {
@@ -296,6 +307,7 @@ export default defineComponent({
       inner,
       setOption,
       nonEventAttrs,
+      nativeEventAttrs,
       ...publicApi
     };
   },
@@ -303,7 +315,9 @@ export default defineComponent({
     // Vue 3 and Vue 2 have different vnode props format:
     // See https://v3-migration.vuejs.org/breaking-changes/render-function-api.html#vnode-props-format
     const attrs = (
-      Vue2 ? { attrs: this.nonEventAttrs } : { ...this.nonEventAttrs }
+      Vue2
+        ? { attrs: this.nonEventAttrs }
+        : { ...this.nonEventAttrs, ...this.nativeEventAttrs }
     ) as any;
     attrs.ref = "root";
     attrs.class = attrs.class ? ["echarts"].concat(attrs.class) : "echarts";